Image réactive

Envoyer une même photo en très haute résolution à un téléphone comme à un grand écran gaspille inutilement de la bande passante sur mobile, sans pour autant garantir une netteté suffisante sur un écran plus grand ou plus dense. La solution ne consiste pas à choisir une seule taille de compromis, mais à en proposer plusieurs et laisser le navigateur trancher.

Les attributs en jeu

L’attribut srcset liste les variantes disponibles avec leur largeur réelle, et sizes indique l’espace que l’image occupera réellement dans la mise en page :

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Vue du jardin en été">

WordPress génère automatiquement ce balisage depuis la version 4.4 : chaque image téléversée dans la médiathèque est redimensionnée en plusieurs tailles, puis wp_get_attachment_image() ou l’affichage natif d’un bloc image compose lui-même les attributs srcset et sizes correspondants.

Bon à savoir

• L’attribut src reste indispensable comme valeur de repli pour les très anciens navigateurs qui ne comprennent pas srcset.
• Ce mécanisme se combine naturellement avec loading="lazy", que WordPress ajoute lui aussi automatiquement aux images situées hors de la zone visible initiale.
• Le filtre wp_calculate_image_sizes permet d’ajuster manuellement la valeur de l’attribut sizes quand la mise en page réelle du thème diverge de l’estimation générique calculée par défaut.
• Une image censée occuper toute la largeur de l’écran sur mobile mais une colonne étroite sur ordinateur doit décrire ces deux cas dans l’attribut sizes, sans quoi le navigateur peut choisir une variante trop petite ou inutilement lourde.