Conception d’images responsives à l’ère du DPR & usage d’image-set 2025

La netteté “sans sur‑transfert” se gagne avec srcset/sizes et image-set().

TL;DR

• Éléments à largeur fixe → notation x (1x/2x). Largeur variable → notation w + sizes
• Arrières‑plans de texte/hero → image-set() pour basculer selon le DPR
• Limiter le débit; éviter le sur‑transfert même en forte densité
• Candidat LCP → fetchpriority="high"

Liens internes: Livraison d’images orientée INP 2025 — Protéger la performance perçue via decode/priority/coordination avec les scripts, Priorité d’image et Preload en 2025

Exemple HTML

<img
  src="/gallery/card-1x.avif"
  srcset="/gallery/card-1x.avif 1x, /gallery/card-2x.avif 2x"
  sizes="(max-width: 768px) 92vw, 360px"
  width="360" height="240" loading="lazy" decoding="async"
  alt="Carte" style="aspect-ratio: 3/2; object-fit: cover"
/>

Exemple CSS

.hero {
  background-image: image-set(
    url('/hero/cover-1x.avif') 1x type('image/avif'),
    url('/hero/cover-2x.avif') 2x type('image/avif'),
    url('/hero/cover-1x.webp') 1x type('image/webp')
  );
  background-size: cover;
  aspect-ratio: 3 / 1;
}

Bonnes pratiques

• sizes aligné sur la largeur rendue réelle
• 3x avec parcimonie et seulement s’il y a bénéfice visuel
• Mesurer octets et qualité perçue

FAQ

• Q: Comment estimer sizes ? A: À partir de la largeur du conteneur et des breakpoints; valider dans DevTools.

Résumé

Netteté visible sans sur‑transfert = srcset/sizes justes + image-set().