# Image réactive > Image HTML qui propose plusieurs fichiers de tailles différentes, laissant le navigateur choisir le plus adapté selon la taille de l'écran et sa densité de pixels. - Auteur : Clément Hadrot - Publié le : 2026-09-25 - Mis à jour le : 2026-09-25 - URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/image-reactive/ 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 : ``` 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.