LES IMAGES PLOMBENT VOTRE SITE : FORMATS, TAILLES ET CHARGEMENT DIFFÉRÉ, EXPLIQUÉS

Quand je mesure un site lent, les images représentent en général 60 à 80 pour cent du poids de la page. Bonne nouvelle : c'est aussi le poste qui se corrige le plus vite, souvent sans toucher au reste.

Le problème en un exemple

Une photo de produit sortie d'un appareil récent : 4 000 pixels de large, 3,8 Mo. Elle s'affiche dans une vignette de 300 pixels sur mobile. Le téléphone télécharge les 3,8 Mo, les décode, puis en jette 99 pour cent. Multipliez par les vingt vignettes de la page : 76 Mo pour une page qui devrait en peser 2. Sur un site de boutique que j'ai repris, les grilles d'images pesaient 56 Mo ; elles pèsent 2,2 Mo aujourd'hui, pour un rendu identique.

1. La bonne taille

Une image doit être livrée à la taille où elle est affichée, deux fois plus large au maximum pour les écrans haute densité. Le navigateur sait choisir la bonne version si on lui en propose plusieurs (attribut srcset) : 480 pixels pour un téléphone, 960 pour une tablette, 1600 pour un grand écran. WordPress génère ces tailles automatiquement à l'envoi ; encore faut-il que le thème les utilise, ce qui n'est pas toujours le cas.

2. Le bon format

JPEG reste correct pour les photos, PNG ne sert qu'aux images avec transparence ou aux captures d'écran. WebP fait 25 à 35 pour cent plus léger que JPEG à qualité égale et fonctionne partout depuis 2020. AVIF va encore plus loin, 40 à 50 pour cent, mais se génère plus lentement. Pour un site classique : WebP partout, AVIF sur les grandes images d'en-tête si votre outil le permet. La qualité 80 est invisible à l'œil ; au-delà, vous payez du poids pour rien.

3. Le chargement différé

Une page produit avec quarante images n'a besoin que des quatre premières au chargement. Les autres se chargent quand le visiteur fait défiler. C'est un attribut (loading="lazy") que WordPress ajoute seul depuis 2020, sauf sur les images insérées par certains constructeurs de pages ou carrousels. Attention à l'inverse : ne jamais différer l'image d'en-tête, celle qui compte pour le LCP.

4. L'image d'en-tête

C'est celle que Google chronomètre. Elle doit être servie en priorité, à la bonne taille, en WebP, avec l'attribut de préchargement, et jamais en chargement différé. Sur mobile, on sert souvent une version recadrée en portrait plutôt que la version large réduite : deux fois moins de pixels, et un cadrage qui montre ce qui compte.

5. Les dimensions déclarées

Une image sans largeur ni hauteur déclarées fait sauter la mise en page à son arrivée : le texte descend, le bouton se déplace. C'est le signal CLS de Google, et le comportement le plus agaçant pour un visiteur qui allait cliquer. Deux attributs à ajouter, et rien ne bouge plus.

6. Les vidéos

Une vidéo d'en-tête de 30 Mo lue en boucle ruine tout le reste. Compressée correctement, elle pèse 3 à 5 Mo en 1080p ; sur mobile, une version 480p suffit et se charge en différé ; l'image de première frame s'affiche instantanément à la place. Une vidéo YouTube intégrée charge un lecteur de 500 Ko même si personne ne clique : une vignette qui ne charge le lecteur qu'au clic règle le problème.

Comment savoir où vous en êtes

Le poids total de la page et le nombre d'images sont dans l'audit gratuit, en trente secondes. Au-delà de 3 Mo pour une page d'accueil, il y a du travail ; au-delà de 10, c'est la priorité absolue. Reprendre une médiathèque de mille images se fait par script en une journée, pas à la main. C'est la première action de la prestation Site trop lent.

Questions fréquentes