Mettez à jour votre Picturefill !

Si vous êtes un peu à jour dans vos développements responsives, vous avez adopté le dernier standard pour les imagessrcset, sizes et éventuellement picture— et bien entendu l'excellent polyfill Picturefill qui apporte cette révolution à tous les navigateurs qui n'en disposent pas encore nativement. Si vous n'utilisez pas encore la version 2.3.1, la dernière stable à cet instant, dépêchez-vous de faire la mise à jour !

Si vous ne mettez pas à jour, les personnes qui visiteront votre site avec les dernières versions de développement de webkit[1] ou Microsoft Edge[2] ne verront tout simplement aucune image.

Avouez que ça peut être gênant.

Gênant au point que si trop de sites restent sur une ancienne version de Picturefill qui fait planter la fonctionnalité enfin disponible nativement, les navigateurs susnommés pourraient bien la désactiver, cette fonctionnalité native, de peur qu'on les accuse d'avoir mal fait leur travail et d'être la cause de ce soucis. Ce serait un méchant coup de frein pour ce standard si nécessaire au Web moderne.

Si vous n'êtes pas convaincus, lisez —en anglais— ces mots de Mat Marquis, chair du Responsive Issues Community Group[3] : Please Update Picturefill.

Allez, soyez sympa, mettez tout de suite à jour votre Picturefill, au moins[4] en 2.3.1.

Et si vous n'utilisez pas encore Picturefill, c'est que vous n'avez pas adopté le standard pour les images responsives, j'espère que ce billet attisera votre curiosité et que vous vous lancerez. En suivant ma formation éventuellement… 😉

Parce que franchement, le support des images responsives se développe vraiment, alors n'hésitez pas :

Browser support for feature “srcset“
Can I Use srcset?
Browser support for feature “picture“
Can I Use picture?

  1. On parle de versions « nightly » car elles sont compilées chaque nuit à partir des développements du jour. ↩︎

  2. Microsoft Edge —ex Spartan, qu'est-ce qu'on rigole avec les noms de code— est le futur remplaçant de Microsoft Internet Explorer, qui arrivera cet été avec Windows 10. Non, il n'y aura pas de Windows 9… mais c'est une autre histoire… ↩︎

  3. Issues et non plus images, parce qu'ils travaillent maintenant sur d'autres problématiques, dont les Media Queries liées aux éléments et non plus au viewport uniquement. ↩︎

  4. On ne sait jamais, la v3 en cours de développement sera peut-être sortie quand vous lirez ce billet. ↩︎


  1. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

  2. How do you deal with images that need to have a fluid width but fixed height?

    I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔

    Anything better?

  3. I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/

    True!

    But most images are currently not or badly optimized. 😔

    They would benefit a lot from an image CDN: resize, compression, modern formats, etc.