CentrioHost Blog

According to the HTTP Archive, as of December 2018, images make up over 40% of an average website’s page weight on both desktops and mobile devices. That is huge!  ? When it comes to the new mobile-first index and performance, image optimization plays a crucial role in how fast your WordPress site will be able to load. Image compression is one of easiest optimizations you can implement which also, in turn, will have the greatest impact. Essentially, this entails decreasing the file size of your images by using two popular forms of compression: lossy and lossless.

Today we are going to dive into both of these types of image compression and discuss which one we recommend you use. This can vary based on the type of business you operate.

• Lossy Compression
• Lossless Compression
• Which Compression Method is Better?
• How to Use Lossy Compression in WordPress

Lossy Compression

The first form of compression is lossy. Lossy compression involves eliminating some of the data in your image. Because of this, it means you might see degradation (reduction in quality or what some refer to as pixelated). So you have to be careful by how much you’re reducing your image. Not only due to quality, but also because you can’t reverse the process. Of course, one of the great benefits of lossy compression and why it’s one of the most popular compression methods is that you can reduce the file size by a very large amount.

• JPEGs and GIFs are both lossy image formats.
• JPEGs are great for sites needing fast load times as you can adjust the quality level for a good balance of quality and file size.

WordPress Automatically Compresses Images

Did you know that WordPress automatically compresses your JPEGs when you upload them to the media library? By default, WordPress has compressed images automatically up to 90% of their original size. However, as of WordPress 4.5, they increased this to 82% to further increase performance across the board. If you’re wondering why your images look a little pixelated on a fresh WordPress install, that is why.

While automatic compression is great, we’ve generally seen that 82% is by no means far enough when it comes to really making an impact on your site’s performance. Therefore, you can disable this option if you want by adding the following filter to your theme’s functions.php file. Remember, always take a backup first before editing your site.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

If you want to increase the automatic compression ratio of WordPress you can add the filter and reduce the percentage of the original file, such as 70% in the example below.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

Remember, these won’t impact already uploaded images. You would need to go through with a plugin like Regenerate Thumbnails for it to apply it to your existing media library. Or better yet, we simply recommend leaving your theme alone and simply using an image optimization WordPress plugin (which we’ll dive into further below) or further compressing your images before uploading them.

Compress Images With Save for Web (Software)

You can use tools such as Adobe Photoshop, Affinity Photo, Affinity Designer, or other image editors to adjust the quality settings of an image (as seen below). In a majority of the tools, this is under “Save to web” or “Export settings.”

If we do a little comparison of lossy compression rates, we can see that 50% looks great. 33% is starting to get a little blurry on some of the background details (but will pretty unnoticeable), and 5% obviously is not acceptable. This is just an example of why the automatic 82% in WordPress is not enough. You can and should be compressing at much higher rates to further decrease file sizes.

• original.JPG 2.82 MB (2,000 px by 1463 px)
• lossy-compressed-1.JPG: 227 KB (2,000 px by 1463 px) 91.95% reduction
• lossy-compressed-2.JPG: 185 KB (2,000 px by 1463 px) 93.44% reduction
• lossy-compressed-3.JPG: 5 KB (2,000 px by 1463 px) 99.82% reduction

Let’s say you choose to go with the 50% compressed one. The file size is 227 KB, which is definitely a lot smaller than the original 2+ MB file. However, it’s still not great if this is only one of 15+ other images on a page. Generally, it is best to keep all of your images under 100 KB if possible. In my cases, you should be able to go much smaller. So this is where it is also important to resize your images. The 50% image resized first down to 1251 px by 916 px is only 95 KB.

But remember, you might not want to size your images down all the way, because as of WordPress 4.4, it now has support for responsive images (not scaled down by CSS). WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others. See example of what your code actually looks like below.

So with more and more HiDPI displays nowadays, it can be good to find a happy medium. Say 2x or 3x your website’s column or div size, but still less than the original size. The browser will show the correct one based on the resolution of the device.

Google Recommends Lossy Compression

Do you use Google PageSpeed Insights? If so, you’re probably familiar with the warning that says to “Optimize Images.” Back in 2017, Google actually updated their documentation to now recommend using lossy compression as a way to further speed up your site.

If you want to get rid of those warnings, one of the easiest ways is to use lossy compression to appease Google.

Lossless Compression