Image performance 101
Tags: performance, images, seo
Published: 2020-12-05 14:04:17

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 !
![Sprite file](https://dev-to-uploads.s3.amazonaws.com/i/w0bfhgoxpq3clybzxg2o.png)
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 :
```html
<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.

```html
    <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. ✒️