Introduction aux images responsives 6 : élément picture

Nous nous sommes concentrés jusqu'à présent sur les questions liées au changement de résolution. Il est temps maintenant de passer à l’autre apport des nouveaux standards, la direction artistique.

Par

Dans les parties 3, 4 et 5, nous nous sommes concentrés sur les questions liées au changement de résolution. Il est temps maintenant de passer à l’autre apport des nouveaux standards, la direction artistique.

L’élément <picture> — en particulier l’attribut media — a été conçu pour faciliter la direction artistique.

L’élément <picture> contient une série d’éléments enfants <source>, suivis par l’élément <img> qui est obligatoire. Les éléments <source> fonctionnent de la même façon que les <sources> de l’élément vidéo.

<picture>
  <source media="(min-width: 900px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

Chaque source a un attribut srcset requis et des attributs optionnels, dont media, sizes et type. Sur un élément <source>, sizes et srcset fonctionnent exactement comme sur un élément <img>.

Concentrons-nous pour l’instant sur l’attribut media.

L’attribut media

La valeur de l’attribut media est une media query. À la différence de la condition media utilisée par l’attribut sizes, il s’agit de la bonne vieille media query que nous connaissons bien.

Lorsque le navigateur lit la liste des éléments source, il utilise la première media query correspondant à l’état présent du viewport.

C’est la raison pour laquelle l’élément <picture> couplé à l’attribut media est parfait pour la direction artistique. Dans ce cas d’usage, les designers ont besoin de s’assurer que l’image utilisée avec une dimension particulière de viewport est exactement celle dont ils ont besoin, faute de quoi le design ne fonctionnerait pas.

Voyons cela en action.

Exemple d’utilisation de l’élément picture

Shopify utilise l’élément <picture> pour la direction artistique. La page d’accueil de Shopify met en valeur une de leurs consommatrices, Corrine Anestopoulos, fondatrice de la bijouterie Biko.

lorsqu'on redimensionne la fenêtre, l'image est recadrée

Sur des écrans étroits, la photo de Mademoiselle Anestopoulos est recadrée. La photo n’étant plus simplement réduite, il s’agit d’une direction artistique.

Le markup utilisé par Shopify combine l’élément <picture> et les descripteurs de densité d’affichage. J’ai simplifié le markup en supprimant les longs chemins d’accès aux images et voici ce que cela donne :

<picture>
  <source srcset="[email protected], [email protected] 2x"       
      media="(min-width: 990px)">
  <source srcset="[email protected], [email protected] 2x" 
      media="(min-width: 750px)">
  <img srcset="[email protected], [email protected] 2x" 
   alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

Si l’on regarde le code un peu plus en détail, nous voyons que Shopify utilise trois points de rupture (breakpoints). L’image a une largeur fixe à chaque breakpoint — elle saute de taille en taille au lieu de se réduire de manière flexible entre chaque breakpoint.

Du fait que l’image est fixe, les descripteurs de densité d’affichage srcset prennent tout leur sens. Pour chaque breakpoint, Shopify a défini un fichier source 1× et 2× :

  • <source … media="(min-width: 990px)"> — La plus grande largeur, que Shopify appelle desktop, est la première source. L’attribut media indique au navigateur que cette source ne doit être utilisée que si la largeur du viewport est supérieure ou égale à 990 pixels.
  • <source … media="(min-width: 750px)"> — La seconde source, l’image pour les tablettes, sera utilisée pour les viewports de largeur supérieure ou égale à 750 pixels. La première source prenant effet à 990 pixels et le navigateur choisissant la première source qui correspond à l’état présent du viewport, la portée effective de la seconde source est de 750 à 989 pixels.
  • <img> — Si aucune des deux sources ne correspond, cela signifie que la largeur du viewport est inférieure à 750 pixels. Dans ce cas, on utilise le srcset de l’élément <img>. Cette image “pour les mobiles” est l’image recadrée utilisée pour les petits écrans.

Si les images étaient flexibles au lieu d’avoir une largeur fixe, Shopify aurait pu utiliser <picture> avec les descripteurs de largeur srcset à la place des descripteurs de densité d’affichage.

Une astuce finale

Si vous avez choisi la direction artistique, vous avez besoin de l’élément <picture>. Mais les auteurs de la spécification picture ont un dernier cadeau à nous offrir et il est de taille.

Dans la 7e partie de cette série : type, vous découvrirez un nouveau monde excitant de formats d’images.

La liste des articles de cette série (en cours) :

  1. Définitions
  2. Img requise
  3. Densité d’affichage srcset
  4. Descripteurs de largeur srcset
  5. Dimensions
  6. Élément picture
  7. Type
  8. Images responsives CSS
  9. Points de rupture image

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
Images responsives : cas d’utilisation et snippets


original paru le dans Cloud Four Blog.

Sur l’auteur : passe bien trop de temps à réfléchir sur l’univers mobile. Il a fondé Mobile Portland, une organisation à but non lucratif qui se consacre à éduquer, promouvoir et soutenir la communauté mobile de Portland. Co-fondateur de Cloud Four, il est aussi co-auteur de Head First Mobile Web et il donne de nombreuses conférences sur la technologie et la stratégie mobiles. On peut le suivre sur Twitter, Facebook, Google+.

Traduit avec l’aimable autorisation de Cloud Four Blog et de l’auteur.
Copyright Cloud Four Blog © 2015.