English version of Binariz

Responsive design: quelle(s) stratégie(s) pour la gestion des images ?

responsive design

Ca y est ! Vous avez décidé que vos clients méritaient bien de pouvoir consulter votre site sur leur smartphone ou leur tablette numérique. Après moult tergiversations, vous avez abandonné l’idée de créer une version de votre site pour chaque taille d'écran existant.
Sage que vous êtes !

Non pas que la stratégie d’avoir un site mobile dédié soit une absurdité (cela fera sans doute l’objet d’un futur article sur Binariz). Mais disons que dans votre cas, cela n’est pas forcément nécessaire et vous n’avez de toute façon pas les ressources pour gérer un deuxième site mobile.

Vous avez donc décidé d’opter comme beaucoup d’autres pour la solution du « responsive design »: un seul et même site dont la mise en page s’adapte dynamiquement à la taille de l’écran. Votre site va enfin pouvoir être consulté sur tous les terminaux ou presque: mobile, tablette, TV, frigo et accessoirement ordinateur de bureau.

Pour vous simplifier la vie, vous choisissez un framework html/css responsive : au hasard Bootstrap, Foundation, Skeleton...
La liste est longue: 
5 responsive frameworks for more productive web design
15 New Responsive Web Frameworks

Pour info, Binariz.com utilise Gumby.

Vous commencez gentilment à mettre en place vos breakpoints grâce aux media-queries. Dans un premier temps, vous êtes rassuré: le responsive design c’est trop facile !!! Si vous utilisez un CMS comme Drupal ou Wordpress, vous pouvez même accélérer les choses en utilisant directement un thème responsive.

Puis vient le moment où vous vous attaquez aux images du site. Et là, les ennuis commencent. La belle photo plein-écran de la page d’accueil devient très moche sur un écran mobile. Et en prime, elle met des plombes à s’afficher. Les images en arrière plan sont coupées car elles ne s’adaptent pas à la taille de l’écran. Ah mince, et comment je fais pour les écrans retina ???

D'après les dernières stats de HTTPArchive.org, les images représentent environ 63% du poids d'une page web. Vous comprenez donc très vite que la gestion des images est la pierre d’achoppement du responsive design. D’où cet article pour essayer d’y voir plus clair sur les stratégies envisageables.

1ère stratégie: Les solutions en pur HTML et CSS

Par exemple, appliquer des dimensions relatives aux images:

<img src="image.jpg" width="100%" />

Vous pouvez aussi ajouter une largeur maximum de 100%. pour éviter qu'elles ne dépassent leur taille originale.

Pour rendre les calculs de proportions plus faciles, vous pouvez également placer vos images dans un conteneur flexible et ajouter le code ci-dessous à vos css pour que la taille de l'image soit contrainte par celle de son conteneur.

img { 
  max-width: 100%; 
}

Inconvénients de cette stratégie:

  • le poids des fichiers n'est pas optimisé pour les petits écrans, ce qui peut ralonger les temps d'affichage de votre site sur mobile du fait d'une bande passante réduite.
  • Les anciennes versions d'Internet Explorer ne comprennent pas l'attribut max-width

Toutefois, malgré ses défauts, cette méthode a l'atout de la simplicité et peut être adaptée pour les pages qui contiennent des images petites et peu nombreuses.

Vous pouvez également tenter de modifier le CSS en indiquant une image optimisée pour chaque media-query. Mais cette solution ne fonctionne que pour les images en arrière-plan (attribut "background-image" en CSS). De plus, de nos jours, les navigateurs mobiles chargent par avance (c'est le "preloading" ou "prefetching") toutes les images qu'ils peuvent identifer afin d'essayer de... gagner du temps. Raté ! Cette seconde méthode est donc à oublier.

2ème stratégie: Les solutions javascript front-end

Deux solutions méritent un peu d'attention:

1. HiSRC

2. Foresight.js

Ces deux scripts fonctionnent selon les mêmes principes: javascript détecte la taille et résolution de l'écran ainsi que le débit de la connexion et charge une image adaptée. Cela peut être aussi utilisé pour gérer l'affichage sur les écrans haute-résolution (retina).

Inconvénients:

  • c'est un peu lourd à mettre en place
  • ça ne fonctionne qu'avec les navigateurs supportant javascript
  • le chargement par javascript peut ralentir l'affichage de l'image (il faut donc arbitrer avec le temps que l'on gagne en affichant une image plus petite)

3ème stratégie: Les solutions côté serveur

Dans ces solutions, le serveur n'envoie qu'une seule image au navigateur et celle-ci est déjà optimisée: petite taille et basse résolution pour les navigateurs mobiles à faible bande passante, et grande taille et haute résolution pour les navigateurs desktop. Il n'y a donc plus de problème de preloading.

En revanche, la détection de la taille d'écran via l'en-tête transmise au serveur n'est pas très fiable en général. Il faut donc contourner ce problème avec un bout de code javascript : celui-ci crée un cookie dans lequel est indiquée la taille de l'écran. Le cookie est ensuite lu côté serveur, ce qui permet de récupérer une information fiable et donc servir un fichier image adapté.

Une solution serveur en php: Adaptive Images

Inconvénients:

  • c'est lourd à mettre en place et encore plus si on utilise un CMS (sauf s'il existe un module comme pour Drupal)
  • ça ne fonctionne qu'avec les navigateurs supportant javascript et les cookies

4ème stratégie: La balise <picture>

L'ajout d'une balise <picture> dans HTML est une proposition du W3C Responsive Images Community Group.

La syntaxe est la suivante:

<picture>
   <source media="(min-width: 640px)" src="haute-res-image.jpg">
   <source media="(min-width: 380px)" src="moyenne-res-image.jpg">
   <source src="basse-res-image.jpg">
   <img src="defaut-image.jpg" alt="Cette image s'affiche pour les navigateurs non compatibles.">
</picture>

La balise <source> précise quelle image doit être téléchargée en fonction de la media-query indiquée. Si le navigateur n'est pas compatible il affiche l'image par défaut (balise <img> classique).

Inconvénients:

  • même si cette solution recueille beaucoup d'adhésion, elle n'en est qu'au stade de la proposition et est en concurrence avec d'autres propositions (srcset par exemple)
  • les navigateurs modernes ne l'implémentent donc pas encore
  • l'image par défaut est toujours chargée par le navigateur donc ce n'est pas optimal. Mais des solutions existent comme remplacer la balise <img> par <object> ou <embed>

À noter: PictureFill une librairie javascript développée par Scott Jehl qui émule le fonctionnement de la balise <picture> en utilisant <span> à la place.

Et si j'utilise Drupal ?

Quelques modules intéressants:

Adaptive Image (implémentation de la solution "Adaptive images" ci-dessus)

Picture

Client-side adaptive image

Et pour Wordpress ?

Les plugins à creuser:

Simple Responsive Images

WP Responsive Images

PB Responsive Images

Picturefill.WP

En conclusion

Beaucoup de solutions ont été envisagées jusqu'à présent. Aucune d'entre elle n'est optimale même si l'ajout de la balise <picture> à HTML pourrait apporter à terme une solution définitive.

Mais encore une fois, il existe d'autres propositions et il n'est pas dit que ce ne soit pas l'une d'entre elles qui s'impose dans le futur.

Je crois donc qu'il faille faire preuve de pragmatisme en la matière et choisir en attendant mieux la méthode la plus adaptée à son cas particulier.