Optimiser images site web : poids, formats et compression

Pourquoi des images trop lourdes freinent votre site

Sur la plupart des sites de TPE et de PME, les images pèsent plus que le texte, les scripts et les styles réunis. Prenez une photo faite au smartphone et déposée telle quelle : elle peut atteindre plusieurs mégaoctets. Avant de l'afficher, le navigateur doit la télécharger en entier. Et sur une connexion mobile moyenne ? L'attente se voit.

Cette lenteur se paie cash. Un visiteur pressé ferme l'onglet avant même d'avoir vu votre offre. Google la mesure aussi, à travers les Core Web Vitals (notamment l'indicateur qui suit l'affichage du plus grand élément visible, très souvent une bannière). Une image trop lourde freine donc vos ventes et votre visibilité du même coup.

Ce que vous gagnez à optimiser

• Une page plus rapide, surtout sur mobile, où se fait une grande part des visites.
• Moins d'attente et moins de sauts de mise en page : l'expérience utilisateur s'en ressent.
• Moins de données consommées par vos visiteurs, et un hébergement moins sollicité.
• Des signaux plus favorables pour votre référencement naturel.

Bonne nouvelle : c'est l'un des chantiers les plus rentables d'un site ! Il faut de la méthode, pas forcément de gros moyens. Je vous donne les étapes dans l'ordre où je les fais moi-même.

Redimensionner vos images avant de les charger sur le site

On l'oublie presque toujours, et c'est pourtant l'étape la plus efficace. Un appareil photo produit des fichiers larges de plusieurs milliers de pixels. Votre page, elle, affiche la photo dans un bloc bien plus étroit. Le navigateur la réduit donc à l'écran… après avoir téléchargé tous ces pixels inutiles.

Trouver la bonne dimension

Repérez la largeur maximum à laquelle l'image s'affiche dans votre mise en page, sur grand écran. Doublez-la à peu près pour les écrans haute résolution, qui affichent plus de pixels sur la même surface. Au-delà ? Du poids en plus, sans aucun gain visible. Une bannière pleine largeur et une vignette de fiche produit n'ont évidemment pas les mêmes besoins.

Redimensionner avant, pas après

Le bon réflexe : faire ce travail sur votre ordinateur, avant tout envoi dans le CMS. Un logiciel de retouche suffit (l'aperçu intégré à votre système aussi). Certains CMS génèrent plusieurs tailles automatiquement à l'import. Pratique, mais rien ne remplace un fichier source de taille raisonnable.

Choisir le bon format de vos images : JPEG, PNG, WebP, AVIF, SVG

Chaque format a été conçu pour un usage précis. Mal choisi, il peut multiplier le poids d'un fichier sans rien apporter au rendu. Avant de compresser quoi que ce soit, vérifiez donc ce point.

Les formats classiques

• JPEG : le standard des photos. Dégradés et nuances ne lui posent aucun problème, mais il ignore la transparence.
• PNG : pratique pour les visuels transparents ou à aplats nets, comme une capture d'écran. Pour une photo, il devient vite bien trop lourd.
• SVG : un format vectoriel, idéal pour les logos, pictogrammes et illustrations simples. Net à toutes les tailles, il pèse très peu.

Les formats modernes

En général, le format WebP donne des fichiers plus légers que le JPEG ou le PNG, pour un rendu équivalent. Il gère la transparence, et les navigateurs actuels le lisent sans difficulté. L'AVIF compresse souvent mieux encore, au prix d'un encodage plus lent. Mon conseil : pour le web, prenez l'un de ces deux formats par défaut, avec un JPEG en secours si votre outil le propose.

Compression des images : réduire le poids sans perte visible

La taille et le format sont fixés ? Place à la compression. L'objectif tient en une phrase : réduire le poids au maximum tout en gardant une qualité correcte à l'œil nu. Deux grandes familles de réglages s'offrent à vous.

Avec perte ou sans perte

Sans perte, l'outil supprime des données superflues (les métadonnées de l'appareil photo, par exemple) sans toucher aux pixels. Le gain existe, mais il reste modeste. Avec perte, il retire des détails que l'œil remarque peu, et l'allègement est bien plus net. Descendez trop bas, en revanche, et vous verrez apparaître des blocs, du flou ou des contours baveux.

Trouver le bon réglage

Aucun chiffre magique ne convient à toutes les images. Testez plusieurs niveaux sur une image type. Affichez le résultat à taille réelle, puis retenez le plus bas qui reste propre. Surveillez de près les visages, les textes incrustés et les dégradés de ciel : c'est toujours là que la qualité lâche en premier.

Utiliser des outils adaptés

Côté outils, vous avez le choix. Les services en ligne traitent un fichier à la fois, tandis qu'un logiciel de bureau prend des lots entiers. Sur WordPress, je recommande un plugin d'optimisation qui compresse et convertit chaque image dès l'import : vous n'en oubliez plus aucune. Notre guide pour accélérer un site WordPress détaille ce type de réglage.

Charger les images au bon moment : lazy loading, srcset et CDN

Une image légère, c'est bien. Chargée uniquement quand elle sert, c'est encore mieux ! Ici, on agit sur le chargement de la page entière plutôt que sur chaque fichier.

Le chargement différé

Avec le lazy loading, une image ne se charge qu'au moment où le visiteur s'en approche en faisant défiler la page. Tout ce qui n'est pas visible à l'ouverture attend son tour. Un simple attribut suffit, car les navigateurs gèrent désormais cela nativement. Une exception, et elle compte : l'image principale du haut de page doit au contraire arriver le plus vite possible.

Des tailles adaptées à chaque écran

Grâce aux attributs srcset et sizes, vous proposez plusieurs versions d'une même image. C'est le navigateur qui choisit celle qui convient à l'écran du visiteur : une version légère pour le téléphone, une plus fine pour le grand écran. Indiquez aussi la largeur et la hauteur de chaque image. Sa place est ainsi réservée, et le texte ne saute plus pendant l'affichage.

Servir les fichiers depuis un CDN

Un CDN conserve des copies de vos fichiers sur des serveurs répartis géographiquement, si bien que chaque image part du point le plus proche du visiteur. Certains de ces services vont plus loin et convertissent ou redimensionnent les images à la volée. Fort trafic, large catalogue ? Ce levier aide alors nettement à garder un affichage rapide.

Balise alt et noms de fichiers : aider Google à comprendre le contenu

La vitesse ne fait pas tout. Là où vous voyez une photo, un moteur de recherche ne voit presque rien. Pour comprendre ce qu'elle montre, il s'appuie sur le texte autour, sur le nom du fichier et surtout sur la balise alt.

Rédiger un texte alternatif utile

L'attribut alt décrit l'image en quelques mots. Les lecteurs d'écran des personnes malvoyantes le lisent, et il s'affiche quand l'image ne se charge pas. Dans le code, il s'écrit alt=«description courte et précise». Dites simplement ce que montre l'image, sans empiler de mots-clés. Un visuel purement décoratif ? Laissez l'attribut vide : c'est aussi une bonne pratique d'accessibilité web.

Nommer ses fichiers

Oubliez les IMG_4521.jpg. Choisissez un nom court, en minuscules, avec des tirets, qui dit ce que l'image représente. Le geste est petit, mais il donne un indice de plus aux moteurs, et votre médiathèque devient bien plus simple à gérer.

La checklist avant publication

• Image redimensionnée à sa taille d'affichage réelle.
• Format adapté : WebP ou AVIF pour les photos, SVG pour les logos.
• Compression réglée et rendu vérifié à taille réelle.
• Chargement différé actif, sauf pour l'image du haut de page.
• Largeur et hauteur renseignées dans le code.
• Balise alt descriptive et nom de fichier parlant.

Votre site existe déjà ? Commencez par les pages qui comptent : l'accueil, les pages de services, les fiches produits les plus consultées. PageSpeed Insights, par exemple, vous montre quelles images posent problème. Et si le site est trop ancien pour être corrigé proprement, une création de site internet pensée pour la performance dès le départ sera peut-être plus simple. Chez RankerSquare, un site vitrine sur-mesure est proposé dès 19,90 € par mois en abonnement ; les projets plus complexes sont sur devis.

Questions fréquentes