Avant le lancement d'un site web, la compression des images est une étape clé pour améliorer la vitesse de chargement et l'expérience utilisateur. Des images non compressées peuvent entraîner des ralentissements, augmenter le taux de rebond et même nuire à l'évaluation de votre site par les moteurs de recherche. Cette liste de contrôle récapitule les points essentiels à vérifier pour garantir que chaque image soit "légère" avant la mise en ligne.
1. Vérifier le format des images
Différents formats d'image conviennent à différents usages. En général, utilisez JPEG pour les photos et les dégradés complexes, PNG-8 ou SVG pour les icônes, logos et graphiques simples, et envisagez WebP pour les animations ou les fonds transparents avec une taille de fichier réduite. Évitez les formats non compressés comme BMP ou TIFF. Liste de contrôle :
- Les photos ont-elles été converties en JPEG ou WebP ?
- Les icônes et éléments décoratifs utilisent-ils le format SVG (Scalable Vector Graphics) ?
- La profondeur de couleur des images PNG a-t-elle été vérifiée (8 bits / 24 bits) ?
- Avez-vous envisagé d'utiliser le format WebP (pris en charge par les navigateurs modernes) ?
2. Contrôler les dimensions d'origine des images
Les dimensions des images téléchargées doivent correspondre à leur taille d'affichage réelle, sans dépendre d'un redimensionnement via HTML ou CSS. Par exemple, si la zone d'affichage a une largeur de 800 px, il est inutile de télécharger une image de 4000 px de large. Liste de contrôle :
- La largeur maximale de chaque image ne dépasse-t-elle pas la largeur du conteneur de mise en page ?
- La hauteur de l'image est-elle adaptative ou fixe, pour éviter toute distorsion ?
- Utilisez-vous des images responsives (attribut srcset) pour fournir des tailles adaptées aux différents appareils ?
3. Choisir les bons outils de compression
Les outils de compression se divisent en deux catégories : avec perte et sans perte. La compression avec perte (comme TinyPNG) réduit considérablement la taille du fichier avec une différence visuelle quasi imperceptible ; la compression sans perte (comme ImageOptim) préserve la qualité mais offre un taux de compression plus faible. Il est recommandé de commencer par une compression avec perte à 75-85 % de qualité, puis de passer à une autre méthode si le résultat n'est pas satisfaisant. Outils courants :
- Outils en ligne : TinyPNG, Compressor.io, Squoosh
- Logiciels locaux : ImageOptim, RIOT, "Enregistrer pour le Web" dans Photoshop
- Outils de build : imagemin (avec Webpack, etc.)
4. Équilibrer qualité d'image et taille de fichier
Une compression excessive peut entraîner des crénelures, des blocs de couleur ou un flou, nuisant à l'image de marque. Après compression, comparez l'image originale et l'image compressée en prévisualisation, en vérifiant particulièrement les zones de texte, les bords et les dégradés. En général, réglez la qualité JPEG entre 70 % et 85 %, la qualité WebP autour de 80 %, et limitez les PNG-8 à 256 couleurs. Liste de contrôle :
- Les images clés (comme les photos principales de produits) ont-elles été vérifiées individuellement pour la qualité ?
- La taille du fichier après compression est-elle dans une plage raisonnable (généralement moins de 200 Ko, et encore moins pour les images décoratives) ?
- Y a-t-il des artefacts de compression visibles ?
5. Traitement par lots et conventions de nommage
Si votre site comporte de nombreuses images, ne les compressez pas une par une manuellement. Utilisez des fonctions de traitement par lots ou des scripts automatisés. De plus, les noms de fichiers doivent contenir des mots-clés descriptifs (par exemple "blue-tshirt-front.jpg") plutôt que "IMG_001.jpg". Cela aide les moteurs de recherche à comprendre le contenu de l'image. Liste de contrôle :
- Utilisez-vous la compression par lots (comme TinyPNG pour télécharger plusieurs images à la fois) ?
- Les noms de fichiers sont-ils normalisés (minuscules, séparés par des traits d'union, avec des mots-clés) ?
- Des images alternatives de différentes résolutions (pour les écrans Retina) ont-elles été générées ?
6. Vérifier la vitesse de chargement après compression
Une fois la compression terminée, testez le chargement des images dans un environnement de test à l'aide d'outils tels que Google PageSpeed Insights ou GTmetrix. Portez une attention particulière aux recommandations comme "Éviter les images non compressées" et "Utiliser des formats d'image appropriés". Liste de contrôle :
- Le chargement des images représente-t-il une part trop élevée de la taille totale de la page ?
- Y a-t-il des images qui n'utilisent pas le chargement différé (lazy loading) ?
- Les dimensions des images pour les appareils mobiles sont-elles adaptées ?
Rappel : La compression des images est un processus itératif. Ne sacrifiez pas la qualité pour une taille extrêmement réduite. Après le lancement, vérifiez régulièrement et recompressez les images trop lourdes si nécessaire. En suivant cette liste de contrôle, votre site accueillera ses visiteurs plus rapidement.
