1. Servez les bonnes dimensions
Ne téléversez pas une image bien plus grande que l'espace qu'elle occupe. Une photo de téléphone peut faire 4000 pixels de large, mais si votre mise en page l'affiche dans une colonne de 800 pixels, le navigateur télécharge quand même chaque pixel en trop, puis en jette la plupart.
Redimensionnez d'abord, puis compressez. Pour une mise en page qui affiche une image à 800 pixels de large, il est souvent judicieux d'exporter autour de 1600 pixels de large pour qu'elle reste nette sur les écrans haute densité, mais rarement plus.
2. Choisissez un format efficace
Utilisez le WebP ou le JPG pour les photos, et le PNG ou le WebP pour les graphismes avec transparence. Utilisez le SVG pour les logos et icônes simples, car il s'adapte à toutes les tailles à partir d'un petit fichier.
Les fichiers WebP sont souvent nettement plus petits que le JPG ou le PNG à qualité visuelle comparable, et les navigateurs actuels le prennent généralement en charge. Il vaut mieux réserver le PNG aux graphismes nets, aux captures d'écran et aux images qui exigent des couleurs exactes.
3. Compressez
Utilisez une qualité d'environ 75 à 85 pour cent pour les photos. Comparez le résultat avec l'original en taille réelle pour confirmer qu'il reste beau, en portant attention aux dégradés lisses, aux ciels et aux teintes de peau, où les artefacts apparaissent en premier.
Une qualité plus basse fait gagner plus de place, mais il y a un seuil au-delà duquel des blocs apparaissent. Arrêtez-vous juste avant de pouvoir les voir. En cas de doute, choisissez la qualité la plus élevée pour l'image principale et une plus basse pour les petites vignettes, où les défauts se remarquent moins.
4. Ne chargez que le nécessaire et réservez l'espace
Ajoutez l'attribut loading="lazy" aux images situées sous la ligne de flottaison pour qu'elles se chargent quand le visiteur fait défiler la page à proximité. Ne chargez pas en différé l'image principale en haut de la page, car cela retarderait le contenu le plus visible.
Donnez à chaque image des attributs width et height pour que le navigateur puisse réserver l'espace avant l'arrivée du fichier. Cela évite que la page ne saute pendant le chargement des images, ce qui est agaçant quand quelqu'un essaie de lire ou de toucher un bouton. Ces mêmes attributs aident aussi le navigateur à déterminer les bonnes proportions lorsque le CSS rend l'image fluide.
Un exemple concret (à titre d'illustration)
Imaginez un article de blog avec une photo d'en-tête sortie directement d'un appareil photo : 4000 par 3000 pixels, un JPG de plusieurs mégaoctets. La page l'affiche à 900 pixels de large.
La redimensionner à 1800 pixels de large réduirait généralement le fichier à une petite fraction de sa taille. La compresser à environ 80 pour cent et la convertir en WebP la réduit souvent encore davantage. Le résultat peut peser quelques centaines de kilo-octets au lieu de plusieurs mégaoctets, sans différence visible à la taille d'affichage. Les chiffres exacts varient d'une photo à l'autre : vérifiez donc toujours votre propre fichier.
Marche à suivre étape par étape
- Trouvez la plus grande taille d'affichage de l'image sur votre page.
- Redimensionnez l'original à environ le double de cette largeur, ou à la largeur affichée seulement pour les petits écrans.
- Convertissez en WebP ou en JPG, et compressez à environ 75 à 85 pour cent.
- Comparez avec l'original et ne baissez la qualité que tant que le rendu reste identique.
- Ajoutez width, height et, sous la ligne de flottaison, loading="lazy" dans votre page.
- Rechargez la page et vérifiez que rien n'est flou ni ne se déplace.
Testez vos pages avec un outil comme PageSpeed Insights avant et après, et regardez d'abord la plus grande image de la page. De petites modifications sur cette seule image font souvent la plus grande différence.
Erreurs courantes
- Compresser encore et encore un JPG déjà fortement compressé, ce qui ajoute des dégâts visibles à chaque fois. Partez toujours de l'original.
- Charger en différé toutes les images, y compris celle du haut.
- Utiliser le PNG pour des photos, ce qui crée généralement de très gros fichiers.
- Réduire les images uniquement avec le CSS, si bien que le navigateur télécharge quand même le fichier complet.
- Omettre width et height, ce qui provoque des sauts de mise en page.
Liste de contrôle rapide
- Bonnes dimensions pour la mise en page
- WebP ou JPG pour les photos, SVG pour les logos simples
- Qualité d'environ 75 à 85 pour cent, vérifiée à l'œil
- Chargement différé uniquement sous la ligne de flottaison
- width et height définis sur chaque image
- Pages testées avant et après
Le faire avec DoneImg dans votre navigateur
Ouvrez l'outil de redimensionnement, définissez la largeur voulue et téléchargez le résultat. Ouvrez ensuite la compression, choisissez le WebP ou le JPG et ajustez le curseur de qualité en surveillant le poids du fichier. Si vous avez besoin d'un autre format, les outils de conversion gèrent le JPG, le PNG et le WebP.
Tout s'exécute dans votre navigateur : vos images sont donc traitées sur votre propre appareil et rien n'est envoyé à un serveur. C'est un moyen sûr de préparer des photos de produits non publiées ou des images de clients. Vous pouvez répéter les mêmes étapes pour chaque image d'une page, et garder les originaux dans un dossier séparé au cas où vous auriez besoin de les exporter à nouveau à une autre taille.