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 🚀.
Loading
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.
Importance
The importance attribute simply put says when the downloading process should start. This can especially improve the LCP images loading.
Decoding
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.
Formats
When possible, use AVIF. Otherwise, at least webp. The compression is far better then for ordinary jpg.
Sizes
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.
Preloads
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.
Backgrounds
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 */ } Icons
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.
SVG
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:
- Load it directly on the first request
- 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
- 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
👉 Stylify.dev
👉 dev.to/machy8
👉 medium.com/@8machy