Depuis mon dernier article sur le sujet, Test de Picture Fill pour des images responsives, Picture Fill a évolué. L’outil est toujours aussi simple à mettre en place et aussi efficace au niveau des performances, il s’est juste adapté aux nouvelles normes HTML5 définies par le W3C. J’entends par là l’ajout d’attributs permettant à la balise img de supporter plusieurs images selon la taille support :

• srset, définissant les différentes images à charger selon la résolution d’écran et la densité de pixels
• sizes, définissant les différents points de rupture

Dans l’attente que ces nouveaux attributs se démocratisent, qu’ils soient interprétés par tous les navigateurs, la nouvelle version de Picture Fill s’est adaptée et intègre parfaitement le format requis. Dorénavant, l’intégration du script se fait de la manière suivante :

<img sizes="100vw"
srcset="images/01-small.jpg 300w, images/01-medium.jpg 640w, images/01-large.jpg 1024w, images/01-extralarge.jpg 1280w"
alt="Ponton à Cancale (Port de pêche en Bretagne)" />

Au cas où le javascript n’est pas interprété par le navigateur, il faut prévoir une balise noscript, dans laquelle vous insérez votre balise img par défaut :
<noscript>
<img src="images/01-small.jpg" alt="Ponton à Cancale (Port de pêche en Bretagne)">
</noscript>

Vous trouverez une démo fonctionnelle du script ici (amusez-vous à réduire votre fenêtre de navigateur pour le tester).

Cet exemple ne tient pas compte de la densité de pixel du contenant (pour un écran Retina par exemple). La syntaxe y est donc nettement simplifiée, si vous souhaitez en savoir plus, je vous propose de vous reporter à l’article de Eric Portis, toujours d’actualité, Srcset and sizes. Peut-être un jour, je me pencherais sur une explication de la gestion de la densité avec sizes et srcset, faites-le moi savoir en commentaire si cela vous intéresse !

Gérer les images ainsi sur son site Internet avec Picture Fill est donc beaucoup plus Responsive et W3C like !
Mais en pratique, il y a quand même une limite rencontrée avec Picture Fill. En effet, aujourd’hui, la grande majorité des sites Internet sont gérés avec des CMS tel que WordPress et quand un webmestre ajoute des images dans son contenu, il est alors impossible de gérer un tel affichage des images via l’éditeur de texte. En farfouillant sur la toile, j’ai trouvé hier un plugin WordPress reprenant PictureFill. Chers lecteurs, je pense le tester rapidement et je vous ferai part de mon retour d’expérience dans un prochain article 😉