Compresser les images d'un site web pour accélérer vos pages

Pourquoi le poids des images compte

Une photo sortie directement d'un téléphone peut peser plusieurs mégaoctets. Si vous la placez dans un article, un visiteur connecté en mobile doit la télécharger en entier, même si elle n'est affichée que sur quelques centaines de pixels de large. Le résultat : une page lente, davantage de visiteurs qui partent et des données mobiles gaspillées.

La vitesse est aussi liée aux Core Web Vitals utilisés par Google. L'un d'eux est le LCP (Largest Contentful Paint), qui mesure la rapidité d'apparition du plus grand élément visible. Très souvent, cet élément est l'image principale : son poids influe donc directement sur le score. Google considère qu'un bon LCP est de 2,5 secondes ou moins.

Choisir un format : WebP ou JPG

Le JPG convient aux photographies et fonctionne partout. Le WebP produit généralement un fichier plus léger à qualité visuelle comparable, souvent d'un quart ou plus, et tous les grands navigateurs le prennent désormais en charge. Pour les nouveaux sites, le WebP est normalement un bon choix par défaut.

Le PNG convient aux captures d'écran, aux logos et aux graphismes aux contours nets ou transparents. Les photos enregistrées en PNG deviennent exceptionnellement lourdes : convertissez-les plutôt en JPG ou en WebP. Les fichiers HEIC des téléphones doivent aussi être convertis avant d'être mis en ligne sur un site web.

Régler la qualité

Pour les formats avec perte (JPG, WebP), une qualité d'environ 75 à 85 sur l'échelle de 0 à 100 suffit généralement pour des photos. En dessous d'environ 70, on commence à voir des zones en blocs et du bruit autour des contours, tandis qu'au-dessus de 90, le fichier grossit fortement pour une différence que l'œil perçoit à peine.

La meilleure méthode est d'essayer : exportez quelques versions et comparez-les à l'écran à la taille à laquelle elles seront réellement affichées. Les images avec de grandes zones unies ou du texte fin laissent apparaître plus vite les artefacts de compression et peuvent nécessiter un réglage plus élevé.

Redimensionner à la taille d'affichage

Compresser sans redimensionner, c'est ne faire que la moitié du travail. Si une image est affichée sur 800 px de large, il est inutile de servir un fichier de 4 000 px. Réduire une grande photo de 4 000 à 1 600 px de large divise le poids du fichier plusieurs fois, car le nombre de pixels diminue avec le carré de la largeur.

Pour que les images restent nettes sur les écrans haute densité, préparez une version d'environ deux fois la largeur affichée. Pour un emplacement de 800 px, un fichier de 1 600 px suffit généralement.

Images adaptatives et chargement

L'attribut srcset permet au navigateur de choisir un fichier de taille adaptée à l'écran. Exemple :

<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="Description" loading="lazy">

L'attribut loading="lazy" indique au navigateur de ne récupérer l'image que lorsque le visiteur fait défiler la page à proximité ; utilisez-le donc pour les images situées sous le premier écran. Ne différez pas le chargement de l'image principale visible en haut de page, car cela peut dégrader le LCP.

Les attributs width et height permettent au navigateur de réserver l'espace à l'avance, afin que la page ne saute pas pendant le chargement. Cela améliore l'indicateur CLS (Cumulative Layout Shift).

Une liste de contrôle avant publication

• Image redimensionnée à la largeur à laquelle elle est réellement affichée (pas plus d'environ le double).
• Format choisi : WebP ou JPG pour les photos, PNG ou WebP pour les graphismes avec transparence.
• Qualité autour de 75 à 85, vérifiée visuellement à l'écran.
• Attributs width et height renseignés.
• Les images situées sous le premier écran utilisent loading="lazy".
• Noms de fichiers descriptifs (par exemple kaunas-old-town.webp) et texte alternatif pertinent.
• Poids réel des fichiers téléchargés vérifié dans les outils de développement du navigateur (onglet Réseau).

Comment mesurer le résultat

Avant d'optimiser, notez le poids de la page. Dans les outils de développement du navigateur (F12, onglet Réseau, filtre Img), vous pouvez voir la taille de chaque image et leur total. Après l'optimisation, refaites la mesure avec le cache désactivé (Désactiver le cache) pour que la comparaison soit équitable.

Exemple : un article contient cinq photos de 3 Mo chacune, soit environ 15 Mo au total. Si vous réduisez chacune à 1 600 px de large et que vous l'enregistrez en WebP avec une qualité de 80, chacune pèse souvent environ 100 à 250 Ko, et l'ensemble moins de 1,5 Mo. Le chiffre exact dépend du contenu de la photo : mesurez donc toujours vous-même.

Erreurs courantes

• Redimensionner uniquement avec le CSS : si vous téléversez un fichier de 4 000 px et l'affichez sur 400 px de large, le navigateur télécharge quand même tout le fichier.
• Recompressions répétées : chaque réenregistrement d'un JPG ajoute des pertes. Exportez toujours à partir de l'original.
• Utiliser le PNG pour des photos : le fichier peut être plusieurs fois plus lourd qu'un JPG ou qu'un WebP.
• Différer le chargement de la première image : l'image principale en haut de page doit se charger immédiatement.
• Texte alternatif manquant : il est important pour l'accessibilité et aide les moteurs de recherche à comprendre l'image.