When it comes to reducing the size of your images for the web there are different types of compression you can choose from. In today’s post we will look at lossy vs lossless compression and the advantages and disadvantages of both methods. There is no right or wrong method, it comes down to a decision of what you think might work best for your website and environment based on a number of different factors.
Lossy compression refers to compression in which some of the data from the original file (JPEG) is lost. The process is irreversible, once you convert to lossy, you can’t go back. And the more you compress it, the more degradation occurs. JPEGs and GIFs are both lossy image formats. By default WordPress uses a lossy compression rate of 90 percent to optimize JPEG images when creating preview images. You can change this using the filter jpeg_quality in your
One of the biggest obvious benefits to using lossy compression is that it results in a significantly reduced file size (smaller than lossless compression method), but it also means there is quality loss. Most tools, plugins, and software out there will let you choose the degree of compression you want to use. In our example below we took an image and applied different compression ratios to it. You can see there is a big decrease in the size of the images which is great. But you can also see the image degrade in quality as you apply higher ratios of compression.
If you look in the dark grey areas on the middle and far right images it is very noticeable where “compression artifacts” begin to occur. With lossy compression it is about finding a medium ground which you are happy with, for file size and still retaining an acceptable image quality. With 50% compression applied we decreased our image file size by 90%. With 80% compression applied we decreased our image file size by 95%.
Lossy Advantages and Disadvantages
- Advantages: Very small file sizes and lots of tools, plugins, and software support it.
- Disadvantages: Quality degrades with higher ratio of compression. Can’t get original back after compressing.
Lossless compression refers to compression in which the image is reduced without any quality loss. Usually this is done by removing unnecessary metadata from JPEG and PNG files. RAW, BMP, GIF, and PNG are all lossless image formats. It is important to note that since JPEGs are a lossy format that when using the “maximum” preset in Photoshop, this doesn’t mean it is lossless. However, even images exported from Photoshop using the “Save for Web” function can still see significant reductions.
The big benefit to lossless compression is that you can retain the quality of your image and still achieve a smaller file size. We took the same image again and ran it through our Optimus Image Optimizer plugin, which uses lossless compression. It also creates progressive JPEGs.
If you look in the dark grey areas this time you can see there is almost no noticeable difference. And we were still able to decrease our file size by 14%. So if you are looking to retain the quality of your images, lossless compression is definitely the way to go.
Lossless Advantages and Disadvantages
- Advantages: No loss of quality, slight decreases in image file sizes.
- Disadvantages: Larger files than if you were to use lossy compression.
WebP Lossless Compression
And of course we can’t forget about WebP. This is where combining Google’s WebP format along with lossless compression really is powerful! We took the same image again and ran it through our Optimus Image Optimizer plugin, which converts the image to WebP format, using lossless compression.
If you look in the dark grey areas again there is almost no noticeable difference. And this time we were able to decrease our file size by 79%. So if you are looking to retain the quality of your images and still achieve an impressive reduction in file size, you must give WebP a try! You can use our Optimus Image Optimizer plugin and WordPress Cache Enabler plugins to convert and deliver WebP images in WordPress. Read more about delivering WebP files.
WebP Advantages and Disadvantages
- Advantages: No loss of quality, large decreases in file size.
- Disadvantages: Less browser support, slightly larger file sizes than lossy.
Again when it comes to lossy vs lossless, there is no right or wrong choice. It comes down to what works best for your website and visitors. For example, if you run a photography website, lossless along with the WebP format might be a better way to go as you need your images to be crystal clear and still be reduced in file size. Or you could go the lossy route and use a smaller compression ratio.