Images are present on the vast majority of web pages and the reason is that they are crucial to user experience and SEO. Their use isn’t problem-free though. They are estimated to account for up to 60-65% of the total size of an average web page. Translated into simple terms, this means that pages could be 60% faster, if no images were used.
This post will guide you through the 3 elements of efficient image optimization.
In order to understand the issue, we’ll use some data. Take a look at the screenshot below.This is a part of a page speed analysis, performed using Pingdom. It shows the size of different content types relative to each other, as well as the number of requests necessary to fetch them. With their 1.53MB and 24 requests, images are by far the most problematic content type on the page.
It is therefore very important to optimize images as much as possible. Unfortunately, this means that you cannot just install a plugin and hope that it will do the job.
The 3 Elements of Image Optimization
The standards for image optimization change in accordance with the development of new image formats and compressors. In order to conform to current best practice, there are three elements you must consider:
- Serve scaled images. When uploading images to your site, it is important to resize them to fit the actual spot they are supposed to fill. For example, if you want to have a 200x200px image displayed on a page, this is the exact size the image should have on upload. The reason is that uploading bigger images and then using a smaller size to serve on a page, results in additional KB or MB, depending on the image.
- Optimize images to reduce their size. There are different optimization techniques and options to choose from. Most deliver decent results, even though page performance tests often detect that image size could have been reduced even further. Remember to optimize all images and thumbnails on your site.
- Use WebP. WebP is a (relatively) new image format, developed by Google and released as open source. Compressing images with WebP can reduce their size with around 50% more than PNG compression. WebP is still not supported on all browsers but its use is recommended just the same. It is expected that WebP will grow tremendously in importance in the years to come, partially because it is Google, who’s behind it, and partially because it can be the key to faster page loading.
Basics of Image Optimization
Images can be optimized by changing their quality settings, using the right image formats, and applying compression. This makes image files much smaller and allows users to save a lot of disc space and bandwidth. It helps also speed up web pages dramatically.
There are two basic types of image compression: lossy and lossless. Some image formats allow for lossy compression, others for lossless, and a third group – for both. Lossy formats, such as JPEG or WebP, allow you to tweak quality settings and filter out some of the data from the original file, making the output much smaller. By applying lossy compression to a JPEG file, the size of the file can be reduced with up to 80%. Lossy compression results normally in almost unnoticeable deterioration of image quality but due to the fact that some images are more sensitive to it, the quality can sometimes decrease significantly.
Lossless compression is a process, where no data is removed from the original image. This means that the process is reversible and the original and decompressed image are identical. Images optimized using lossless compression are comparable in quality to the original but around 30% smaller.
Until now, most webmasters were convinced that it is best practice to use lossless compression as a way to deliver superior user experience. However, the fact is that Google advices to choose JPEG (lossy) format for images, where fine details aren’t of crucial importance, when viewing them on highest resolution screens. The reason is that, in many cases, the eye doesn’t even detect that an image has been optimized using lossy formats, making fine details or 1000+ of color nuances in an image unnecessary. For images with many details, you should still choose PNG (lossless) format and decide, which color depth will deliver the desired output, without affecting page speed too much.
The Process of Image Optimization
When beginning the process of image optimization, you should review the settings of images. Resize them to make them fit the spot on the page. While you should be careful to not end up serving images with low quality on high resolution screens, serving large images improves user experience only up to a certain level. Thereafter, every additional pixel is unnecessary and hurts user experience by slowing down web pages.
Next, you should consider to reduce the bit-depth of your images, meaning that the number of colors used is reduced. Given that an average image contains 2000+ colors, in most cases cutting them down to 1000 or 500 wouldn’t be very noticeable for site users, due to the way the eye works. This can, in the same time, reduce the file size with up to 50%.
The last step in the process of image optimization is compression.
Google advices to start optimizing an image using a lossy format, such as JPEG, to remove all unnecessary data and details and then to continue with lossless compression using a format as PNG or WebP. This way, you can be sure than an image is as optimized as at all possible.
WebP is a modern image format, allowing for lossy and lossless compression, and delivering 26-34% smaller images than comparable PNGs and JPEGs. Because WebP supports transparency, it is ideal for use on the web.
Lossy WebP uses predictive coding to encode the image, meaning that it uses the values, found in neighboring blocks of pixels and the difference between their values to predict the value in the next block of pixels.
Lossless WebP uses already analyzed image fragments to reconstruct new ones or uses a local palette, when no significant match is found.
WebP is only natively supported by Chrome and Opera, meaning that webmasters still need to serve other image formats to other browsers.
The implementation of WebP is made complicated by the fact that most image optimization tools and plugins still don’t offer support for WebP and the same applies to caching plugins.
Nonetheless, you can implement WebP easily by replacing the default IMG tag, used to insert images on web pages, with the PICTURE tag, allowing you to list a number of different resources and include conditions that should apply in order for certain resource to be fetched. It is indeed important to use rules and specify fallback images, when using WebP, because, as mentioned above, the majority of browsers still don’t support it.
Here’s an example of the PICTURE tag, used to deliver WebP, with a single JPG variation as a fallback:
In order to manually implement this solution, you have to replace each of the available IMG tags on your pages with PICTURE tags, including a WebP and fallback variations. This is the most straightforward WebP implementation option.
It can, however, in some cases cause design issues, when the styling of images relies on positional queries. In such cases, you can still leverage the benefits of using WebP by manually adding WebP variations of images to your media folders and inserting the following piece of code by Vincent Orback into the .htaccess file on the server:
Be though aware that this solution should only be used, if the implementation of PICTURE tag causes errors on your pages.
Check Results of Image Optimization
Whenever you optimize something on your site, it is a must to check, whether it in fact works. To check the level of image optimization you have achieved, perform a site audit with a tool as Google PageSpeed Insights. This tool will make you aware of possible further optimization oppportunities and will give you an idea about, how image optimization has helped the overall performance of your pages.