Sur la plupart des sites, les images représentent une part importante, souvent la plus importante, du poids total des pages. Ce sont elles qui ralentissent l'affichage sur mobile, consomment le forfait de vos visiteurs et dégradent les indicateurs de performance suivis par les moteurs de recherche. Bonne nouvelle : ce sont aussi les éléments les plus faciles à optimiser. Voici une méthode complète, à appliquer dans l'ordre. ## Étape 1 : choisir le bon format Le format détermine la façon dont l'image est compressée. Un mauvais choix peut multiplier le poids sans aucun bénéfice visuel. - **Photos** : WebP ou AVIF en priorité, JPG en solution de repli. Ces formats compressent avec pertes, ce qui convient parfaitement aux images à tons continus. - **Logos, icônes, pictogrammes, illustrations simples** : SVG si l'image est vectorielle. Il reste net à toutes les tailles et pèse souvent très peu. - **Captures d'écran, images avec du texte, graphismes avec transparence** : WebP (avec ou sans perte) ou PNG optimisé. - **Animations** : une courte vidéo MP4 ou WebM est généralement bien plus légère qu'un GIF animé. L'erreur la plus courante consiste à publier des photos en PNG. Le PNG est sans perte : il conserve chaque pixel d'une photo à l'identique, ce qui donne des fichiers très lourds, sans différence visible avec un JPG ou un WebP bien réglé. ## Étape 2 : adapter les dimensions C'est l'étape qui apporte souvent le gain le plus spectaculaire, et pourtant la plus négligée. Une photo issue d'un smartphone mesure fréquemment 4 000 pixels de large ou plus. Si elle s'affiche dans une colonne de 800 pixels, le navigateur télécharge des millions de pixels qu'il va immédiatement réduire. La règle : **une image ne devrait pas être beaucoup plus grande que sa taille d'affichage maximale**. Pour tenir compte des écrans haute densité (les écrans dits « Retina », où un pixel CSS correspond à deux pixels physiques ou plus), on prévoit généralement jusqu'au double de la taille affichée. Une image affichée à 800 pixels de large sera donc fournie en 800 et en 1 600 pixels, pas en 4 000. Comme le poids d'une image dépend du nombre total de pixels, diviser la largeur par deux divise ce nombre par quatre environ. Aucun réglage de compression ne rivalise avec cela. ## Étape 3 : compresser intelligemment Une fois le format et les dimensions fixés, il reste à régler la compression. Pour les formats avec pertes, un paramètre de qualité détermine le compromis entre poids et fidélité. Quelques principes : - **Les premières réductions de qualité sont quasi invisibles** et font fortement baisser le poids. Au-delà d'un certain seuil, les défauts apparaissent rapidement. - **Le seuil varie selon les images.** Un portrait sur fond flou supporte une compression forte ; une photo de feuillage ou de texte fin, beaucoup moins. - **Comparez à 100 % de zoom**, sur un écran de bonne qualité, et choisissez le réglage le plus bas qui reste satisfaisant. - **Partez toujours de l'original** : recompresser une image déjà compressée cumule les dégradations. La compression supprime aussi généralement les métadonnées (données EXIF de l'appareil photo, coordonnées GPS), inutiles sur un site et parfois indiscrètes. ## Étape 4 : servir la bonne image à chaque écran avec srcset Un visiteur sur smartphone n'a pas besoin de la même image qu'un visiteur sur un grand écran. L'attribut `srcset` permet de proposer plusieurs versions d'une même image ; l'attribut `sizes` indique au navigateur la largeur à laquelle elle sera affichée. Le navigateur choisit alors lui-même le fichier le plus adapté : ```html Salon lumineux avec canapé gris ``` Ici, un téléphone de 400 pixels de large chargera la version 400 ou 800 selon la densité de son écran, et un ordinateur la version 800 ou 1 600. Combiné à l'élément ``, ce mécanisme permet aussi de proposer des formats modernes (AVIF, WebP) avec un format de repli. ## Étape 5 : différer le chargement avec le lazy loading Inutile de télécharger les images situées en bas de page tant que le visiteur n'y est pas arrivé. L'attribut natif `loading="lazy"` demande au navigateur de différer leur chargement jusqu'à ce qu'elles approchent de la zone visible : ```html ... ``` C'est simple et efficace, mais avec une exception importante : **n'appliquez jamais le lazy loading aux images visibles dès l'arrivée sur la page**, en particulier l'image principale en haut de page. Différer leur chargement retarde l'affichage de ce que le visiteur voit en premier. ## Étape 6 : indiquer les dimensions pour éviter les décalages Lorsque le navigateur ne connaît pas la taille d'une image avant de l'avoir téléchargée, il ne lui réserve pas de place. Quand l'image arrive, le contenu situé en dessous est brusquement poussé vers le bas. Ce phénomène irritant, qui fait cliquer sur le mauvais bouton, est mesuré par l'indicateur **CLS** (*Cumulative Layout Shift*). La solution consiste à toujours indiquer les attributs `width` et `height` sur vos images, ou à définir un ratio en CSS avec la propriété `aspect-ratio`. Le navigateur peut alors réserver l'espace dès le départ, même si l'image s'adapte ensuite à la largeur de l'écran. ## Étape 7 : soigner l'image principale et le LCP Les **Core Web Vitals** sont un ensemble d'indicateurs de l'expérience utilisateur, pris en compte par Google. L'un d'eux, le **LCP** (*Largest Contentful Paint*), mesure le temps nécessaire pour afficher le plus grand élément visible au chargement de la page. Sur de nombreuses pages, cet élément est une image : photo d'en-tête, visuel produit, image d'article. Pour améliorer le LCP : - **compressez et redimensionnez en priorité** cette image : c'est celle dont le poids compte le plus ; - **ne la chargez pas en différé** (pas de `loading="lazy"`) ; - **signalez son importance** au navigateur avec l'attribut `fetchpriority="high"` ; - **évitez de l'afficher via un script** ou une image de fond CSS découverte tardivement : une balise `` présente directement dans le HTML est trouvée plus tôt par le navigateur ; - **préchargez-la** si elle n'est pas découverte rapidement, à l'aide d'une balise ``. ## Étape 8 : ne pas oublier l'accessibilité et le référencement Une image optimisée est aussi une image bien décrite : - **le texte alternatif** (`alt`) décrit le contenu de l'image pour les personnes qui utilisent un lecteur d'écran et pour les moteurs de recherche. Une image purement décorative reçoit un `alt` vide (`alt=""`) ; - **le nom de fichier** gagne à être explicite : `canape-velours-vert.webp` est plus parlant que `IMG_4521.webp` ; - **le contexte** compte : une image placée près d'un texte qui la concerne est mieux comprise. ## Une routine simple à mettre en place Pour chaque nouvelle image publiée : 1. recadrez si nécessaire pour ne garder que l'essentiel ; 2. redimensionnez à la taille d'affichage maximale (et au double pour les écrans haute densité) ; 3. convertissez en WebP ou AVIF ; 4. ajustez la qualité en comparant visuellement ; 5. renommez le fichier de façon descriptive ; 6. intégrez-la avec `alt`, `width`, `height`, et `loading="lazy"` si elle n'est pas visible d'emblée. Pour un site existant, commencez par les pages les plus visitées et par les images les plus lourdes : c'est là que l'effort paie le plus vite. Les outils d'analyse de performance intégrés aux navigateurs signalent généralement les images surdimensionnées ou mal compressées. ## En résumé - **Choisissez le format selon le contenu** : WebP ou AVIF pour les photos, SVG pour les logos vectoriels, vidéo plutôt que GIF pour les animations. - **Redimensionnez avant tout** : une image ne doit pas être beaucoup plus grande que sa taille d'affichage, double densité comprise. - **Compressez en comparant visuellement**, en partant toujours de l'original. - **Utilisez srcset et sizes** pour servir la bonne taille à chaque écran, et `` pour proposer plusieurs formats. - **Activez le lazy loading** pour les images hors écran, mais jamais pour l'image principale. - **Indiquez largeur et hauteur** pour éviter les décalages de mise en page. - **Priorisez l'image principale** pour améliorer le LCP, et décrivez chaque image avec un texte alternatif pertinent.