Images responsive avec Picturefill ou jQuery Picture

Il manquait dans mon précédent billet sur Jeet le traitement des images responsive. Ceci étant principalement dû au fait que le mix ne proposait pas d’amélioration côté images.

Images responsive, de quoi parlons-nous ?

Le but d’images responsive est de pouvoir servir la bonne résolution, taille d’images en fonction du support utilisé pour consulter celles-ci. Aux ordinateurs de bureau disposant de large écran des images de plus de 800 pixels par exemple et aux mobiles, pour lesquels la bande passante est encore plus préciseuse, une plus petite image de 400 pixels de large par exemple.

Vous le savez ou pas, il a été proposé au W3C l’adoption d’une balise <picture> pour pouvoir gérer correctement les images et autres photos correctement sur n’importe quelle taille de support.

L’adoption d’une proposition étant toujours un processus assez long au niveau W3C, quelques librairies Javascript sont venus pointer le bout de leur nez pour combler le fossé. Il y a même un collectif « Responsive Images Community Group » créé par des développeurs pour l’occasion.

Plusieurs version des recommandations sont disponibles pour le moment en attendant la spécification finale.

La recommandation officielle W3C du 26 février 2013.
Celle plus récente du collectif RICG du 05 novembre 2013.
La dernière du 14 avril 2014 toujours par le RICG.

jQuery Picture

Si vous utilisez jQuery, il peut être intéréssant d’opter pour jQuery Picture. Il pèse seulement 2KO, jQuery non compris bien sûr !

Bien que déjà ancien et pas vraiment mis à jour depuis, la compatibilité plutôt importante avec les navigateurs et la compatibilité avec les dernières versions de jQuery peuvent influencer le choix.

Compatibilité de jQuery Picture

Comme indiqué sur le site par l’auteur,

Navigateur	Statut	Description
Chrome	OK	Nickel.
Safari	OK	Nickel.
Mobile Safari	OK	Nickel sur iPhone, non testé sur iPad.
Firefox 10 OSX	OK	Nickel.
Firefox 6 OSX	OK	Testé sur une ancienne version de Firefox.
IE9	OK	L’auteur pensait que ça ne passerait pas mais si !
IE7/8	OK	IE7 et 8 ne supportent pas les media queries. Vous pouvez utiliser Respond pour le support des media queries sur ce genre de navigateurs.

Mise en œuvre de jQuery Picture

Il est possible d’utiliser jQuery Picture à la fois sur une balise <figure> valide ou la nouvelle proposition <picture> qui n’est pas encore valide, au cas ou vous vous souciez de validation HTML 5 de votre site.

Avant, il faut bien sûr appeler jQuery et jQuery Picture dans la page ou se trouves des images à rendre responsive.

Avec <figure>

Pour conserver un code valide, utilisez la balise <figure>.

<figure class="responsive" data-media="../assets/img/150.jpeg" data-media300="../assets/img/200.jpeg" data-media400="../assets/img/300.jpeg" data-media600="../assets/img/400.jpeg" title="Les jolis chats">
  <noscript>
    <img src="../assets/img/400.jpeg" alt="Les jolis chats">
  </noscript>
</figure>

Vous pouvez voir le résultat de ce code sur le lab Check my Website. Comme d’habitude avec ce qui est censé être responsive, n’hésitez pas à redimensionner votre navigateur pour voir les changements d’images se faire.

Avec <picture>

Si vous souhaitez au contraire vous rapprocher de la psécification à venir, utilisez plutôt la balise <picture>.

<picture alt="Les jolis chats">
  <source src="../assets/img/150.jpeg">
  <source src="../assets/img/200.jpeg" media="(min-width:300px)">
  <source src="../assets/img/300.jpeg" media="(min-width:400px)">
  <source src="../assets/img/400.jpeg" media="(min-width:600px)">
  <noscript>
    <img src="../assets/img/400.jpeg" alt="Les jolis chats">
  </noscript>
</picture>

Voir l’exemple sur le lab Check my Website.

Picturefill

Deux versions de PictureFill cohabitent désormais.

Utilisez la version 2 si vous souhaitez supporter nativement l’élément <picture>. Cette version inclut le support de matchMedia polyfill pour les navigateurs en ayant besoin comme IE9.

Utilisez la version 1 si vous souhaitez rester plus « conservateur » et offrir en fallback une images complète aux navigateurs non Javascript plutôt qu’un simle texte alt. Le balisage à utiliser est moins propre, basé sur des <span>. Cette version est également plus légère.

Nous allons nous concentrer pour cet article sur la version 2, très riche en possibilités et surtout beacoup plus simple en terme de balisage que la version 1.

Picturefill version 2

Pour utiliser Picturefill version 2, Il suffit de le télécharger et de positionner ces deux appels Javascript dans la partie <head></head>.

J’ai testé de mon côté ce code en le mettant dans <body></body> et cela fonctionne aussi. C’est normalement la bonne pratique pour les scripts JavaScript.

<script>
  // Picture element HTML5 shiv
  document.createElement( "picture" );
</script>
<script src="../picturefill2.min.js" async></script>

À noter que le script peut être chargé en asynchrone. Tout le reste n’est que variantes de balisage.

Picturefill version 2 avec balise <img>

Avec la balise <img>, vous êtes en terrain connu même si celle utilisée par Picturefill est plutôt une variante.

<img sizes="100%" srcset="http://placekitten.com/400/200 400w, http://placekitten.com/600/300 600w, http://placekitten.com/800/400 800w" alt="Les jolis petits chats">

sizes permet de préciser, à la manière de max-width, ma largeur maximale que doit prendre l’images par rapport au container qu’il la contient. Vous pouvez préciser des valeurs différentes en fonction du view port. Par exemple, sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%".
srcset permet tout simplement d’appeler les différentes images utilisées. il faut préciser pour chacune leur largeur en pixels. Par exemple, 600w signiifie une images de 600 pixels de large.

Pour comprendre exhaustivement ces réglages, vous pouvez lire cet article récent [en] expliquant bien tout ceci.

Le reste est géré par Picturefill. Avec les réglages précédents, il va sélectionner l’image permettant de toujours remplir la largeur de la colonne de l’article, quelque soit la largeur du navigateur utilisé. Vous pouvez voir le résultat de ce type de balisage sur le lab.

Picturefill version 2 avec balise <picture>

Si vous trouvez comme moi que le balisage avec <img> est un peu « prise de tête », optez alors pour celui avec la balise <picture>.

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="http://placekitten.com/800/400" media="(min-width: 600px)">
  <source srcset="http://placekitten.com/600/300" media="(min-width: 400px)">
  <source srcset="http://placekitten.com/400/200">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="http://placekitten.com/400/200" alt="Les jolis chats">
</picture>

Noter la conditionnelle pour IE9 qui permet de mettre en place les MatchMedia Polyfill. Le tout reste plutôt simple à coder.

C’est certainement ce dernier format qui devrait ressembler le plus à ce que devrait être la spécification <picture>.

Vous pouvez apprécier le résultat de ce balisage sur le lab.

À l’heure du choix

J’ai commencé par jQuery Picture il y a quelques temps pour la une de Wooster. Il faut dire que j’avais pas vraiment résussi à faire ce que je voulais avec la version 1 de Picturefill. Et aussi parce que le balisage à base de <span> n’est pas mon truc préféré !

Il est clair qu’aujourd’hui, je vais me tourner vers la version 2 de Picturefill qui devrait permettre la transition la plus en douceur possible vers la spécification finale des images responsives.