Une photo paraît parfaite sur votre ordinateur, mais ralentit la page une fois publiée. Vous la compressez davantage et les détails deviennent flous. Le bon réglage ne se résume pas à choisir un petit fichier : il faut adapter l’image à son usage, à sa taille d’affichage et au chargement de la page.
Optimiser les images pour le web consiste à transmettre les fichiers nécessaires, à une qualité suffisante, au bon moment. Voici une méthode pour préparer vos visuels, les intégrer et contrôler le résultat.
1. Définir l’usage avant de choisir les dimensions
Une vignette de catalogue, une photo avec zoom et une grande illustration d’article n’ont pas les mêmes besoins. Repérez la largeur affichée sur ordinateur et mobile, le recadrage et les détails à préserver.
Pour une image affichée sur 600 pixels CSS de large, une source de 1 200 pixels peut être pertinente sur un écran à densité double. Cela ne signifie pas qu’il faut envoyer systématiquement ce fichier à tous les appareils. Les variantes responsives permettent d’adapter le téléchargement.
Les 72 dpi ne sont pas une règle d’optimisation web. Changer uniquement la métadonnée de résolution, sans rééchantillonner ni modifier les dimensions en pixels, ne réduit pas le nombre de pixels. Pour le poids et le rendu, examinez les dimensions, le format, la compression et les fichiers effectivement servis.
2. Comparer les formats selon le visuel
| Usage | Formats à examiner | Contrôle |
|---|---|---|
| Photographie | JPEG, WebP ou AVIF | Netteté des détails et poids à qualité acceptable. |
| Image avec transparence | PNG, WebP ou AVIF | Contours, transparence et rendu sur le fond réel. |
| Logo ou icône vectorielle | SVG | Fichier propre, maîtrisé et rendu fidèle. |
| Capture contenant du texte | PNG ou format moderne adapté | Lisibilité des petites lettres après compression. |
| Animation | Vidéo ou format animé adapté | Poids, lecture, accessibilité et intérêt réel du mouvement. |
Aucun format ne gagne pour tous les fichiers. Exportez deux versions comparables et observez le résultat à la taille d’utilisation. Pour approfondir un format précis, consultez notre article sur le WebP.
3. Compresser sans appliquer un pourcentage universel
Les curseurs de qualité ne sont pas équivalents d’un logiciel à l’autre. Une valeur de 40 peut produire des résultats très différents selon le format et l’encodeur. Ne fixez donc pas une plage unique à l’ensemble du catalogue.
Conservez un original, exportez une première version, puis réduisez progressivement la qualité. Vérifiez les contours, les dégradés, les textures et le texte. Pour une boutique, contrôlez aussi le niveau de zoom proposé aux acheteurs.
Exemple de test, sans résultat préétabli : partez d’une photo de produit de 4 000 pixels de large. Créez une version adaptée à l’affichage, puis comparez JPEG, WebP et AVIF. Notez les dimensions, le poids et les défauts visibles. Retenez le fichier le plus léger qui conserve les détails utiles.
4. Fournir des images adaptées à l’écran
Réduire une grande image avec du CSS ne garantit pas que le navigateur télécharge un fichier plus petit. Les attributs srcset et sizes permettent de proposer plusieurs tailles et d’indiquer la place prévue dans la mise en page. Le navigateur choisit ensuite une ressource adaptée.
L’élément picture sert notamment à proposer un autre format ou un recadrage selon le contexte. Sur WordPress, vérifiez ce que produisent le thème et les blocs utilisés : une image de médiathèque et une image d’arrière-plan de constructeur ne suivent pas nécessairement le même mécanisme.
Dans les outils de développement du navigateur, contrôlez l’URL téléchargée, ses dimensions et son poids. Faites ce test à plusieurs largeurs d’écran, avec le cache désactivé lorsque vous comparez les transferts.
5. Charger l’image principale sans attendre
Le chargement différé convient aux images situées plus bas dans la page. Il ne faut pas retarder l’image principale visible immédiatement si elle constitue l’élément LCP. Vérifiez son identification dans les outils de performance avant de modifier les priorités.
Une priorité élevée peut être utile pour une image réellement importante, mais la multiplier sur toutes les photos annule l’intérêt de hiérarchiser. Prévoyez aussi les dimensions ou le ratio d’affichage pour éviter que la mise en page se déplace lorsque le visuel arrive.
Notre guide des Core Web Vitals explique les indicateurs de chargement et de stabilité. Pour les autres causes de lenteur, consultez les sept leviers de performance WordPress.
L’optimisation du chargement d’un site passe par de nombreux éléments.
On t’aide à atteindre la vitesse maximale ?
6. Rédiger un texte alternatif utile
Le texte alternatif transmet l’information ou la fonction de l’image dans son contexte. Il ne doit pas répéter une liste de mots-clés. Une image purement décorative peut utiliser alt= » » ; un bouton constitué d’une image doit exprimer l’action attendue.
| Image | Alternative possible |
|---|---|
| Photo illustrant une finition de produit | Détail de la finition chêne clair de l’étagère Alba. |
| Graphique de résultats | Résumé de la tendance, avec les données détaillées accessibles dans le texte. |
| Décoration sans information | Attribut alt vide. |
| Image servant seule de lien vers le panier | Voir le panier. |
Ces formulations sont des exemples à adapter à l’image réelle. N’affirmez pas une matière, une couleur ou une caractéristique que le visuel et les données produit ne permettent pas de vérifier.
Un nom de fichier descriptif facilite l’identification. Une légende est utile lorsqu’elle apporte une source, un contexte ou une explication ; elle n’est pas obligatoire sous chaque photo. Placez les images près du passage qu’elles éclairent.
Un processus simple pour votre équipe
| Étape | Action |
|---|---|
| Préparation | Identifier l’usage, recadrer et conserver l’original. |
| Export | Choisir les dimensions et comparer les formats. |
| Compression | Réduire le poids en contrôlant les détails utiles. |
| Intégration | Vérifier variantes responsives, dimensions réservées et mode de chargement. |
| Contenu | Renseigner l’alternative adaptée et la légende si nécessaire. |
| Contrôle | Tester le fichier réellement servi sur mobile et ordinateur. |
Un logiciel d’image permet de contrôler l’export avant publication. Une extension WordPress peut automatiser une partie des conversions et des variantes. Évitez de cumuler plusieurs outils qui recompressent les mêmes fichiers sans suivre le résultat. Testez d’abord un petit lot et gardez un moyen de restauration.
Quel poids maximal faut-il viser ?
Il n’existe pas de plafond universel pour toutes les images. Définissez un budget selon leur nombre, leur rôle et la page. Une galerie entière peut rester lourde même si chaque fichier semble raisonnable. À l’inverse, une image technique détaillée peut justifier davantage de poids qu’une vignette.
Pour un catalogue, formalisez des consignes de cadrage, de dimensions et de contrôle du zoom. Notre guide de la fiche produit e-commerce aide à relier ces choix à la décision d’achat.
Comment vérifier que l’optimisation est utile ?
Comparez le poids transféré et les mesures de chargement dans des conditions similaires. Contrôlez aussi les photos à l’écran : une page plus légère n’est pas une amélioration si les détails indispensables sont devenus illisibles.
Commencez par les images les plus lourdes des pages importantes et par celles qui retardent l’affichage principal. Cette sélection donne un ordre de travail plus utile qu’une conversion automatique de toute la médiathèque.
Sources : images responsives sur MDN, recommandations Google pour les images et optimisation du LCP.
