Images responsives : cas d'utilisation et snippets

Cet article détaillé d'Andreas Boven complète parfaitement l'introduction aux images responsives déjà publiée ici, en présentant des cas concrets d'utilisation et le code HTML correspondant. Très complet, technique mais clair!

Par

NdT : La Cascade a publié en mai dernier un article de présentation des images responsives et du nouvel élément <picture>, ce nouvel article le complète en présentant des cas concrets d'utilisation et le code HTML correspondant.

Introduction

Ça y est enfin, les images responsives deviennent véritablement une réalité sur le web - en pur HTML, sans hacks tordus. L'élément <picture> et quelques nouveaux attributs de l'élément <img> sont intégrés dans un flag de Chromium 37 (bientôt sur Opera), dans Firefox Nightly et sont en cours d'implémentation dans WebKit (il reste à voir si Apple le lancera avec sa prochaine version de Safari).

Le nouvel élément <picture> peut être verbeux et complexe, parce qu'il résout toute une série de cas d'utilisation. Pour vous aider à trouver la bonne syntaxe répondant à vos besoins, nous avons préparé cette liste d'exemples pratiques.

Quatre questions

Avant de commencer à utiliser les images responsives dans votre design, il vous faut toujours répondre à ces quatre questions :

  • La taille de mes images change-t-elle en fonction des règles que j'ai données à mon design responsif ?
  • Est-ce que je veux optimiser mes images pour les écrans haute-résolution ?
  • Est-ce que je souhaite utiliser différents types MIME pour les navigateurs compatibles ?
  • Est-ce que je veux modifier les images en fonction de facteurs contextuels ?

Dans les exemples qui suivent, nous nous référons à ces questions en utilisant les mots-clés taille, dpi, mime et art, respectivement, et pour chaque association de réponses à ces questions, nous montrons un snippet et une courte explication. En créant ces exemples, j'avais en tête ce superbe cliché nocturne de l'Opéra d'Oslo.


L'Opéra d'Oslo, bâtiment moderne tout de verre, illuminé de nuit et avançant dans la mer
L'Opéra d'Oslo de nuit.


À garder à l'esprit

Voici quelques infos à garder à l'esprit avant de passer aux exemples :

  • L'élément <picture> doit avoir pour dernier enfant l'élément <img>, sinon rien ne se passera. C'est bon pour l'accessibilité puisqu'on utilisera l'attribut habituel alt d'<img> pour le texte alternatif, et c'est bon en tant que solution de repli pour les navigateurs anciens, qui afficheront simplement l'élément <img>.
  • Pensez les attributs sizes et srcset de <picture> comme des substituts de src de <img>. Vérifiez currentSrc dans JavaScript pour voir ce que votre navigateur choisit. Les navigateurs anciens utiliseront <img src> bien sûr.
  • <img sizes="(max-width: 30em) 100vw ..."> dit ceci : “si cette media query est vraie, montrer l'image à une largeur de 100vw”. La première media query vraie l'emporte, ce qui signifie que l'ordre est important.


Direction artistique

tailledpimimeart

<picture>
    <source
        media="(min-width: 1024px)"
        srcset="opera-fullshot.jpg">
    <img
        src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>

Pour les écrans d'une largeur minimale de 1024px, une photo plein format est utilisée (fullshot), et une photo recadrée (closeup) pour les écrans plus petits.

Différents types d'images

tailledpimimeart

<picture>
    <source
        srcset="opera.webp"
        type="image/webp">
    <img
        src="opera.jpg" alt="The Oslo Opera House">
</picture>

Les navigateurs compatibles avec WebP reçoivent une image en format WebP, les autres reçoivent un JPG.

Différents types d'images et direction artistique

tailledpimimeart

<picture>
    <source
        media="(min-width: 1024px)"
        srcset="opera-fullshot.webp"
        type="image/webp">
    <source
        media="(min-width: 1024px)"
        srcset="opera-fullshot.jpg">
    <source
        srcset="opera-closeup.webp"
        type="image/webp">
    <img
        src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>

Pour les écrans d'une largeur minimale de 1024px, une photo plein format est utilisée (fullshot), et une photo recadrée (closeup) pour les écrans plus petits. Cette photo est proposée en format WebP aux navigateurs compatibles, en JPG aux autres.

Images HD

tailledpimimeart

<img src="opera-1x.jpg" alt="The Oslo Opera House"
     srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">

Sur un terminal à écran haute-définition, le navigateur reçoit une image HD, sinon une image normale.

Images HD et direction artistique

tailledpimimeart

<picture>
    <source
        media="(min-width: 1024px)"
        srcset="opera-fullshot-1x.jpg 1x,
                opera-fullshot-2x.jpg 2x,
                opera-fullshot-3x.jpg 3x">
    <img
        src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
        srcset="opera-closeup-2x.jpg 2x,
                opera-closeup-3x.jpg 3x">
</picture>

Pour les écrans d'une largeur minimale de 1024px, une photo plein format est utilisée (fullshot), et une photo recadrée (closeup) pour les écrans plus petits. Cette photo est proposée en format HD pour les terminaux à écran haute-résolution, et en format normal pour les autres.

Images HD et différents types d'images

tailledpimimeart

<picture>
    <source
        srcset="opera-1x.webp 1x,
                opera-2x.webp 2x,
                opera-3x.webp 3x"
        type="image/webp">
    <img
        src="opera-1x.jpg" alt="The Oslo Opera House"
        srcset="opera-2x.jpg 2x,
                opera-3x.jpg 3x">
</picture>

Sur un terminal à écran haute-définition, le navigateur reçoit une image HD de 2 ou 3 fois le nombre de pixels, sinon une image normale. Ces photos sont proposées en format WebP aux navigateurs compatibles, en JPG aux autres.

Images HD, différents types d'images et direction artistique

tailledpimimeart

<picture>
    <source
        media="(min-width: 1024px)"
        srcset="opera-fullshot-1x.webp 1x,
                opera-fullshot-2x.webp 2x,
                opera-fullshot-3x.webp 3x"
        type="image/webp">
    <source
        media="(min-width: 1024px)"
        srcset="opera-fullshot-1x.jpg 1x,
                opera-fullshot-2x.jpg 2x,
                opera-fullshot-3x.jpg 3x">
    <source
        srcset="opera-closeup-1x.webp 1x,
                opera-closeup-2x.webp 2x,
                opera-closeup-3x.webp 3x"
        type="image/webp">
    <img
        src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
        srcset="opera-closeup-2x.jpg 2x,
                opera-closeup-3x.jpg 3x">
</picture>

Pour les écrans d'une largeur minimale de 1024px, une photo plein format est utilisée (fullshot), et une photo recadrée (closeup) pour les écrans plus petits. De plus, sur un terminal à écran haute-définition, le navigateur reçoit une image HD de 2 ou 3 fois le nombre de pixels, sinon une image normale. Enfin, ces photos sont proposées en format WebP aux navigateurs compatibles, en JPG aux autres.

Redimensionnement d'image

tailledpimimeart

<img
    src="opera-fallback.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-200.jpg 200w,
            opera-400.jpg 400w,
            opera-800.jpg 800w,
            opera-1200.jpg 1200w">

Les terminaux ayant une largeur minimale de 640px reçoivent une photo occupant 60% de la largeur de l'écran (60vw). Pour les autres, la photo occupe toute la largeur de l'écran (100vw). Le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px et 1200px) en fonction des dimensions et de la résolution de l'écran.

Redimensionnement et direction artistique

tailledpimimeart

<picture>
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.jpg 200w,
            opera-fullshot-400.jpg 400w,
            opera-fullshot-800.jpg 800w,
            press-fullshot-1200.jpg 1200w">
<img
    src="opera-fallback.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.jpg 200w,
            opera-closeup-400.jpg 400w,
            opera-closeup-800.jpg 800w,
            opera-closeup-1200.jpg 1200w">

Pour les écrans d'une largeur minimale de 1280px, une photo plein format est utilisée, affichée à 50% de la largeur du viewport. Si la largeur de l'écran est comprise entre 640 et 1279px, la photo est affichée à 60% de la largeur de l'écran, et pour les écrans plus petits la photo est affichée à 100% de la largeur du viewport. Dans tous les cas, le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px et 1200px) en fonction des dimensions et de la résolution de l'écran.

Redimensionnement et différents types d'images

tailledpimimeart

<picture>
    <source
        srcset="opera-200.webp 200w,
                opera-400.webp 400w,
                opera-800.webp 800w,
                opera-1200.webp 1200w"
        type="image/webp">
    <img
        src="opera-fallback.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.jpg 200w,
                opera-400.jpg 400w,
                opera-800.jpg 800w,
                opera-1200.jpg 1200w">
</picture>

Les terminaux ayant une largeur minimale de 640px reçoivent une photo occupant 60% de la largeur de l'écran (60vw). Pour les autres, la photo occupe toute la largeur de l'écran (100vw). Le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px et 1200px) en fonction des dimensions et de la résolution de l'écran. Ces photos sont proposées en format WebP aux navigateurs compatibles, en JPG aux autres.

Redimensionnement, différents types d'images et direction artistique

tailledpimimeart

<picture>
    <source
        media="(min-width: 1280px)"
        sizes="50vw"
        srcset="opera-fullshot-200.webp 200w,
                opera-fullshot-400.webp 400w,
                opera-fullshot-800.webp 800w,
                opera-fullshot-1200.webp 1200w"
        type="image/webp">
    <source
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-closeup-200.webp 200w,
                opera-closeup-400.webp 400w,
                opera-closeup-800.webp 800w,
                opera-closeup-1200.webp 1200w"
        type="image/webp">
    <source
        media="(min-width: 1280px)"
        sizes="50vw"
        srcset="opera-fullshot-200.jpg 200w,
                opera-fullshot-400.jpg 400w,
                opera-fullshot-800.jpg 800w,
                opera-fullshot-1200.jpg 1200w">
    <img
        src="opera-fallback.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-closeup-200.jpg 200w,
                opera-closeup-400.jpg 400w,
                opera-closeup-800.jpg 800w,
                opera-closeup-1200.jpg 1200w">
</picture>

Pour les écrans d'une largeur minimale de 1280px, une photo plein format est utilisée, affichée à 50% de la largeur du viewport. Si la largeur de l'écran est comprise entre 640 et 1279px, la photo est affichée à 60% de la largeur de l'écran, et pour les écrans plus petits la photo est affichée à 100% de la largeur du viewport. Dans tous les cas, le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px et 1200px) en fonction des dimensions et de la résolution de l'écran. Ces photos sont proposées en format WebP aux navigateurs compatibles, en JPG aux autres.

Redimensionnement et images HD

tailledpimimeart

<img
    src="opera-fallback.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-200.jpg 200w,
            opera-400.jpg 400w,
            opera-800.jpg 800w,
            opera-1200.jpg 1200w,
            opera-1600.jpg 1600w,
            opera-2000.jpg 2000w">

Les terminaux ayant une largeur minimale de 640px reçoivent une photo occupant 60% de la largeur de l'écran (60vw). Pour les autres, la photo occupe toute la largeur de l'écran (100vw). Le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px, 1200px, 1600px et 2000px) en fonction des dimensions et de la résolution de l'écran.

Redimensionnement, images HD et direction artistique

tailledpimimeart

<picture>
    <source
        media="(min-width: 1280px)"
        sizes="50vw"
        srcset="opera-fullshot-200.jpg 200w,
                opera-fullshot-400.jpg 400w,
                opera-fullshot-800.jpg 800w,
                opera-fullshot-1200.jpg 1200w,
                opera-fullshot-1600.jpg 1600w,
                opera-fullshot-2000.jpg 2000w">
    <img
        src="opera-fallback.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-closeup-200.jpg 200w,
                opera-closeup-400.jpg 400w,
                opera-closeup-800.jpg 800w,
                opera-closeup-1200.jpg 1200w,
                opera-closeup-1600.jpg 1600w,
                opera-closeup-2000.jpg 2000w">
</picture>

Pour les écrans d'une largeur minimale de 1280px, une photo plein format est utilisée, affichée à 50% de la largeur du viewport. Si la largeur de l'écran est comprise entre 640 et 1279px, la photo est affichée à 60% de la largeur de l'écran, et pour les écrans plus petits la photo est affichée à 100% de la largeur du viewport. Dans tous les cas, le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px, 1200px, 1600px et 2000px) en fonction des dimensions et de la résolution de l'écran.

Redimensionnement, images HD et différents types d'images

tailledpimimeart

<picture>
    <source
        srcset="opera-200.webp 200w,
                opera-400.webp 400w,
                opera-800.webp 800w,
                opera-1200.webp 1200w,
                opera-1600.webp 1600w,
                opera-2000.webp 2000w"
        type="image/webp">
    <img
        src="opera-fallback.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.jpg 200w,
                opera-400.jpg 400w,
                opera-800.jpg 800w,
                opera-1200.jpg 1200w,
                opera-1600.jpg 1600w,
                opera-2000.jpg 2000w">
</picture>

Les terminaux ayant une largeur minimale de 640px reçoivent une photo occupant 60% de la largeur de l'écran (60vw). Pour les autres, la photo occupe toute la largeur de l'écran (100vw). Le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px, 1200px, 1600px et 2000px) en fonction des dimensions et de la résolution de l'écran. Ces photos sont proposées en format WebP aux navigateurs compatibles, en JPG aux autres.

Redimensionnement, images HD, différents types d'images et direction artistique

tailledpimimeart

<picture>
    <source
        media="(min-width: 1280px)"
        sizes="50vw"
        srcset="opera-fullshot-200.webp 200w,
                opera-fullshot-400.webp 400w,
                opera-fullshot-800.webp 800w,
                opera-fullshot-1200.webp 1200w,
                opera-fullshot-1600.webp 1600w,
                opera-fullshot-2000.webp 2000w"
        type="image/webp">
    <source
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-closeup-200.webp 200w,
                opera-closeup-400.webp 400w,
                opera-closeup-800.webp 800w,
                opera-closeup-1200.webp 1200w,
                opera-closeup-1600.webp 1600w,
                opera-closeup-2000.webp 2000w"
        type="image/webp">
    <source
        media="(min-width: 1280px)"
        sizes="50vw"
        srcset="opera-fullshot-200.jpg 200w,
                opera-fullshot-400.jpg 400w,
                opera-fullshot-800.jpg 800w,
                opera-fullshot-1200.jpg 1200w,
                opera-fullshot-1600.jpg 1800w,
                opera-fullshot-2000.jpg 2000w">
    <img
        src="opera-fallback.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-closeup-200.jpg 200w,
                opera-closeup-400.jpg 400w,
                opera-closeup-800.jpg 800w,
                opera-closeup-1200.jpg 1200w,
                opera-closeup-1600.jpg 1600w,
                opera-closeup-2000.jpg 2000w">
</picture>

Pour les écrans d'une largeur minimale de 1280px, une photo plein format est utilisée, affichée à 50% de la largeur du viewport. Si la largeur de l'écran est comprise entre 640 et 1279px, la photo est affichée à 60% de la largeur de l'écran, et pour les écrans plus petits la photo est affichée à 100% de la largeur du viewport. Dans tous les cas, le navigateur opère son choix à partir d'une sélection d'images de largeurs différentes (200px, 400px, 800px, 1200px, 1600px et 2000px) en fonction des dimensions et de la résolution de l'écran. Ces photos sont proposées en format WebP aux navigateurs compatibles, en JPG aux autres.

Et ce n'est pas fini !

Si vous n'avez pas tout suivi, pas d'inquiétude ! Nous publierons bientôt un tutoriel approfondi sur <picture> et les images responsives.


Intéressé par le Responsive Web Design ? Retrouvez une liste des meilleurs articles et ressources du web.

Articles sur les mêmes thèmes dans la Cascade :

Images responsives, picture et srcset


original paru le dans Dev.Opera.

Sur l'auteur : est basé à Oslo, où il travaille en tant que Extensions Product Manager + Developer Relations pour Opera Software. On peut le suivre sur Twitter.

Traduit avec l'aimable autorisation de l'auteur.
Article original publié selon les termes de la licence Creative Commons Attribution 3.0 Unported.