DEV Community

Cover image for Fast and Furious Images. Web Performance tuning tips.
Vladimír Macháček
Vladimír Macháček

Posted on

Fast and Furious Images. Web Performance tuning tips.

A list with a few tips for images loading optimization. For you now and for me, somewhere in the future, when I forget about it.

First some thematic tuning music 🤟.

And let's get started 🚀.


The easiest way to speed up images loading is to add a loading attribute to your images:

  • Images that don't have to be loaded immediatelly (not in a view, footer and etc.) should have loading="lazy"
  • Those that need's be loaded early (are in the view or an LCP image) should have loading="eager"

If an image is marked as an LCP element, it should not be lazyloaded.

When an image is lazyloaded, make shure to prepare the space for that image so it doesn't cause unnecessary layout shifts. You can set the width and height attribute or use the padding-top trick.


The importance attribute simply put says when the downloading process should start. This can especially improve the LCP images loading.


When an image have a decoding="async" attribute, the rendering process doesn't pause when such image is found but it continues and the image is decoded asynchronously.


When possible, use AVIF. Otherwise, at least webp. The compression is far better then for ordinary jpg.


When loading large images, try to load different sizes from mobile to desktop. The sizes should differ around 200px on width or height. You can use the picture element for it.


It's a good practise to preload images that should be loaded as soon as possible.
But don't use it for every image on the page.


When you load some large background image that needs to be loaded as fast as possible add a hidden image element with the path to the background. It increases the priority and the image is loaded faster.

Backgrounds that don't need to be loaded immediatelly should be lazyloaded. You can use the intersection observer to figure out if the element with background is visible and then add a state class like s-visible. In the css then add the following:

.image-background.s-loaded {
    Image will be loaded only 
    if the element has the s-loaded class 
Enter fullscreen mode Exit fullscreen mode


In case you have multiple small images (icons like images) that are used across the website, you can bundle them together using apps like Icomoon App. This will decrease the amount of request as well as the total size.
Icomoon App


If the first image in the head is your logo and it is an SVG image add it directly into the page. This way it doesn't slow down the loading.
However, there is also this way:

  1. Load it directly on the first request
  2. When the page is loaded add a link element through javascript for that image into the page, so it loads on the backrground and cached
  3. On another request load it through the img element.

Share your tips!

If you have any other tips for images loading optimization, please share them in the comments. I will be happy to learn about them and it will definitely help other web developers that seeks information about how to improve the web performance 🙂.

Stay in touch:
👉 @8machy

Top comments (0)