Optimisation des assets

Les médias (images et vidéos) représentent souvent la plus grande part du poids d'une page. Leur optimisation est le gain rapide ("quick win") le plus efficace.

Images

Formats modernes

N'utilisez plus de JPEG ou PNG par défaut.

AVIF : Le plus performant (jusqu'à -50% vs JPEG).
WebP : Le standard actuel, supporté partout.
JPEG/PNG : Uniquement en fallback.

Images responsives (`srcset`)

Ne servez pas une image 4K sur un mobile. Utilisez l'attribut srcset pour laisser le navigateur choisir la meilleure image.

<img 
  src="image-800.jpg" 
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Description pertinente"
/>

Compression

Chaque image doit passer par un outil de compression avant d'être intégrée.

Outils manuels : Squoosh.app (par Google).
Outils CI/CD : Sharp, ImageMagick.

Vidéos

Essayez de ne pas utiliser de GIF.
Un GIF de quelques secondes peut peser plusieurs Méga-octets.
vous pouvez utiliser un SVG animé à la place si possible, les images vectorielles sont bien plus légères.

Le Remplaçant du GIF

Utilisez une balise <video> configurée pour se comporter comme un GIF, mais avec la performance du format vidéo (H.264 ou WebM).

<video autoplay loop muted playsinline>
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

On peut aussi charger la vidéo uniquement si l'utilisateur clique sur un bouton play.
Cela peut être pratique si vous chargez une video embed de youtube/dailymotion par exemple.