Les images pèsent plus que tout le reste réuni

Sur un site courant, les images représentent souvent plus de la moitié du poids transféré, loin devant le code. C’est aussi le poste le plus simple à corriger, parce qu’il ne demande aucune réécriture.

Servir la bonne dimension

Le défaut le plus fréquent : une photographie de 4000 pixels de large affichée dans un bloc de 600. Le navigateur télécharge tout, puis réduit. Le visiteur paie la différence en données mobiles.

L’attribut srcset permet de fournir plusieurs tailles et de laisser le navigateur choisir selon l’écran. Un générateur de site statique produit ces variantes automatiquement à la construction.

Choisir un format récent

À qualité visuelle équivalente, les formats WebP et AVIF descendent nettement sous le JPEG. Le gain est de l’ordre de 30 à 50 % selon les images, sans différence perceptible à l’œil.

La compatibilité n’est plus un obstacle sur les navigateurs maintenus. L’élément picture permet de proposer le format récent avec un JPEG en repli, ce qui coûte deux lignes de balisage.

Différer ce qui n’est pas visible

L’attribut loading="lazy" évite de télécharger les images situées hors de l’écran. Sur une page longue, l’économie est immédiate.

Une exception importante : l’image principale du haut de page ne doit pas être différée. Elle est visible dès l’arrivée, et la différer retarde précisément ce que le visiteur attend. Elle mérite l’inverse, un fetchpriority="high".

Réserver la place

Une image sans dimensions déclarées fait sauter la mise en page à son arrivée : le texte descend, et le lien visé se dérobe. C’est mesuré par les navigateurs, et c’est pénalisant au référencement.

Deux attributs width et height sur la balise, ou un aspect-ratio en CSS, suffisent à réserver l’espace avant l’arrivée du fichier.

Le cas des logos et des icônes

Un logo en PNG de 200 Ko est un défaut classique. En SVG, il pèse quelques kilo-octets, reste net à toutes les tailles et peut hériter des couleurs du thème.

Pour les petites icônes, l’intégration directe dans le HTML supprime une requête réseau par icône — ce qui compte davantage que leur poids.