Why You Should Use Image Compression on Your Website
We already know that slow page load times can kill your SEO efforts. So, what slows down page speeds? The answer is pretty wide-ranging, but one of the most common problems is image size. We all remember the dial-up days when websites took 10 minutes to load, and a single, grainy image could take even longer. Those times were different, though. We expected it. Today, websites are blazingly fast, and if users have to wait longer than two seconds for a page to load, they’re ready to leave. Luckily, we have image compression to help keep your site loading quickly.
Because of image compression, we can see the world in vivid colors without having to wait for a dial-up server to piece together a picture one kilobyte at a time. You should be compressing images on your website already, but if not, it’s time to get with the program.
What is Compression?
Image compression is the practice of optimizing a large image file into a smaller one to limit the amount of stress placed on your website. Larger pictures with more data, slow load times and can cost you valuable traffic. With compression, you can take the same images, reduce the file size, and immediately see improvements in page speeds. In short, compression is the act of limiting the data an image contains.
There are two main types of compression, lossy and lossless.
-Lossy refers to image compression or optimization, where the compression strips away bits of data from an image while trying to maintain as much of the image quality as possible. “Lossyness” can result in pixelation or jagged edges because the compression is getting rid of those data segments. Lossy compression is most commonly associated with JPEG images.
-Lossless compression is a way to reduce file size without losing any quality. Without going too far into the weeds, lossless compression essentially rewrites the original file’s data more efficiently. The tradeoff is the image files don’t end up that much smaller. PNGs are an excellent example of lossless compression, but depending on the needs of your site, PNG files may still be too large.
Benefits of Image Compression
You don’t have long to grab someone’s attention when they visit your website. Somewhere in the neighborhood of 2-7 seconds does not give you much breathing room for load times. Large image files slow load times and cost you traffic. Worse, slow page speeds drastically affect your SEO. Google does not like slow page speeds, and after video, image files take up as much space on your pages as all other data (coding, fonts, etc.) combined.
How do you make sure your images aren’t your downfall? Easy. Since image compression, by definition, reduces the size and amount of data of an image, your pages can load more quickly. Search engines won’t penalize you for slow page speeds, and visitors won’t get impatient and leave. Optimizing image files has other perks, too.
The smaller file sizes use less bandwidth, meaning less stress on your server. Networks can operate faster when there’s less traffic on the road. Also, website backups are a necessity, and compressed images can speed up that process. Finally, and it almost goes without saying, compressed images take up less space on your server.
Best file types for web images
Before we start discussing which types of files are best, let’s cover the differences. The main four types are JPEGs, PNGs, SVGs, and WEBPs. None of these files are better than the others, but each one has benefits in certain circumstances.
JPEG – JPEGs are possibly the most commonly known and used image files. JPEGs are easy to compress because they use lossy compression. The images shrink, but because JPEGs delete data to become smaller, the images lose quality. JPEGs are best for simple pictures that can lose a little data and still look the same. The trouble is finding the balance between small and too small.
PNG – PNGs are the weapon of choice for most people starting or running their own sites. These files can be compressed without losing any quality (lossless compression). However, PNG optimization doesn’t actually remove data, so the image can only be compressed so far, leaving you with what could still be a large image.
SVGs – SVGs are scalable vector graphics. If you are familiar with vector images, you know the draw is the ability to grow or shrink an image without losing pixels. SVGs operate in much the same way. These image files can compress like JPEGs without losing quality like PNGs. SVGs are also incredibly versatile since they show at a higher resolution without slowing down page speeds.
WebP – WebP files are a giant leap into the future of image files. Google created the WebP format to combine superior lossy and lossless compression. Files end up noticeably smaller than both JPEGs and PNGs without losing any quality, and they support transparency just like other files. We’re not to the future yet because not all browsers support WebP images, but it’s a great start.
What kinds of image files you use are dependent on your skill/comfort level with image creation and optimization. SVGs and WebP files are the future because they can do everything PNGs and JPEGs can and then some. But not every occasion suits the more modern image files. Regardless of the image type, the principal goal is to create an optimized file to load on your site.
Compress your images with Imagify
Imagify is a WordPress plugin dedicated to image compression and built by the same team who brought us WPRocket. Imagify offers an easy-to-use image compression system allowing you to choose from three different compression types with one click. Depending on your need, you can choose from normal, aggressive, and ultra. If you don’t like your new image, you can re-compress with one click and start again.
Imagify does come with a free plan with a limit of 25MB/month, but plans up to 1GB are only $4.99/month. Image optimization is a critical factor in running your site, so investing in a compression plugin is certainly worth a look.
Why compression matters
As cameras and software become more advanced, images become more and more detailed. We can zoom in to see every blade of grass from 20 feet away. The wonders of technology! However, that level of detail comes with a cost. The images can be enormous.
Trying to add images that size to your website is almost certainly going to slow everything down, hurt your SEO, and lose traffic. The results can be catastrophic. For years, though, image compression has been the solution. Just as cameras and software are improving, image file types continue to develop. Using SVGs and WebP files let you display full images on your site without slowing page speeds, and tools like Imagify make the task more accessible to anyone.
Without image compression, we wouldn’t see the world online as we do today.
How is your website speed performance? WPClover offers a free 30-point website health inspection to check page speeds and walk through possible best practices for improvements. Come sign up, and let’s get started!
Squarespace provides an easy-to-use website builder. There are some templates and drag and drop functions, but Squarespace isn't anything special at the end of the day. Sooner or later, many users see the limitations and conclude that they’re better off moving away....
How to Make Your Website Disability Friendly Millions of internet users have some sort of disability. Making websites more accessible for traffic with special needs isn’t a difficult task, but it starts with understanding the challenge. There are many...
Third-party scripts are scripts that can be embedded into websites by a third-party vendor. Mostly, they’re used for things like analytics, advertising, widgets, and connecting your website to other business software. Anytime you see an embedded video or social media...