Picturefill, un plugin intéressant pour les images responsive…

…en attendant <picture>…

Les media queries permettent de contrôler en responsive les images servies en CSS pour les différentes résolutions des appareils mobile/desktop, mais rien n’a été prévu pour les images servies directement dans le contenu de la page HTML (balise <img>).

Une spécification est en cours au W3C, l’élément picture, qui permettra à l’avenir de régler le problème en permettant de déclarer différentes sources d’images gérées par les media queries au sein même de la balise.

Cela pourrait ressembler à ça :

<picture width="500" height="500">
       <source media="(min-width: 45em)" src="large.jpg">
      <source media="(min-width: 18em)" src="med.jpg">
      <source src="small.jpg">
      <img src="small.jpg" alt="">
     <p>Texte accessible</p>
</picture>

Une autre spécification concurrente est également en cours : l’attribut srcset, qui s’intègre directement dans la balise déjà existante <img> :

<figure>
       <img src="a-rectangle.png" srcset="a-square.png 600w"  alt="Texte alternatif">
       <figcaption>Légende de l’image</figcaption>
</figure>

Un groupement de communautés de développeurs a été créé par le W3C, pour permettre à tout développeur d’avoir un endroit où échanger sur les différents sujets des standards. Cela permet également au W3C d’impliquer directement les gens qui font le web, et avoir un retour sur leur vision des choses.

C’est ainsi que le collectif RCIG (Responsive Images Community Group) s’est créé, pour travailler sur les solutions possibles pour les images responsive.

C’est cette communauté qui propose l’élément picture, alors que la communauté des développeurs côté navigateurs pousse pour la solution srcset.

Le RCIG, magnanime, a donc proposé un mix des deux spécifications en incorporant l’attribut srcset dans l’élément picture.

En attendant, il faut bien trouver des parades sur des projets concrets aujourd’hui, notamment quand les contraintes ne vous permettent pas d’avoir un domaine réservé aux mobiles/tablettes et vous obligent à travailler en mode responsive.

Picturefill est un polyfill permettant de tirer parti de cette future spécification. Il émule le comportement de l’élément picture à travers un système de div.

<div data-picture data-alt="Texte alternatif">
        <div data-src="small.jpg"></div>
        <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
        <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
        <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
        <!-- Fallback pour les navigateurs sans JS. Image par défaut. -->
        <noscript>
            <img src="external/imgs/small.jpg" alt="Texte alternatif">
        </noscript>
    </div>

Le script génèrera une balise img dans la div data-picture, à la fin de la liste dont la source sera choisie par les media-queries selon la résolution détectée. Il n’y a pas de limite au nombre de versions d’images possibles.

Il est également possible de mettre des commentaires conditionnels IE, si vous souhaitez un ciblage particulier pour Internet Explorer.

Vous pouvez tester le script à cette adresse : http://scottjehl.github.io/picturefill/

On peut déjà se rendre compte du principe en redimensionnant la fenêtre du navigateur.

Quelques limitations tout de même : le plugin ne  marche que sur les navigateurs comprenant les media queries (exit IE jusqu’au 8). Quand ce n’est pas le cas, c’est la première image de la liste qui sera servie par défaut. Vous trouverez ci-dessous, le tableau récapitulatif des supports :