- Images responsives : srcset, sizes et picture

Servir la bonne image au bon appareil est un défi moderne. Un smartphone ne devrait pas télécharger une image haute-résolution destinée au 4K. Mais un écran Retina doit recevoir une image assez détaillée.

Découvrez comment utiliser srcset, sizes et l'élément <picture> pour servir les images optimales à chaque utilisateur, améliorant ainsi la performance et l'expérience.

Pourquoi les images responsives ?

Chaque appareil a des caractéristiques différentes :

Avantages des images responsives :

• Performance : servir la taille exacte réduit les data
• Économies : moins de bande passante = moins de coûts CDN
• UX : pages plus rapides = utilisateurs plus heureux
• SEO : vitesse affecte le classement Google

L'attribut srcset : résolutions multiples

Syntaxe de base

<!-- Servir différentes images selon la résolution -->
<img
    src="image-small.jpg"
    srcset="image-small.jpg 1x,
            image-large.jpg 2x"
    alt="Image responsive"
    width="400"
    height="300"
/>

Comment ça fonctionne :

• 1x : écrans standard (iPhone 11, Desktop)
• 2x : écrans Retina (iPhone 12/13, MacBook Retina)
• 3x : high-end phones (iPhone 14 Pro)

Utiliser largeur en pixel (descripteurs w)

<!-- Meilleur approche : décrire les largeurs disponibles -->
<img
    src="image-400w.jpg"
    srcset="image-400w.jpg 400w,
            image-800w.jpg 800w,
            image-1200w.jpg 1200w,
            image-1600w.jpg 1600w"
    alt="Image responsive"
    width="400"
    height="300"
/>

Le navigateur choisit automatiquement la meilleure version selon :

• La largeur du viewport
• Le pixel ratio de l'écran
• La densité de pixels disponible

Combiner 1x/2x et résolutions

<!-- Approche hybride (moins courant) -->
<img
    src="image.jpg"
    srcset="image-1x.jpg 1x,
            image-2x.jpg 2x"
    alt="Image"
    width="400"
    height="300"
/>

L'attribut sizes : contexte de largeur

Indiquer la taille réelle de l'image

<!-- Sans sizes : le navigateur ne sait pas la largeur de l'image -->
<img
    src="image-400w.jpg"
    srcset="image-400w.jpg 400w,
            image-800w.jpg 800w"
    alt="Image"
/>

<!-- Avec sizes : le navigateur peut calculer correctement -->
<img
    src="image-400w.jpg"
    srcset="image-400w.jpg 400w,
            image-800w.jpg 800w"
    sizes="100vw"  <!-- L'image occupe 100% de la largeur du viewport -->
    alt="Image"
/>

Multiples breakpoints avec media queries

<img
    src="image-small.jpg"
    srcset="image-400w.jpg 400w,
            image-800w.jpg 800w,
            image-1200w.jpg 1200w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 1200px) 50vw,
           800px"
    alt="Image responsive"
    width="800"
    height="600"
/>

Interprétation :

• Mobile (≤600px) : l'image fait 100% de la largeur
• Tablette (601-1200px) : l'image fait 50% de la largeur
• Desktop (>1200px) : l'image fait 800px fixe

Avec gaps et margins

<!-- Dans un conteneur avec padding/gap -->
<img
    src="image.jpg"
    srcset="image-400w.jpg 400w,
            image-800w.jpg 800w,
            image-1200w.jpg 1200w"
    sizes="(max-width: 768px) calc(100vw - 2rem),
           (max-width: 1200px) calc(100vw - 4rem),
           80vw"
    alt="Image dans conteneur"
    width="800"
    height="600"
/>

<style>
img {
    max-width: 100%;
    height: auto;
    padding: 1rem;
}
</style>

Combiner srcset et sizes

Exemple complet : galerie responsive

<img
    src="photo-400w.jpg"
    srcset="photo-400w.jpg 400w,
            photo-800w.jpg 800w,
            photo-1200w.jpg 1200w,
            photo-1600w.jpg 1600w"
    sizes="(max-width: 640px) 100vw,
           (max-width: 1024px) 50vw,
           (max-width: 1280px) calc(100vw / 3),
           400px"
    alt="Photo galerie"
    width="400"
    height="300"
/>

Cas d'usage : article avec featured image

<!-- Image en haut d'article : pleine largeur -->
<img
    src="article-hero-800w.jpg"
    srcset="article-hero-600w.jpg 600w,
            article-hero-1000w.jpg 1000w,
            article-hero-1200w.jpg 1200w"
    sizes="(max-width: 768px) 100vw,
           (max-width: 1024px) 90vw,
           900px"
    alt="Article hero image"
    width="900"
    height="500"
    class="img-fluid"
/>

L'élément picture : art direction

Changer l'image complètement selon l'écran

<!-- Mobile : crop serré, portrait -->
<!-- Desktop : image complète, paysage -->
<picture>
    <source
        media="(max-width: 768px)"
        srcset="hero-mobile-400w.jpg 400w,
                hero-mobile-800w.jpg 800w"
        sizes="100vw"
    />
    <source
        media="(min-width: 769px)"
        srcset="hero-desktop-800w.jpg 800w,
                hero-desktop-1600w.jpg 1600w"
        sizes="100vw"
    />
    <img
        src="hero-desktop-800w.jpg"
        alt="Hero image"
        width="1600"
        height="600"
    />
</picture>

Exemple : bannière responsif

<picture class="hero-banner">
    <!-- Très petit écran -->
    <source
        media="(max-width: 480px)"
        srcset="banner-tiny.jpg 480w"
    />

    <!-- Petit écran (mobile) -->
    <source
        media="(max-width: 768px)"
        srcset="banner-small-768w.jpg 768w,
                banner-small-1024w.jpg 1024w"
    />

    <!-- Moyen écran (tablette) -->
    <source
        media="(max-width: 1024px)"
        srcset="banner-medium-1024w.jpg 1024w,
                banner-medium-1280w.jpg 1280w"
    />

    <!-- Grand écran (desktop) -->
    <source
        media="(min-width: 1025px)"
        srcset="banner-large-1280w.jpg 1280w,
                banner-large-1920w.jpg 1920w,
                banner-large-2560w.jpg 2560w"
    />

    <!-- Fallback -->
    <img
        src="banner-large-1920w.jpg"
        alt="Hero banner"
        width="1920"
        height="600"
    />
</picture>

Picture avec srcset avancé

Combining picture et srcset (meilleure pratique)

<picture>
    <!-- WebP pour navigateurs modernes -->
    <source
        type="image/webp"
        srcset="image-400w.webp 400w,
                image-800w.webp 800w"
        sizes="(max-width: 600px) 100vw, 50vw"
    />

    <!-- Fallback JPEG -->
    <source
        type="image/jpeg"
        srcset="image-400w.jpg 400w,
                image-800w.jpg 800w"
        sizes="(max-width: 600px) 100vw, 50vw"
    />

    <!-- Fallback ultime -->
    <img
        src="image-400w.jpg"
        alt="Image responsive"
        width="400"
        height="300"
    />
</picture>

Cet exemple :

• Utilise WebP si supporté (plus léger)
• Fallback sur JPEG
• Combine picture (formats) et srcset (résolutions)
• Ajuste la taille avec sizes selon le viewport

WebP et formats modernes

Supporter WebP avec fallback

<picture>
    <!-- WebP (plus léger) -->
    <source type="image/webp" srcset="image.webp"/>

    <!-- Fallback PNG/JPEG -->
    <img src="image.png" alt="Image"/>
</picture>

Avantages de WebP

• Taille 25-35% plus petite que JPEG à qualité équivalente
• Animation comme GIF mais plus léger
• Supporté par 95%+ des navigateurs modernes

Générer du WebP depuis JPEG/PNG

# Avec ImageMagick
convert image.jpg -quality 80 image.webp

# Avec cwebp (outil Google)
cwebp -q 80 image.jpg -o image.webp

# Avec Node.js
npm install sharp
# Voir documentation Sharp

Optimisations et bonnes pratiques

Checklist optimisation

• ✅ Utiliser descripteurs w plutôt que x
• ✅ Toujours inclure sizes avec media queries
• ✅ Fournir un fallback src
• ✅ Définir width/height sur img pour éviter CLS
• ✅ Utiliser WebP avec JPEG fallback
• ✅ Combiner avec lazy loading (loading="lazy")
• ✅ Tester avec DevTools Network tab

Exemple complet optimisé

<picture>
    <!-- WebP responsive -->
    <source
        type="image/webp"
        srcset="product-400w.webp 400w,
                product-800w.webp 800w,
                product-1200w.webp 1200w"
        sizes="(max-width: 640px) 100vw,
               (max-width: 1024px) 50vw,
               33vw"
    />

    <!-- JPEG fallback -->
    <source
        type="image/jpeg"
        srcset="product-400w.jpg 400w,
                product-800w.jpg 800w,
                product-1200w.jpg 1200w"
        sizes="(max-width: 640px) 100vw,
               (max-width: 1024px) 50vw,
               33vw"
    />

    <!-- Fallback image -->
    <img
        src="product-400w.jpg"
        alt="Product image"
        width="400"
        height="300"
        loading="lazy"
        class="product-image"
    />
</picture>

Conclusion

Résumé :

• srcset + sizes : pour différentes résolutions
• picture : pour art direction et formats (WebP vs JPEG)
• Toujours define width et height
• Combiner avec loading="lazy" pour performance maximale
• Tester avec DevTools et Google PageSpeed Insights