Optimiser les images de votre site web : format, dimensions et poids

Optimiser les images d'un site web revient à agir sur trois leviers : leur format, leurs dimensions et leur chargement. Ce sont, avec les scripts, les premières sources de poids d'une page. Notre audit mesure le poids total transféré, détecte les images servies dans un format non optimisé ou bien plus grandes que leur taille d'affichage, et en déduit l'impact sur la vitesse et l'empreinte carbone.

Côté poids de page, l'audit passe en « attention » au-delà de 3 000 Ko et en « important » au-delà de 6 000 Ko. Ces seuils sont propres à l'outil, ce ne sont pas une norme officielle.

1. Choisir un format moderne : WebP ou AVIF

L'audit signale les images chargées dans un format qui n'est ni WebP ni AVIF (hors favicon et icônes déclarées dans le manifeste de l'application). Ces deux formats produisent en général des fichiers plus légers que JPEG ou PNG à qualité visuelle comparable, et sont lus par les navigateurs courants. Pour convertir vos fichiers, le Convertisseur d'images et le Kit d'images d'IT-Tools (listés en bas de page) fonctionnent dans le navigateur et acceptent ces formats.

Pour garder un repli sur les très anciens navigateurs, servez plusieurs formats avec <picture> :

<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="Description de la photo" width="800" height="600">
</picture>

Sous WordPress, des extensions comme Imagify ou ShortPixel convertissent automatiquement la médiathèque ; certains plugins de cache proposent aussi l'option WebP.

2. Servir l'image à la bonne taille

Une photo de 4 000 pixels de large affichée dans une colonne de 400 pixels est téléchargée en entier pour rien. L'audit compare les dimensions réelles de chaque image à celles qu'elle occupe à l'écran, en tenant compte de la densité de pixels de l'écran, et liste celles qui sont nettement trop grandes.

1. Notez la taille d'affichage maximale de l'image sur votre mise en page.
2. Redimensionnez le fichier à cette taille, doublée pour les écrans à forte densité de pixels.
3. Déclarez plusieurs tailles avec srcset et sizes pour que chaque écran télécharge la bonne.

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="Description de la photo" width="800" height="600">

WordPress génère déjà plusieurs tailles et le srcset pour les images ajoutées via la médiathèque ; vérifiez que votre thème utilise bien ces fonctions plutôt qu'une adresse d'image en dur.

3. Ne charger que ce qui est vu

• Ajoutez loading="lazy" aux images situées sous la première fenêtre d'affichage, mais pas à l'image principale du haut de page, qui doit s'afficher le plus vite possible.
• Renseignez toujours width et height : le navigateur réserve la place et la page ne « saute » pas pendant le chargement.
• Retirez les images chargées mais jamais affichées (ancien carrousel, chargement conditionnel raté) : l'audit les liste séparément.

Effet sur l'empreinte carbone

Le principal levier pour réduire l'empreinte carbone d'une visite est de diminuer le poids de la page. Alléger les images y contribue directement ; le détail du calcul est présenté sur la page empreinte carbone d'un site web.

Vérifier

Dans l'onglet Réseau des outils du navigateur, filtrez sur « Img » et triez par taille : aucune image ne devrait dépasser le poids dont vous avez besoin. Relancez l'audit, puis passez aux réglages de cache et de compression pour que ces images ne soient téléchargées qu'une fois.