La gestion des images sur un projet responsive webdesign

Authors : Alterway

Préambule : Pour rendre un site responsive, il ne suffit pas d'ajouter 2 media queries et de rendre les images fluides. La problématique du responsive webdesign est beaucoup plus grande que ça ! L'illustration de Stéphanie Walter montre bien le chemin qu'il reste à faire... Toute fois, nous pouvons nous concentrer sur un point en particulier, les images. En effet, à chaque fois qu'un projet responsive webdesign commence, la question des images se pose, et il faut dire que c'est toujours une prise de tête...

Un sujet qui nous concerne tous !

Que l'on soit créa, dev front, intégrateur ou dev back, ce sujet nous concerne tous car nous intervenons à différents moments lors du processus de création d'un site web.

La problématique

Comment faire pour afficher les images sur les différents supports (mobile, tablette, desktop) de la façon la plus optimisée pour délivrer la meilleure expérience possible ? Le but étant d'éviter de pomper toute la bande passante ou le forfait data pour charger une page web :)

L'attribut srcset vs l'élément

srcset

​L'attribut srcset repose et complète la balise . En effet, srcset se base sur la taille et la densité de pixel (Retina ou HD) du 'device' pour charger une image adaptée. Exemple :

{{< highlight html >}} {{< /highlight >}}

Dans cette exemple, image.jpg est chargé par défaut et fait 1024px par 768px. Si le navigateur ne supporte pas srcset, alors il chargera image.jpg quelque soit la taille de l'écran. Pour les 'devices' supportant l'attribut c'est différent. Toujours dans cet exemple, si je suis sur un 'device' non Retina / non HD, alors image-320 sera chargée. Sur un 'device' Retina ou HD, image-640 sera chargée car le 2x après le 320w correspond à la densité de pixel de l'écran. Et vu que nous sommes sur du HD, nous sommes 2 fois plus grand. Le tableau de compatibilité de srcset : http://caniuse.com/#search=srcset

Picture

Nouvelle balise introduite avec HTML5. Elle se base sur la syntaxe des Media Queries pour télécharger une image différente en fonction de la taille de l'appareil. Exemple :

{{< highlight html >}} {{< /highlight >}}

** Explication du code : **D'abord, nous devons rajouter un hack pour IE 9 car ne supportant pas , il ne va pas chargé small.jpg situé dans ma balise #LesJoiesDuCode Ensuite, small.jpg est chargé par défaut puis si le 'device' à une largueur comprise entre 0px et 600px, medium.jpg sera chargé à la place de small.jpg. Entre 601px et 1200px, large.jpg sera chargé. Enfin, à partir de 1201px et plus, small.jpg sera chargé vu que c'est l'image par défaut et qu'il n'y a pas de source prévue au-delà de 1200px. Le tableau de compatibilité de : http://caniuse.com/#search=picture Comme vous pouvez le voir, srcset ou picture ne sont pas encore supportés par tous les navigateurs. Nous devons donc utiliser autre chose.

Alors comment fait-on ?

Différentes solutions existent en JS ou en PHP. Côté JS nous avons par exemple :

• antimoderate : C'est une librairie de chargement d'images progressives. Pour information, le site Medium implémente ce type de script.
• srcset-polyfill : En ce basant sur le markup du srcset, selon la taille de l'ecran, le script va faire appelle à une image de la bonne taille.
• picturefill : Un polyfill de

Côté PHP voici une liste non-exhaustive :

• Adaptive images [ http://adaptive-images.com/ ]
• Responsive breakpoints [ http://www.responsivebreakpoints.com/ ]
• Imagify [ https://imagify.io/fr ] et un article qui en parle Pour aller plus loin, je vous conseille la lecture des articles de Smashing Magazine et de Cloudinary.

En attendant la solution universelle, qu'est ce qu'on fait ?

Nous pouvons déjà optimiser les images. Elles sont de plus en plus présentent et de plus en plus volumineuses (Retina / HD). En effet, en 2014, une page web pesait environ 1.9 Mo, c'est +56% depuis 2011 et les images occupent 64.4% du poids total de la page. [ source -  slide 56 ] Il faut donc trouver un outil pour conserver le ratio poids / qualité. Il en existe plusieurs :

• Kraken.io
• Tiny PNG (mon préféré)
• Smush.it (outil Yahoo)
• Imagify Vous l'aurez compris, dans la course à l'octet, plus nous optimiserons les images, plus le site se chargera rapidement, plus il délivrera l'information vite et offrira une meilleure expérience à l'utilisateur. Pour aller plus loin sur l'optimisation d'image, je vous conseille la lecture de l'article "Optimisation des images" de Google.