Le pipeline complet d'optimisation d'images
Des originaux surdimensionnés aux assets prêts pour le web — un workflow étape par étape qui fait vraiment économiser de la bande passante.
Le designer vous remet un PNG 4000x3000 tout droit sorti de Photoshop. 8 Mo. Votre page web a besoin de 800px de large, moins de 100 Ko, et idéalement en format WebP.
L'écart entre "ce qu'on a" et "ce dont le web a besoin" — c'est là que la plupart des développeurs perdent du temps. Réglons ça avec un pipeline correct.
Étape 1 : Redimensionner aux dimensions cibles
La plus grande réduction de taille vient du redimensionnement. Une image de 4000px affichée à 800px gaspille 96% de ses pixels. Ce n'est pas une exagération — ce sont des maths.
Pour les écrans Retina, utilisez 2x la taille d'affichage. Si l'image s'affiche à 400px, redimensionnez à 800px. Pas 4000px.
Économie typique : 4000x3000 (8 Mo) → 800x600 (400 Ko). 95% de réduction rien qu'avec le redimensionnement.
Étape 2 : Compresser sans perte de qualité visible
Après le redimensionnement, on compresse. Pour les photos, une qualité JPEG entre 75-85% est le point idéal — visuellement identique à l'original, fichier nettement plus petit.
L'astuce est de trouver le seuil où les artefacts de compression deviennent visibles. Pour la plupart des photos, c'est autour de 70%. Au-dessus, personne ne voit la différence sans zoomer.
Économie typique : 400 Ko → 120 Ko à 80% de qualité. Les yeux des utilisateurs ne remarquent rien. Leurs temps de chargement, si.
Étape 3 : Convertir dans des formats modernes
JPEG et PNG existent depuis toujours. WebP offre des fichiers 25-35% plus petits à qualité égale. AVIF va encore plus loin.
L'approche pratique :
- Photos : Convertir en WebP (support large) ou AVIF (meilleure compression)
- Captures d'écran/graphiques : WebP ou PNG selon les besoins de transparence
- Icônes/logos : Garder en SVG quand c'est possible
Utiliser des éléments <picture> pour servir du WebP avec fallback JPEG. Le support navigateur pour WebP dépasse 97%, mais les fallbacks ne coûtent rien.
Étape 4 : Optimiser les SVG
Les fichiers SVG des outils de design traînent beaucoup de bagages — métadonnées d'éditeur, précision décimale inutile, groupes redondants, éléments invisibles. Un SVG typique d'Illustrator contient 30-50% de superflu.
Les passer dans un optimiseur SVG et regarder les tailles fondre. Une icône de 15 Ko devient 5 Ko. Multipliez par 20 icônes sur votre page et vous économisez 200 Ko de markup.
Étape 5 : Base64 pour les tout petits assets
Pour les images très petites (moins de 2 Ko) — icônes, puces, petits éléments décoratifs — convertir en Base64 et intégrer en inline élimine complètement une requête HTTP.
Une requête en moins > un fichier HTML légèrement plus gros. Mais seulement pour les petites images. Une chaîne Base64 de 50 Ko dans votre CSS est pire qu'une requête séparée.
Règle de base : moins de 2 Ko ? Base64. Plus de 2 Ko ? Fichier séparé.
Vrais chiffres : une étude de cas
Point de départ : 12 images produit sur une page catégorie.
| Étape | Taille totale | Économie | |-------|---------------|----------| | PNG originaux | 45 Mo | — | | Après redimensionnement (800px) | 2,1 Mo | 95,3% | | Après compression (80%) | 680 Ko | 98,5% | | Après conversion WebP | 450 Ko | 99,0% |
De 45 Mo à 450 Ko. Même qualité visuelle. La page se charge en 1,2 seconde au lieu de 12.
Le pipeline en pratique
Pour un lot d'images, le workflow devient mécanique :
- Redimensionner — aux dimensions cibles
- Compresser — avec les bons réglages de qualité
- Convertir — en WebP/AVIF
- Optimiser — les assets SVG
- Encoder en Base64 — les petites icônes
Après l'avoir fait trois fois, ça prend cinq minutes pour toutes les images d'une page.
N'oubliez pas : le chargement différé
L'optimisation ne s'arrête pas à la taille des fichiers. Ajoutez loading="lazy" aux images sous la ligne de flottaison. Le navigateur ne les téléchargera pas tant que l'utilisateur ne scrolle pas à proximité. Performance gratuite.
L'optimisation d'images n'est pas glamour. Personne n'écrit de billets enthousiastes sur la compression JPEG. Mais c'est l'amélioration de performance avec le plus grand impact pour la plupart des sites. Des images plus petites signifient des pages plus rapides, des utilisateurs plus satisfaits et des coûts de bande passante réduits. Passez chaque image dans le pipeline avant de la mettre en production.