Image performance 101

We all know that images are really heavy, but do you know these tricks to reduce their size ?

1. Use images according to their size in your code !

I was surfing on the web, minding my own business, when I saw little thumbnails taking ages too load.
I've inspected them and oh, surprise !
Their dimension were 300x200 and the images used to fill these were 2100x1900.
Resize your image with figma/PS/whatever to avoid that.

2. Compress these little rascals

Image compression is one wonderfull thing, it will remove or assemble some part of the image, making it less heavy.
And this is done without really damaging the image !

Be carefull, there is two types of compression, one light, removing only metadatas and non important stuffs, and one strong, which is the best to improve performance but can be lossy.

They are a lot of websites that propose that kind of service, most of them are free.

3 Use Sprites and SVG's !

A Sprites file is a PNG or SVG image that contains a lot of small images, usually icons.
To use these icons you just need to navigate in that file, using "background-position", or "object-position" if you use the image tag.

That means that you don't impose tons of HTTP requests to your server, just one for the sprites, and then you'll use it as you wish for the icons.

And SVG's are vector graphics, usually used for icons or little drawing, they are so much faster to load and they have many advantages, like keeping their quality whatever the zoom.

4 Different images for different widths

This one can be tricky, it's the use of "srcset" and "sizes" attributes with an img tag.

It looks like that :

<img 
    srcset="
    tree-small.jpg 400w,
    tree-medium.jpg 700w,
    tree-big.jpg 1200w"
    sizes = "
    (max-width: 600px) 400px,
    (max-width: 900px) 700px,
    1200px"
    src="tree-big.jpg"
> 

Looks kind of weird, but it permits to display images based on the screen size.
The srcset is used to store the different images, with their width next to them (don't forget the "w" and not "px").

And we can put media queries with the sizes attribute, with a number next to it.
This number will tell the browser : display the image which has the closest width compared to my value !

After all don't forget the original "src" attribute, in case your browser does not support that.

And now if you load your website with a mobile device, it will load a small image, and not the large one.
If you do this with a lot of images on your website, your performance will surely look shiny.

5. LaZzzzy loading !

What if we could only load the visible part of our website ?
And only load the hidden images when the user will discover them, by scrolling for example ?

It's the purpose of lazy loading, we can use it natively with the loading attribute.

    <img src="ressources/tree.jpg" loading="lazy">

Unfortunately it's not very well supported by all browsers, but don't panic, they are others techniques.

You could use the intersectionObserver API, or one of the lazy loading libraires, like Lozad.js or Layzr.js.

That's it !
Indeed there are more ways to improve your websites speed, be always curious about this fondamental domain.

You can find me on YouTube, talking about web development(warning, it's in French!🥖🥐🍷 ).
I plan to start an English channel too, I just need few weeks to work on my bloody accent.

YT : https://www.youtube.com/c/TheWebSchool

Take care, and see you next time. ✒️