Pourquoi optimiser les images ?

Trois raisons simples :

<aside> ⛔

Une seule image mal optimisée peut représenter 80–90 % du poids d’une page.

</aside>

Comment optimiser ?

La taille de l’image

Une erreur classique: une image de 4000 × 3000 px affichée en 400 × 300 px grâce à deux lignes de CSS.

Elle est trop grande et trop lourde!

Il est très important d’adapter la taille réelle de l’image à son affichage.

Image affichée à ~800 px max → image exportée à ~800–1200 px

Le poids de l’image (compression)

On peut toujours régler la compression de l’image depuis nos outils. Il est important de faire la démarche d’optimiser la compression pour gagner en poids!

<aside> ☝

Un outil pour optimiser rapidement le poids des images déjà exportées:

https://imageoptim.com/mac

</aside>

Les formats d'images

Les navigateurs sont capables d'interpréter de nombreux formats d'image et chacun possède ses avantages et inconvénients.

On peut séparer les images numériques en deux catégories: