Guides

Images pour un site rapide : taille, format et bonnes pratiques

Les images représentent souvent plus de la moitié du poids d'une page web. Si vous ne les préparez pas, votre site charge lentement, les visiteurs partent et les moteurs de recherche le remarquent. La bonne nouvelle est qu'optimiser les images est l'une des améliorations les plus simples et les plus efficaces. Ce guide rassemble une recette pratique.

Pourquoi les images comptent pour la vitesse

Une page avec dix photos de 4 Mo oblige le visiteur à télécharger 40 Mo, ce qui est très lent sur un téléphone en données mobiles. Un temps de chargement élevé augmente l'abandon et nuit à l'expérience. Les moteurs de recherche considèrent la vitesse comme un facteur de qualité, surtout sur mobile.

Réduire le poids des images ne demande aucune connaissance technique : il suffit d'appliquer quelques critères simples de façon régulière.

Dimensions : ne téléversez pas plus de pixels que ceux affichés

La cause la plus courante d'images lourdes est de téléverser la photo telle qu'elle sort de l'appareil. Si, sur votre page, l'image s'affiche en 800 pixels de large, en téléverser une de 4000 n'améliore rien de visible et multiplie le poids. Calculez la largeur maximale qu'elle occupera à l'écran et téléversez une version à cette largeur, ou le double si vous voulez de la netteté sur les écrans haute densité.

Valeurs indicatives : image principale en en-tête, 1600 à 1920 pixels ; images d'article, 1000 à 1200 ; miniatures de produit, 400 à 600 ; icônes, le strict nécessaire.

Poids cible selon le type d'image

Comme objectif raisonnable, une image d'en-tête devrait rester sous 200 à 300 Ko, les images de contenu entre 60 et 150 Ko et les miniatures sous 40 Ko. Ce ne sont pas des limites strictes, mais des objectifs qui maintiennent le poids total de la page à un niveau gérable, idéalement sous 1 à 2 Mo.

Utilisez l'outil de compression d'image ou celui de poids exact pour vous rapprocher de ces valeurs en vérifiant que la qualité reste bonne.

Le bon format

Choisissez le WebP ou le JPG pour les photographies, le PNG ou le WebP pour les graphiques à transparence et le SVG pour les logos et icônes vectorielles, qui restent nets à toutes les tailles et pèsent très peu. Évitez les GIF animés lourds : une courte vidéo dans un format moderne est généralement bien plus légère.

Donnez à chaque image un nom descriptif en minuscules avec des tirets, par exemple « chaussures-running-bleues.webp », plutôt que « IMG_2043.jpg ».

Chargement différé et texte alternatif

Les images situées hors de l'écran initial n'ont pas besoin d'être chargées à l'ouverture de la page. L'attribut de chargement différé du navigateur permet de ne les télécharger que lorsque le visiteur s'en approche. Pour l'image principale, visible immédiatement, n'appliquez pas ce chargement différé.

Incluez toujours un texte alternatif décrivant l'image. Il aide les personnes utilisant un lecteur d'écran, s'affiche si l'image ne charge pas et donne du contexte aux moteurs de recherche.

Une recette pour commencer aujourd'hui

D'abord, redimensionnez vos images à la largeur que vous utiliserez vraiment. Ensuite, convertissez-les en WebP ou JPG avec une qualité entre 75 et 85. Troisièmement, vérifiez que chacune respecte le poids cible. Quatrièmement, nommez-les clairement et ajoutez un texte alternatif. Cinquièmement, testez votre page sur un téléphone avec une connexion normale.

Faites cela à chaque nouveau contenu publié et, si votre site contient déjà beaucoup d'images lourdes, commencez par celles des pages les plus visitées.

Essayer l'outil: Compresser une image

Questions fréquentes

Autres guides