How to optimize images for web and performance
Guide on web pages media (images, GIF, animations) optimization. Image optimization techniques & examples (compression, lazy loading).
Why is image optimization important?
Our brains interpret images much faster than text, which is why high-quality visuals drive conversions and user engagement. To be effective, all images on the web page need to be carefully orchestrated to appear on the screen fast — but as it turns out, loading images efficiently at scale isn’t a project for a quiet afternoon. So in this article we will try to describe the problem of web applications performance and reveal a solution of the web pages media assets optimization.
It’s not a stretch to say every user loves a web page to be snappy and responsive to any interaction, so we’re going to research several simple (yet powerful) strategies for improving the page load performance by optimizing images and animations.
Each section is accompanied by a demo and respective links with performance measurements results from the tools listed below:
Note: web page performance results may vary depending on your location.
At the end of the article we’ll also have a little bonus outlining one powerful strategy you can employ right away to improve your animations and squeeze every fps to deliver a sleek user experience.
What image compression works best?
WebP image compression example
WebP is widely supported and may be used for rendering regular images where advanced features like wide color gamut or text overlays are not required. Google created the WebP format in 2011 as an image format that would help to make the web faster. Over the years, it has been accepted and adopted widely because of its ability to compress images to lower file sizes compared to JPEG and PNG. WebP offers both lossless and lossy compression at an acceptable visual quality and supports alpha-channel transparency and animation. Webp is supported by Chrome, Edge, Firefox, Opera and Safari (starting from macOS 11 Big Sur).
Here’s the demo of the unoptimized version.
Performance results:
Let's convert all the images into webp and look at the results.
Except lighthouse performance score improvements, we also:
- got almost twice the speed index improvement
- shrinked the total bytes size by five times
Avif image compression example
AVIF is a solid first choice if lossy, low-fidelity compression is acceptable and saving bandwidth is the number one priority. It provides even better compression compared to jpeg and webp. The only drawback - it’s not yet supported by IE, Edge and Safari.
Here’s a demo of images rendering in avif format.
Performance results:
Compared to the webp demo we’ve gotten:
- even better lighthouse performance score
- 1% speed index improvement
- shrinked the total bytes size by 14%
Native Loading lazy attribute
The avif demo showed an impressive improvement, but can we do even better?
Since our gallery page likely has more images than could be accommodated by a viewport, we can defer loading the offscreen images to reduce the critical rendering path and load them after a user interaction (for example, scrolling). That could be achieved by using 'loading=lazy' on an image. The majority of modern browsers support native lazy loading for images.
Here’s a demo of images rendered with 'loading' attribute.
Performance results:
Compared to the avif demo, we got a better lighthouse score and slightly better results for:
- TTFB (time to first byte)
- speed index
GIF optimization: Converting to videos
Sometimes there is a heavy gif picture (or a set of them) on the page that leads to an enormous payload delivered to a browser. One way we may tackle this is to improve gif by converting it into video.
Here’s a demo page with a set of heavy gif pictures on it.
Performance results:
Now let's convert all the gif pictures on the page into video and check the results.
Here’s a demo where all gifs are converted to videos.
Performance results:
With that we’ve been able to:
- improve lighthouse performance score
- improve LCP (largest contentful paint)
- slightly improve speed index
- save 90% of the total bytes size
Image placeholders usage
Sometimes we don’t have enough time, resources or sufficient access to a project to convert a set of images into a different format, however, we can show a set of placeholders while the actual images are still being downloaded by a browser. Blurhash is one of the ways we can approach generating placeholders.
Here’s a demo page with a set of jpeg images on it.
Performance results:
Let's generate a set of placeholders for all the images on that page and replace each of them when a respective image has been fully loaded.
Here’s a demo with blurhash placeholders.
Performance results:
With that we’ve been able to:
- improve lighthouse performance score
- substantially improve speed index and LCP
HTML animations performance optimization
As promised at the beginning of the article, here’s a bonus tip on optimizing web page animations. Sometimes a page has them popping up right off the bat. It may easily present a performance challenge in case an animation triggers a lot of style recalculations and layout changes. The situation gets worse when the number of animated objects increases.
Let's take a look at a demo with 50 objects animated suboptimally.
Performance results:
If we take a look at the source code, we can see the culprit of an unoptimized animation is in the usage of 'left' and 'top' properties. We can do better by replacing it with 'transform: translate', which doesn’t trigger any geometry changes or painting.
Here’s a demo with optimized animations.
Performance results:
With that we’ve been able to:
- improve lighthouse performance score
- improve CLS (cumulative layout shift)
- slightly improve LCP
Conclusions
Tackling web page performance issues is a hefty task, but if you split a problem into granular constituent parts and focus on addressing one issue at a time (for example, an initial load performance, or runtime performance, or optimizing a customer user journey, etc) while measuring results before and after making changes, the performance optimization might become a fascinating journey. This article highlighted the optimization strategies one can pick up right away for optimizing a web page images and animations.