How to optimize images for web and performance

How to optimize images for web and performance

Jun 02, 2022 • 7 min read

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?

To speed up the initial load time for a fiction photo gallery page, we will compress every image from jpeg to webp and from jpeg to avif, as well as employ lazy loading for the offscreen images.

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:

Image 1. Performance measurements before compression to webp (using PageSpeed Insights tool)

WebPageTest

Image 2. Performance measurements before compresion to webp (using WebPageTest tool)

Let's convert all the images into webp and look at the results.

Here’s a demo of the optimized version.

Performance results:

Image 3. Performance measurements after compression to webp (using PageSpeed Insights tool)
Image 4. Performance measurements after compression to webp (using WebPageTest tool)

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:

Image 5. Performance measurements after compression to avif (using PageSpeed Insights tool)
Image 6. Performance measurements after compression to avif (using WebPageTest tool)

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:

Image 7. Performance measurements with lazy loading attribute (using PageSpeed Insights tool)
Image 8. Performance measurements with lazy loading attribute (using WebPageTest tool)

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:

Image 9. Performance measurements before converting gifs to videos (using PageSpeed Insights tool)
Image 10. Performance measurements before converting gifs to videos (using WebPageTest tool)

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:

Image 11. Performance measurements after converting gifs to videos (using PageSpeed Insights tool)
Image 12. Performance measurements after converting gifs to videos (using WebPageTest tool)

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:

Image 13. Performance measurements before image placeholder introduction (using PageSpeed Insights tool)
Image 14. Performance measurements before image placeholder introduction (using WebPageTest tool)

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:

Image 15. Performance measurements after image placeholder introduction (using PageSpeed Insights tool)
Image 16. Performance measurements after image placeholder introduction (using WebPageTest tool)

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:

Image 17. Performance measurements with 50 animated objects (using PageSpeed Insights tool)
Image 18. Performance measurements with 50 animated objects (using WebPageTest tool)

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:

Image 19. Performance measurements with 50 animated objects with 'transform' (using WebPageTest tool)
Image 20. Performance measurements with 50 animated objects with 'transform' (using WebPageTest tool)

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.

Subscribe to our latest Insights

Subscribe to our latest Insights