Images adaptatives : comprendre srcset, sizes et la densité DPR

Séparer pixels du fichier, pixels CSS et densité

Un fichier de 800 pixels peut occuper un espace de 400 pixels CSS. Avec DPR 2, cet espace correspond à environ 800 pixels physiques. Ce calcul aide à planifier ; il ne retire pas au navigateur son choix final.

Calculez d'abord le minimum entre 800 et la largeur de fenêtre moins 32. Multipliez cet espace par DPR, pas la fenêtre entière si l'image occupe une colonne étroite.

Employer des largeurs quand la mise en page varie

Le descripteur w indique la largeur intrinsèque réelle du fichier, pas un seuil de mise en page. sizes décrit l'espace attendu. Ici, à partir de 832 pixels CSS, l'espace vaut 800 ; en dessous, on soustrait les deux marges.

Le CSS fourni appartient au même exemple. Si le composant passe dans une demi-colonne, corrigez sizes. Garder une ancienne largeur pleine peut provoquer un téléchargement excessif. Décrivez la mise en page, pas une liste d'écrans courants.

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

Prévoir un candidat puis contrôler le choix réel

Avec une fenêtre de 392 et DPR 2, l'espace vaut 360 et la cible 720 pixels ; 800w est un choix plausible. Sur écran large avec DPR 2, la cible vaut 1600. Le calcul explique les données de sélection sans imposer un fichier précis.

Le navigateur peut garder une grande image déjà chargée après réduction de la fenêtre. Testez une nouvelle page ou rechargez après réglage de la fenêtre et de DPR. Produisez de vrais fichiers de 400, 800 et 1600 pixels ; renommer le même fichier ne crée pas plusieurs résolutions.

• Mesurer la largeur réellement affichée de l'élément.
• Comparer currentSrc à la réponse image du panneau Réseau.
• Vérifier dimensions, type, cache et octets transférés.
• Tester fenêtres étroite et large avec DPR 1 et DPR 2.
• Rechercher débordement horizontal et déplacements au chargement.

Réserver les descripteurs x aux dimensions fixes

Un logo toujours affiché à 120 pixels CSS peut proposer un fichier de 120 en 1x et un de 240 en 2x. Ce sont des résolutions différentes pour un même espace fixe. Ne mélangez pas x et w dans un srcset.

Changer le cadrage est un autre choix graphique. Utilisez picture et des conditions source si le mobile demande un visage rapproché et le bureau une scène large. Le texte alternatif décrit le contenu significatif transmis au lecteur.

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

Prévoir le rapport de forme et le chargement

width et height réservent un espace proportionnel avant réception ; ils n'empêchent pas CSS d'adapter la largeur. Au format 4:3, 800 de large donnent 600 de haut ; 360 donnent 270.

Le chargement différé convient aux images éloignées, mais ne doit pas retarder sans raison l'image principale visible immédiatement. Candidats, compression, format et stratégie de chargement répondent à des coûts différents.

Mémoire décodée et poids réseau ne sont pas identiques. Un petit WebP peut produire un grand tampon de pixels. Calculez la mémoire à partir des dimensions et mesurez les octets du fichier compressé réel.

Contrôler le composant avant publication

Conservez ensemble largeurs, cadrage, proportions, qualité et sizes pour les mettre à jour avec la mise en page. Passer le maximum de 800 à 1000 exige une nouvelle revue des candidats.

Vérifiez src, chaque URL srcset, le texte alternatif et l'espace réservé. Reproduisez le tableau avec le calcul CSS et DPR, puis les hauteurs avec le rapport de forme. L'objectif est une concordance entre fichiers et affichage sur de vrais appareils.