Compresser les images d’un site sans perte de qualité

Les images sont généralement la partie la plus lourde d'une page web. Une seule photo non optimisée, tout droit sortie d'un téléphone ou d'un appareil photo, peut peser plusieurs mégaoctets, soit plus que tout le HTML, le CSS et le JavaScript de la page réunis. Compresser les images est l'un des moyens les plus simples d'accélérer un site, sans forcément les dégrader. Ce guide explique comment fonctionne la compression d'images, quels formats choisir, quels réglages de qualité utiliser et une méthode simple à répéter pour chaque page.

Pourquoi le poids des images compte

• Vitesse. Les images lourdes mettent plus de temps à se télécharger, surtout sur mobile. Les visiteurs le remarquent, et les pages lentes perdent des lecteurs et des clients.
• Core Web Vitals. Sur beaucoup de pages, le plus grand élément visible est une image, souvent une photo d'en-tête. Le Largest Contentful Paint (LCP) de Google mesure la vitesse d'affichage de cet élément, et les Core Web Vitals font partie de la façon dont Google évalue l'expérience sur la page.
• Coûts et limites. Des images plus légères consomment moins de bande passante et d'espace d'hébergement, et certaines plateformes limitent la taille des envois.
• Recherche d'images. Des images rapides et bien décrites sont plus faciles à explorer pour les moteurs de recherche et à afficher dans les résultats d'images.

Compression avec perte ou sans perte

La compression sans perte réduit le fichier sans modifier un seul pixel. Elle trouve des façons plus efficaces de stocker les mêmes données. L'optimisation PNG est sans perte, donc aucun curseur de qualité à surveiller, mais les gains sont généralement modestes.

La compression avec perte supprime des détails que l'œil remarque peu, comme de subtiles variations de couleur et des textures fines, en échange de fichiers bien plus légers. JPEG, WebP et AVIF prennent tous en charge la compression avec perte, contrôlée par un réglage de qualité. Avec des réglages raisonnables, la plupart des gens ne voient aucune différence à taille d'affichage normale.

Choisir le bon format d'image

JPEG (JPG)

Le format classique pour les photos. Pris en charge partout, bonne compression des photographies, pas de transparence. Toujours un choix sûr quand vous avez besoin d'une compatibilité maximale, par exemple dans les e-mails.

PNG

Sans perte, avec transparence. Idéal pour les captures d'écran, logos, icônes et graphiques aux couleurs unies et aux contours nets. Un mauvais choix pour les photos, qui deviennent énormes en PNG.

WebP

Un format moderne conçu par Google qui gère la compression avec et sans perte ainsi que la transparence. Il produit généralement des fichiers nettement plus légers que JPEG ou PNG à qualité visuelle comparable, et tous les grands navigateurs actuels le prennent en charge. Un excellent choix par défaut pour les sites web.

AVIF

Un format plus récent basé sur le codec vidéo AV1. Il compresse souvent encore mieux que le WebP, surtout les photos, et il est pris en charge par les versions actuelles des grands navigateurs. L'encodage est plus lent et certains logiciels anciens ne savent pas l'ouvrir, gardez donc une solution de repli si votre public utilise des appareils anciens.

SVG

Ce n'est pas du tout un format photo, mais des graphiques vectoriels décrits sous forme de code. Parfait pour les logos et icônes qui doivent rester nets à toutes les tailles. Optimisez les SVG en supprimant les métadonnées de l'éditeur.

Quel réglage de qualité utiliser ?

Il n'existe pas de chiffre parfait, car cela dépend de l'image et du format, mais ces points de départ fonctionnent bien :

• Photos pour le web : commencez vers 75–85 de qualité en JPEG ou WebP, puis comparez.
• Grandes images d'en-tête : essayez un peu moins, vers 70–80, car elles sont grandes et vues rapidement.
• Photos de produits où le détail compte : restez dans le haut de la fourchette, 80–90.
• AVIF : utilise une autre échelle. Des valeurs plus basses peuvent rester belles, comparez donc visuellement.

Le meilleur test reste vos yeux : compressez, regardez le résultat à la taille réelle d'affichage, baissez la qualité jusqu'à percevoir tout juste une différence, puis revenez d'un cran.

Redimensionnez avant de compresser

La compression aide, mais le gain le plus important vient souvent du redimensionnement. Une photo de téléphone peut faire 4 000 pixels de large, alors que la colonne de contenu de votre blog en fait 800. Servir la photo en taille réelle oblige le navigateur à télécharger bien plus de pixels qu'il ne peut en afficher.

• Redimensionnez à peu près à la plus grande taille d'affichage de l'image, ou environ le double pour un rendu net sur les écrans haute densité (retina).
• Utilisez les attributs HTML srcset et sizes, ou les images responsives intégrées à votre CMS, pour servir des fichiers plus légers aux petits écrans.

Une méthode simple pour chaque image

1. Choisissez le bon format : photos en WebP ou JPEG (ou AVIF), graphiques et captures d'écran en PNG ou WebP, logos en SVG.
2. Redimensionnez à la taille d'affichage.
3. Compressez avec l'optimiseur d'images. Envoyez des fichiers JPG, PNG, WebP ou AVIF (vous pouvez en sélectionner plusieurs à la fois), choisissez un niveau de qualité et, si vous le souhaitez, convertissez le tout en un seul format de sortie. Comparez les tailles d'origine et finales, puis téléchargez les résultats un par un ou dans un ZIP.
4. Vérifiez le résultat à taille réelle sur un téléphone et un ordinateur.
5. Donnez au fichier un nom descriptif, comme tasse-ceramique-bleue.webp plutôt que IMG_4821.webp. Le générateur de slugs transforme n'importe quelle description en nom de fichier propre.
6. Rédigez un texte alternatif qui décrit l'image pour les lecteurs d'écran et les moteurs de recherche.
7. Chargez en différé les images sous la ligne de flottaison avec loading="lazy", mais pas votre image d'en-tête principale, qui doit se charger tout de suite.

N'oubliez pas les métadonnées et la vie privée

Les photos d'appareils et de téléphones contiennent des métadonnées EXIF : modèle de l'appareil, réglages, date et parfois coordonnées GPS. Elles alourdissent un peu le fichier et peuvent révéler où la photo a été prise. Vérifiez le contenu d'une image avec le lecteur EXIF avant de la publier, surtout les photos prises chez vous. Beaucoup d'optimiseurs et de réglages d'export suppriment automatiquement les métadonnées.

Cas particuliers

Petites icônes

Les très petites images peuvent être intégrées directement dans le HTML ou le CSS sous forme de data URI en Base64 avec l'outil image en Base64, ce qui économise une requête réseau. Cela n'a de sens que pour des fichiers de quelques kilo-octets, car le Base64 augmente la taille d'environ un tiers.

Miniatures YouTube et images pour les réseaux sociaux

Si vous utilisez la miniature d'une vidéo dans un article de blog, récupérez-la avec le téléchargeur de miniatures YouTube et compressez-la comme n'importe quelle autre photo.

Captures d'écran

Les captures d'écran contenant du texte rendent souvent mieux en PNG ou en WebP sans perte. Si elles sont très grandes, un WebP avec perte de haute qualité convient généralement.

Comment savoir si vos images posent problème

• Testez votre page avec PageSpeed Insights de Google ou Lighthouse dans les Chrome DevTools. Cherchez des suggestions comme dimensionner correctement les images, servir les images dans des formats modernes et encoder les images efficacement.
• Dans les DevTools, ouvrez l'onglet Network, filtrez par images et triez par taille pour trouver les fichiers les plus lourds.
• Vérifiez que votre serveur utilise HTTP/2 ou HTTP/3 afin que de nombreuses images se chargent efficacement en parallèle. Le vérificateur HTTP/2 vous l'indique.

Questions fréquentes

Compresser les images réduit-il leur qualité ?

La compression sans perte ne modifie pas du tout l'image. La compression avec perte supprime des détails, mais avec des réglages de qualité modérés, la différence est généralement invisible à taille d'affichage normale.

Quel est le meilleur format d'image pour les sites web ?

Pour la plupart des photos, le WebP est un excellent choix par défaut, et l'AVIF permet des fichiers encore plus légers. Utilisez le PNG pour les graphiques qui exigent une qualité sans perte et le SVG pour les logos et icônes.

Quelle taille doivent faire les images d'un site ?

Redimensionnez-les à peu près à leur taille d'affichage (ou jusqu'au double pour les écrans haute densité), puis compressez-les. Pour la plupart des images de contenu, on reste bien en dessous des plusieurs mégaoctets d'un original d'appareil photo.

La compression d'images aide-t-elle le SEO ?

Indirectement. Des pages plus rapides offrent une meilleure expérience et peuvent améliorer des Core Web Vitals comme le LCP, qui font partie des signaux d'expérience sur la page de Google.

Dois-je convertir toutes mes images en WebP ?

Pour un site web, c'est généralement une bonne idée, puisque les navigateurs modernes le prennent en charge. Gardez les originaux et utilisez JPEG ou PNG là où la compatibilité compte, comme dans les newsletters par e-mail.