Image Optimization: 10 Do’s & Don’ts for a Better User Experience
As website owners and designers, we want to provide the best user experience to our clients. This often involves massive graphical design with an increasing amount of images on a site. According to HTTP archive, the number of images per page has doubled from 34 to 69 since 2012 until today and image payload has more than tripled itself. The implication of the data is fully visible – websites are indeed becoming more pleasant to the eye.
However, the quality of experience (QoE) has not necessarily improved. The reason is that our QoE is largely impacted by the time it takes a web page to load. While images contribute to the improved appearance of the site, they represent 60% of the average webpage’s payload – they also contribute largely to the increasing load times of webpages, which according to research has now hit an average of 11.4 seconds.
With that information, one would assume that website owners, who invest so much in graphical design and associated images, would provide the same investment in optimizing those images for faster download. However, this is not the case. According to Radware’s recent State of the Union: Page Speed and Web Performance Report, 56% of websites either don’t optimize images at all or do a poor job at it. The question to be asked here is what can be done or should be avoided when optimizing images for websites?
Things Not to Do When Optimizing Images
DON’T:
- Degrade the image quality too much.
What is too much? Quality degradation which is clearly visible to the human eye.
- Lower the resolution of the image.
With the increase of screen resolution, even in mobile devices, lower resolution images simply won’t cut it.
- Use improper file formats.
Using the wrong image file format can often create a larger image file size or unnecessarily degrade the quality of the image. For example, JPEG usually provides the smallest file size, but it does not support transparency.
- Use image file formats that are not supported by the browser.
WebP usually gives the best result (file size vs. quality, transparency, animation) – but it is not supported by all browsers.
- Use progressive JPEG.
According to a research, progressive JPEG provides the low resolution version of the image much faster, but results in negative user association and poorer emotional reaction compared to other image optimization techniques.
Things To Do When Optimizing Images
DO:
- Compress each image with the most suitable compression algorithm for its content.
If you use a lossy image compression algorithm, make sure the difference between the compressed image and the original is less than 2% – which is normally invisible to the human eye.
- Use the best compression format and image size per browser type requesting it.
This is tougher to do, as the CMS or web application needs to have this dynamic capability.
- Adjust resolution.
Use low resolution images for toolbar icons or for the page’s decorations (frames’ corners, etc.). Additionally, if the HTTP header indicates that the device requesting the page has a low resolution screen – no need to send high resolution images.
- Consolidate Images.
If the average page consists of 55 images, most probably, many of those images can be consolidated into fewer big images. This will reduce the number of round trip delays required to bring them and can result in a faster webpage download time.
- Automate! Automate! Automate!
Looking at all of the do’s and don’ts, it is easy to understand why many of the sites are not investing enough in image optimization. The amount of work required per image is simply too high and too complex to have it done 50 times over per page of the website. Investing in an automation tool that can perform all of the above and more can easily result in 50% load time reduction for many of the websites that have nice graphics.
Radware FastView is an example of an automation tool that optimizes images on the fly per browser, ensuring that not only each image is optimized, but it is optimized for each type of browser requesting it. This maximizes the acceleration value it can deliver, which is the whole point of image optimization, isn’t it?
