Comment alléger les images de votre site sans perdre en qualité

Une photo sortie du téléphone mesure environ 4 000 pixels de large, alors qu'une colonne de blog l'affiche à environ 800, soit 1 600 pixels réels sur un écran haute densité de téléphone ou d'ordinateur portable. La servir en taille réelle gaspille l'essentiel du téléchargement, et aucun format ne compense cela.

Les outils de compression JPG, PNG et WebP peuvent limiter la taille pour vous : le niveau Équilibrée ramène le plus grand côté à 2 560 pixels au maximum, le niveau Forte à 1 600, et aucun n'agrandit jamais une image plus petite. Forte convient à presque toutes les images d'un article ; Équilibrée aux photos qui occupent un grand écran.

Nous sommes partis de 17 photographies d'environ 12 mégapixels enregistrées en JPG de haute qualité, 1,5 Mo en moyenne, passées dans les outils de ce site. La seule conversion en WebP les a réduites de moitié. Le redimensionnement a fait bien plus. Redimensionner puis convertir en WebP a ramené la photo moyenne à 56 Ko, 96 % de moins qu'au départ.

Quand vous convertissez en WebP un JPG déjà compressé sans choisir de qualité, le WebP garde le niveau de qualité de ce JPG, et c'est ce qui l'a rendu 38 à 47 % plus léger dans notre test. Choisir Haute (85) à ce moment-là demande plus de qualité que le JPG compressé n'en a encore : les JPG du niveau Forte convertis en qualité Haute sont sortis un peu plus lourds que les JPG eux-mêmes, 100 Ko en moyenne au lieu de 91. Ne choisissez Haute (85) ou Maximale (95) que lorsque vous partez de la photo d'origine en pleine qualité.

Conservez les photos d'origine comme copies de référence. Vous pourrez toujours produire de nouvelles versions pour le web à une autre taille ou qualité, mais pas récupérer le détail d'une copie trop compressée. Puis vérifiez le résultat là où vos visiteurs le voient, sur un téléphone : si c'est beau là, c'est suffisant.

Deux petits ajouts dans la page font charger les images légères encore mieux. Indiquez dans le HTML la largeur et la hauteur de chaque image, pour que la page ne saute pas pendant le chargement. Et ajoutez loading="lazy" aux images situées plus bas, pour que le navigateur ne les télécharge que lorsque le visiteur s'en approche. Tous les navigateurs actuels gèrent les deux.

Les 17 photos sont les photographies Unsplash fournies avec Edubuntu, ramenées à 4 032 pixels sur le grand côté quand elles étaient plus grandes et enregistrées en JPG à la qualité 92. Chaque étape a utilisé les outils de ce site avec les réglages indiqués, via le même code et la même version d'ImageMagick que sur nos serveurs. Les photos très détaillées se réduisent moins que les photos calmes : vos gains varieront autour de ces moyennes.