Optimiser les images de son site web sans perdre en qualité

Optimiser les images d'un site web : de quoi parle-t-on ?

Optimiser les images d'un site web, c'est livrer à chaque visiteur un fichier aux bonnes dimensions, dans un format moderne et compressé juste assez pour que la différence ne se voie pas à l'œil. Sur la plupart des sites vitrines, les images représentent la plus grosse part du poids d'une page. Une photo de 4 Mo sortie d'un smartphone, affichée dans un bloc de 800 pixels, peut descendre à 120 Ko sans perte visible.

Ce travail ne demande ni compétence technique poussée ni logiciel payant. Il demande une méthode : choisir la taille, choisir le format, régler la compression, puis vérifier que le site sert bien ces fichiers. Voici chaque étape, avec les réglages à reprendre tels quels.

Pourquoi des images lourdes coûtent des clients

Une page qui pèse 6 Mo met plusieurs secondes à s'afficher en 4G. Le visiteur voit un écran blanc ou une image qui se dessine ligne par ligne, et une partie repart avant d'avoir lu votre offre. Google mesure ce délai avec le LCP (Largest Contentful Paint), le temps d'affichage du plus gros élément visible. Sur un site vitrine, cet élément est presque toujours la photo du haut de page. Nous détaillons ces indicateurs dans notre article sur la vitesse de chargement d'un site.

Les images lourdes ont aussi un coût moins visible : elles consomment le forfait mobile de vos visiteurs, la bande passante de votre hébergement et l'espace de vos sauvegardes.

Étape 1 : redimensionner à la taille d'affichage

C'est le geste qui rapporte le plus. Un appareil photo récent produit des images de 4 000 à 6 000 pixels de large. Aucun écran n'en affiche autant dans une page web. Le navigateur télécharge tout le fichier, puis le réduit, et le visiteur paie le transfert pour rien.

Exportez chaque image à la largeur maximale où elle sera affichée, multipliée par deux pour les écrans haute densité (Retina et la plupart des smartphones). Au-delà de 2 400 pixels, le gain de netteté ne se voit plus.

Usage	Largeur d'export	Poids à viser
Image pleine largeur en haut de page	1 920 à 2 400 px	150 à 300 Ko
Image dans le texte ou dans une colonne	1 200 à 1 600 px	80 à 180 Ko
Photo de galerie ou de réalisation	1 200 px	80 à 150 Ko
Vignette, carte d'article, photo d'équipe	400 à 800 px	20 à 60 Ko
Logo, icône, pictogramme	Format vectoriel SVG	Moins de 10 Ko

Ces poids sont des ordres de grandeur pour des photos. Une image très détaillée, comme un paysage avec du feuillage, pèsera plus qu'un portrait sur fond uni à taille égale.

Étape 2 : choisir le bon format d'image

Le JPEG et le PNG datent des années 1990. Les formats récents compressent mieux à qualité égale, et tous les navigateurs actuels les lisent.

• WebP : le choix par défaut pour les photos. Google indique qu'un WebP compressé avec perte est 25 à 34 % plus léger qu'un JPEG de qualité comparable. Il gère aussi la transparence, ce qui remplace la plupart des PNG.
• AVIF : encore plus compact que le WebP, surtout sur les photos à grands aplats. L'encodage est plus lent et certains outils le gèrent mal. Utilisez-le si votre chaîne de production le permet, avec un WebP ou un JPEG en solution de repli.
• JPEG : reste acceptable pour les photos si vous ne pouvez pas faire autrement, à condition de le compresser.
• PNG : à réserver aux captures d'écran avec du texte fin et aux images qui exigent une transparence sans perte. Une photo en PNG pèse souvent cinq fois plus que la même en WebP.
• SVG : pour les logos, icônes et illustrations simples. Il reste net à toutes les tailles et pèse quelques kilo-octets.

Évitez les GIF animés : une animation de quelques secondes peut dépasser plusieurs mégaoctets. Une courte vidéo MP4 ou WebM sans son, en lecture automatique, fait le même effet pour un poids bien moindre.

Étape 3 : régler la compression sans perte visible

La compression avec perte supprime des détails que l'œil ne remarque pas. Le réglage se fait par un curseur de qualité, de 0 à 100.

1. Partez d'une qualité de 75 à 80 en WebP ou en JPEG. C'est la zone où le poids baisse fortement sans dégradation visible pour la plupart des photos.
2. Comparez à 100 % de zoom l'original et la version compressée, côte à côte. Regardez les dégradés (ciel, mur uni) et les contours nets (texte, bords d'objet) : c'est là que les défauts apparaissent en premier.
3. Descendez par paliers de 5 tant que vous ne voyez pas de différence. Arrêtez-vous au premier palier où apparaissent des bandes dans les dégradés ou un halo autour des contours, et remontez d'un cran.
4. Gardez le même réglage pour une série de photos similaires : une fois le bon niveau trouvé sur une image, appliquez-le aux autres en lot.

Conservez toujours l'original en haute définition, hors du site. Si vous refaites un jour votre site ou changez de format, vous repartirez d'une source propre plutôt que de recompresser une image déjà compressée.

Les outils gratuits pour compresser ses images

• Squoosh (squoosh.app) : dans le navigateur, une image à la fois, avec la comparaison avant/après et le choix du format. Idéal pour trouver le bon réglage.
• XnConvert (Windows, Mac, Linux) : redimensionne et convertit des dossiers entiers en WebP en une seule opération.
• ImageOptim (Mac) : réduit le poids des JPEG et PNG en retirant les données inutiles, par simple glisser-déposer.
• Extensions WordPress de compression : elles convertissent les images à l'import. Une seule suffit, et notre article WordPress lent explique pourquoi il ne faut pas les cumuler.

Étape 4 : bien intégrer les images dans les pages

Un fichier léger mal intégré peut encore ralentir la page ou la faire sauter pendant le chargement. Quatre réglages, à demander à votre prestataire s'il gère le code :

• Largeur et hauteur déclarées sur chaque image (attributs width et height). Le navigateur réserve la place avant le téléchargement, et le texte ne se décale plus sous le doigt du visiteur.
• Chargement différé (loading="lazy") pour les images situées sous la ligne de flottaison : elles ne se téléchargent que lorsque le visiteur fait défiler la page. Jamais pour l'image du haut de page, qui doit au contraire arriver en premier (fetchpriority="high").
• Plusieurs tailles du même fichier (attributs srcset et sizes). Le téléphone reçoit une version de 800 pixels, l'écran large une version de 1 600 pixels.
• Un service de distribution (CDN) qui envoie les images depuis un serveur proche du visiteur. La plupart des hébergeurs modernes l'incluent.

Images et référencement : ce que Google lit

Google ne voit pas vos photos comme un humain. Il s'appuie sur le texte qui les accompagne pour comprendre ce qu'elles montrent et les proposer dans Google Images.

• Le nom du fichier : terrasse-bois-exotique-lyon.webp plutôt que IMG_4521.webp. Des mots en minuscules, séparés par des tirets, sans accents.
• Le texte alternatif (attribut alt) : une phrase courte qui décrit l'image, utile aussi aux personnes malvoyantes qui utilisent un lecteur d'écran. « Terrasse en bois exotique posée autour d'une piscine » dit quelque chose ; « terrasse terrasse bois pas cher Lyon » est du bourrage de mots-clés. Les images purement décoratives reçoivent un alt vide.
• Le texte autour : une légende ou un paragraphe proche qui parle du même sujet renforce la compréhension.

Pour une boutique en ligne, ces règles s'appliquent à chaque photo de produit, comme nous le détaillons dans notre méthode pour rédiger une fiche produit.

Les erreurs qui annulent l'optimisation

• Réduire l'image dans l'éditeur de page plutôt que dans le fichier. Redimensionner un bloc dans Wix ou WordPress change l'affichage, pas toujours le poids téléchargé.
• Compresser une image déjà compressée. Chaque passage dégrade un peu plus. Repartez de l'original.
• Charger en différé l'image du haut de page. C'est l'erreur la plus fréquente après l'installation d'une extension d'optimisation : le LCP empire au lieu de s'améliorer.
• Oublier les anciennes images. Optimiser les nouvelles est bien ; la galerie de 2019 avec ses quarante photos de 5 Mo reste là. Faites un passage complet une fois, en commençant par les pages les plus visitées.
• Mettre une vidéo lourde en fond de page d'accueil. Sur mobile, une image fixe bien compressée fait souvent mieux.

Comment vérifier le résultat

Passez la page dans PageSpeed Insights (pagespeed.web.dev), en version mobile. Les rubriques « Améliorer l'affichage des images » et « Diffuser des images aux formats nouvelle génération » doivent disparaître, ou n'indiquer que quelques kilo-octets de gain possible. Comparez le LCP avant et après : sur un site vitrine dont les photos n'avaient jamais été traitées, il n'est pas rare de gagner une à deux secondes.

Chez Fluctuatech, chaque image est redimensionnée, convertie et intégrée avec ses dimensions dès la mise en ligne. Une landing page démarre à 1 200 € HT, un site vitrine à 2 500 € HT, et le forfait de maintenance Essentiel, à 149 € HT par mois, comprend les petites modifications de contenu et un rapport de performance mensuel.

Parler de votre site