Images comprise up to 60%-65% of the bytes on most websites. Page size is a major factor in the total time it takes a browser to display a page. Page size is especially important for mobile devices, where smaller images save both bandwidth and battery life.
Lossy and lossless compressions are the two most common methods used to reduce the size of images. It is highly recommended to use 1 of these methods when using images on your website. In this article, we will take a closer look at the reasons why this is recommended and what the impact will be on the speed of your website.
Why should you compress images at all?
Images that are too large decrease the performance of your website, which can harm the experience of visitors and SEO rankings. It is therefore advisable to start resizing your images as soon as possible.
A study by Google shows that 45% of visitors are less likely to visit the same website if they are confronted with a bad experience such as a slow-loading website.
Lossy compression images
Lossy compression of images is a process that removes some of the data from your image. This reduces the file size. This process is irreversible, meaning that the data taken away is permanently deleted. This affects the quality, the more you remove from the image the more you lose quality.
This technique can significantly reduce the size of the original image, but you should always weigh up how much of the quality you want to sacrifice. In many cases you can indicate on a scale from 0 to 100 how much compression you want to use in a lossy manner. Although the image can become very small with large values, the image will also become pixelated (lower quality). Therefore, it is always good to have a backup file before you start lossy compression.
JPEG and GIF formats are the best-known formats suitable for lossy compression. JPEGs are suitable for images/photos with no transparent background, while GIFs are your best choice for animated/moving images. These are great options for a site that needs faster load times because you can adjust the size and quality if desired.
Lossless image compression
Unlike lossy compression, lossless compression will not reduce the quality of an image. That's because this method only removes additional, non-essential metadata. For example, the data is automatically generated by the device used to take the photo or by the software used to edit the image.
The downside of this is that you will often not see a significant reduction in file size, with the size sometimes remaining close to the original. As a result, this will generally be a lesser saving.
WebP file format
Finally, I would like to highlight WebP as a special form of lossless compression. The results we get with this file format mentioned by Google are very good. If you would llike to know about what WebP is and how you could benefit from it you might be interested in this article: What is WebP?
What is lossless image compression?
Lossless compression will not reduce the quality of an image. Lossless compression-only removes additional, non-essential metadata. This includes data automatically generated by the device used to take the picture or by the software used to edit the image.
What is lossy compression?
Lossy compression of images is a process that removes some of the data from your image. This can significantly reduce the file size. This process is irreversible, meaning that the data taken away is permanently deleted. This affects the quality, the more you remove from the image the more you lose quality but the smaller the image also becomes.
My name's Ton, co-owner at Afosto and holder of a master's degree in International Business and Management. At Afosto, I take the lead in driving our clients' entrepreneurial success. My extensive expertise in e-commerce and a deep-seated passion for business development are central to my approach in supporting retailers. Leveraging Afosto's advanced headless commerce platform, I provide inventive solutions that boost efficiency and foster business growth. I'm all about sharing knowledge – it's through this we achieve success together.
More from Ton Koop