Vos images sont-elles optimisées pour le web ?

Les images sont souvent parmi les plus grosses ressources d'une page — une seule photo non optimisée peut peser plus que tout votre HTML, CSS et JavaScript réunis. Sur un site riche en images, servir des fichiers à la bonne taille et bien compressés est l'un des moyens les plus fiables de réduire les octets transférés et d'accélérer le chargement. Savoir si c'est votre plus gros gain, en revanche, c'est la mesure qui le dira.

Utilisez des formats modernes

Les vieux JPEG et GIF sont souvent bien plus lourds que nécessaire. Les formats modernes compressent fréquemment la même image en plus petit, à qualité visuelle proche — mais pas toujours : le gain dépend de l'image, de l'encodeur et du réglage de qualité, et un JPEG ou un PNG bien encodé peut parfois gagner. Testez au lieu de supposer :

• WebP et AVIF — souvent nettement plus petits pour les photos ; utilisez-les quand ils couvrent vos besoins de qualité et de compatibilité, avec une solution de repli via <picture>.
• SVG — pour les logos simples, les icônes et le dessin au trait : il s'agrandit sans pixelliser et reste en général minuscule — même si une illustration complexe peut grossir ; optimisez donc le balisage et comparez. N'utilisez que du SVG de confiance, optimisé, et nettoyez tout fichier fourni par un tiers avant de l'intégrer dans la page (le SVG est du balisage actif, pas juste des pixels).

Donnez à la solution de repli les caractéristiques dont l'image a besoin — JPEG pour les photos opaques, PNG quand la transparence ou les contours nets comptent :

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Team at work" width="1200" height="630">
</picture>

Adaptez la taille à l'écran — densité comprise — et restez adaptatif

N'envoyez pas une photo de 4 000 px dans un emplacement de 400 px — mais ne redimensionnez pas non plus à la seule largeur CSS : un emplacement de 400 pixels CSS sur un écran haute densité peut réclamer un fichier de 800 pixels. Générez plusieurs largeurs et laissez le navigateur choisir :

<img src="chair-800.webp"
     srcset="chair-400.webp 400w, chair-800.webp 800w, chair-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Ergonomic office chair" width="800" height="600">

sizes est une aide au choix, pas du style : il doit décrire la largeur d'emplacement que votre CSS produit réellement, sinon le navigateur prend le mauvais fichier. Vérifiez dans le panneau réseau, à quelques largeurs de fenêtre et densités différentes, quel fichier part vraiment.

Compressez, dimensionnez, différez

• Compressez chaque image avec un outil (Squoosh, ImageOptim, cwebp, jpegoptim). Les échelles de qualité ne sont pas normalisées entre formats, ni même entre encodeurs — essayez quelques réglages par image et jugez à l'œil, taille de fichier en regard. Au passage, retirez les métadonnées inutiles — un fichier photo peut contenir des coordonnées GPS et des horodatages — en vérifiant que l'orientation et les couleurs survivent.
• Déclarez des width et height corrects (ou réservez la place avec une boîte CSS bien dimensionnée et aspect-ratio) pour que le chargement des images ne puisse pas causer ce fameux saut de mise en page. De mauvaises dimensions font toujours bouger la page ; de bonnes dimensions éliminent cette source courante de CLS (le décalage de mise en page cumulé).
• Chargez en différé les images non critiques hors de la zone visible au départ avec loading="lazy" — les navigateurs les récupèrent un peu avant qu'elles deviennent visibles, selon leurs propres règles. Identifiez l'image LCP probable (le plus gros élément affiché au premier écran — souvent, pas toujours, la grande image d'accueil) : pas de chargement différé pour elle, gardez-la repérable dans le HTML initial, et n'envisagez fetchpriority="high" que mesures en main.
• Gardez l'accessibilité intacte : décrivez les images informatives selon leur rôle, donnez alt="" aux images décoratives, et n'enfermez jamais de texte essentiel dans une image.

Optimisez vos images et vous éliminez l'un des problèmes de performance les plus courants du web — et, sur les pages riches en images, souvent le plus gros.

Ce qu'il faut faire

1. Convertissez les photos vers le format qui ressort le plus petit à votre niveau de qualité, avec une solution de repli fidèle via <picture>.
2. Générez des largeurs adaptatives (candidates haute densité comprises), ajoutez srcset, et faites correspondre sizes à votre CSS réel.
3. Passez tout par un compresseur — jugé à l'œil, métadonnées retirées — avant l'envoi sur le serveur.
4. Ajoutez des width et height corrects à chaque image, loading="lazy" aux images non critiques hors écran, et protégez l'image LCP à la fois du chargement différé et d'une découverte tardive.
5. Re-mesurez : octets d'images transférés, quelle candidate srcset se charge, et LCP/CLS sur un téléphone représentatif — puis gardez ce que les chiffres valident.