Image Optimization
Optimisation d'image (Performance Web)
Le processus de réduction de la taille des fichiers image au minimum possible sans perte de qualité visuelle perceptible, essentiel pour le chargement rapide des pages Web, les Core Web Vitals et l'expérience utilisateur.
Détail technique
Un pipeline d'optimisation comprend : choix du format (AVIF > WebP > JPEG pour les photos ; SVG > PNG pour les graphiques), réglage du niveau de qualité (JPEG 75-85 est généralement optimal ; AVIF CRF 30-36), suppression des métadonnées inutiles (EXIF, ICC dans les contextes Web), images réactives (srcset, sizes, balise picture), chargement différé (loading="lazy"), dimensionnement correct (ne pas servir une image 4000px pour un conteneur 400px) et utilisation d'un CDN avec conversion de format automatique. L'objectif est un LCP < 2,5s (métrique Core Web Vitals).
Exemple
```javascript
// Image compression via Canvas
canvas.toBlob(
blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
'image/jpeg',
0.8 // quality: 0.0 (smallest) to 1.0 (best)
);
// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```