Image Optimization (WebP, AVIF)

Advanced Ecosystem 🟡 Mid

Definition

Conversion des images vers des formats modernes (WebP, AVIF) avec redimensionnement responsive. AVIF offre 50% de compression en plus que JPEG à qualité égale.

Analogie

Compresser une valise avec des sacs sous vide : même contenu, moitié de place.

Exemple de code

import sharp from 'sharp';
await sharp(inputBuffer)
  .resize(800, 600, { fit: 'inside' })
  .avif({ quality: 60 })
  .toFile('output.avif');
// Fallback chain: AVIF > WebP > JPEG

Cas d'usage

Réduire le poids des images de 60-80% pour améliorer le LCP et la bande passante.

Anti-pattern

Servir des images PNG/JPEG non compressées en taille originale sur mobile.

Termes lies

#performance#media