Conception d’images responsives 2025 — Guide pratique srcset/sizes

Publié: 18 sept. 2025 · Temps de lecture: 4 min · Par la rédaction de Unified Image Tools

translated: true Introduction

Les images responsives ne se résument pas à « proposer plusieurs tailles ». L’essentiel est d’aligner sizes sur le layout pour fournir de bons indices à l’algorithme de sélection du navigateur. Voici un guide opérationnel et concret.

Commencer par sizes (le cœur)

L’attribut sizes déclare « dans telle condition, la largeur d’affichage est X ». S’il est correct, le navigateur choisit le meilleur candidat du srcset.

// Mise en page d’article en une colonne (max. 768px)
// ≤768px: 100vw ; au-delà: 768px fixe
sizes="(max-width: 768px) 100vw, 768px"

// Cartes 2→3 colonnes (≈ 46vw/31vw effectifs avec les espacements)
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 46vw, 31vw"

Des largeurs représentatives par pas de 1,5–2× sont faciles à gérer. Ex.: 480/720/960/1280/1536.

Un build au service de srcset

Automatisez la génération de srcset pour éviter les erreurs humaines. Exemple Sharp :

import sharp from 'sharp'
const WIDTHS = [480, 720, 960, 1280, 1536]
async function buildSet(input: string, base: string) {
  for (const w of WIDTHS) {
    await sharp(input).resize({ width: w, withoutEnlargement: true })
      .webp({ quality: 78 })
      .toFile(`${base}-${w}.webp`)
  }
}

Avec Next.js Image, il suffit d’écrire sizes correctement ; le reste est automatique. Détails : Flux de redimensionnement 2025 — Réduire 30–70 % en raisonnant depuis le layout.

LCP et preload

Pour un candidat LCP (image hero), en plus d’un sizes adéquat, pensez à :

• priority / fetchPriority="high"
• Preload : <link rel="preload" as="image" imagesrcset="..." imagesizes="...">
• Éviter la sur‑résolution (respecter la règle largeur‑plafond × DPR)

Les bases de la compression : Stratégie Ultime de Compression d'Images 2025 – Guide pratique pour optimiser la vitesse perçue sans sacrifier la qualité.

Direction artistique avec picture

Si l’aspect ou le cadrage varie selon la taille, utilisez picture :

<picture>
  <source media="(min-width: 1024px)" srcset="/hero-wide-1280.webp 1280w, /hero-wide-960.webp 960w" sizes="(min-width:1024px) 960px">
  <source media="(max-width: 1023px)" srcset="/hero-tall-720.webp 720w, /hero-tall-480.webp 480w" sizes="(max-width:1023px) 92vw">
  <img src="/hero-tall-720.webp" alt="...">
</picture>

Note : même avec picture, la philosophie de sizes ne change pas. Déclarez pour chaque media‑query la largeur d’affichage (px ou vw).

Icônes et SVG

• Pour logos/icônes simples, privilégiez le SVG. Couleurs CSS et media‑queries s’y appliquent facilement.
• Si un PNG est nécessaire, indiquez 1x/2x et séparez le srcset pour les petites tailles afin d’améliorer l’efficacité d’exécution.

<img src="/icons/icon-32.png" srcset="/icons/icon-32.png 1x, /icons/icon-64.png 2x" width="32" height="32" alt="">

Pour les icônes et manifestes PWA : Pack Favicon + Manifest et Générateur de favicon.

Erreurs fréquentes

• Laisser sizes à 100vw → en grille de cartes (≈33vw réels), sur‑téléchargement assuré.
• Oublier d’ajuster après un changement de breakpoints/colonnes → le poids grimpe après un redesign.
• Trop de largeurs représentatives → efficacité du cache en baisse, gains dilués.

Checklist (exploitation)

• [ ] Largeur max. et DPR définies pour chaque template
• [ ] sizes cohérent avec le layout (mesure Storybook/navigateur)
• [ ] priority appliqué aux images LCP si nécessaire
• [ ] 3–5 largeurs représentatives suffisent
• [ ] picture est‑il vraiment requis (essayer d’abord avec sizes)

Pour finir : optimisation globale du redimensionnement Flux de redimensionnement 2025 — Réduire 30–70 % en raisonnant depuis le layout, choix des formats Stratégies de conversion de formats 2025 — Guide WebP/AVIF/JPEG/PNG.

Diagnostic et débogage

• Dans Network (DevTools), vérifiez dimensions/poids réels (concordent‑ils ?).
• Dans Elements, contrôlez computed size / currentSrc de img (est‑ce que sizes agit ?).
• Variez la DPR (mobile/desktop), revalidez (détecter la sur‑téléchargement en 2x/3x).
• Identifiez le LCP dans Performance et profilez l’effet du preload.

Motifs applicatifs (composants)

• Recevoir le nombre de colonnes des grilles via props et générer sizes automatiquement.
• picture + media pour la direction artistique, synchronisés avec les breakpoints CSS en un seul endroit.
• Combiner loading="lazy" avec un timing d’intersection optimal pour maintenir CLS à 0.

Atelier : inventaire d’une page existante

1. Dégager les largeurs max (corps, sidebar, grilles de cartes)
2. Pour chaque image, définir le plafond de pixels et 3–5 largeurs représentatives
3. Prioriser les candidats LCP (avec preload/priority)
4. Mesurer transfert et LCP, ajuster les conditions de sizes

FAQ

• Q. À quel point détailler sizes ?
  • R. Limitez‑vous aux frontières où la largeur réelle change (breakpoints). 2–4 conditions sont faciles à maintenir.
• Q. Prioriser picture ou sizes ?
  • R. Essayez d’abord avec sizes. N’utilisez picture que pour la direction artistique.
• Q. Avec <Image> de Next.js, que faut‑il ?
  • R. Déclarer sizes correctement et, si besoin, priority/fetchPriority. srcset est généré automatiquement.