Les images responsives

Qu'est ce qu'une image responsive ?

Une image responsive est une image qui s'affiche toujours de la meilleure manière dans un site web en prenant en compte le support sur lequel elle s'affiche.

La méthode la plus simple pour rendre une image responsive est d'adapter sa taille au support sur lequel on la consulte sans pour autant changer d'image.

<img src="img/mon-image.jpg" width="300" height="150" alt="ma superbe image">
img {
  max-width: 100%;
  height: auto;
}

Le problème de cette méthode est que certes - visuellement - l'image paraitra responsive mais cette technique relève plus de la bidouille et de l'adaptation qu'une vraie image responsive car si l'on tient compte des différentes résolutions, des écrans retina, des problèmes de performances d'un site internet consulté en 3G... le mieux est encore de charger une image spécifique en fonction d'une résolution, d'une taille d'écran ... etc.

Les images responsives permettent - sans passer par PHP par exemple - de détecter et de remplacer directement la source d'une image, autrement dit, de ne pas charger inutilement une grande image sur mobile et autres.

Pour ce faire, nous allons étudier de plus près trois méthodes : srcset et sizes qui sont des attributs de la balise img et l'élément picture.

L'attribut srcset

Si vous avez besoin d'implémenter des images responsives dans votre site web et que vous voulez juste changer votre image par une image optimisée pour un support, vous pouvez vous servir de l'attribut srcset de la balise img. Cet attribut pourra soit s'adapter au ratio de l'écran, soit s'adapter à la surface de votre écran.

Avec l'attribut srcset, le navigateur détectera quelle image utiliser en fonction du périphérique sur lequel vous consultez le site internet et ceci automatiquement.

<img src="img/mon-image.jpg"
	 srcset="img/mon-image.jpg 1x, 
	 img/mon-image-2x.jpg 2x"
alt="ma superbe image responsive">

Dans cet exemple nous chargeons une image par défaut avec l'attribut src et avec l'attribut srcset nous chargeons encore une fois l'image par défaut puis une image retina. En fonction de la densité de pixel de l'écran sur lequel l'utilisateur consulte la page, le navigateur affichera automatiquement une image ou une autre.

<img src="img/mon-image.jpg"
	 srcset="img/mon-image.jpg 320w, 
	 img/mon-image-2x.jpg 780w,
	 img/mon-image-3x.jpg 1024w"
alt="ma superbe image responsive">

Dans cet exemple ce n'est pas le ratio que nous prenons en compte mais la largeur de l'écran de l'utilisateur.

L'attribut sizes

L'attribut sizes ne peut pas fonctionner tout seul, il doit être de pair avec srcset. En effet, l'attribut sizes permet d'indiquer au navigateur quelle doit être la largeur de l'image affichée qui aura été préalablement choisie avec srcset.

<img src="img/mon-image.jpg" sizes="50vw"
	 srcset="img/mon-image.jpg 320w, 
	 img/mon-image-2x.jpg 760w,
	 img/mon-image-3x.jpg 1024w"
alt="ma superbe image responsive">

Grâce à l'ajout de l'attribut sizes je peux préciser que je veux que mon image soit visible sur la moitié de la largeur de mon viewport. Le navigateur va alors décider quelle image charger en fonction de la largeur du navigateur et du ratio de l'appareil sur lequel le site internet est consulté.

Vous pouvez également utiliser des media-queries avec l'attribut sizes, par exemple, il est possible de changer la taille que prend l'image à partir d'une certaine taille d'écran.

<img src="img/mon-image.jpg" sizes="(max-width: 40em) 100vw, 50vw"
	srcset="img/mon-image.jpg 400w, 
	img/mon-image-2x.jpg 600w"
alt="ma superbe image responsive">

Ceci permet de faire la même chose qu'un média queries mais en HTML et en le combinant à un srcset cela permet de charger la bonne image au bon moment.
Avec le code ci-dessus nous indiquons que pour un viewport de maximum 39em l'image est aussi grande que le viewport sinon elle fera 50% du viewport. Ensuite le srcset indiquera quelle image utiliser.

Et la compatibilité dans tout ça ?

Les attributs srcset et sizes sont plutôt bien supportés, mention spéciale pour IE qui aura besoin de l'image par défaut stockée dans l'attribut src pour fonctionner.

La balise picture

L'élément picture permet de définir plusieurs éléments sources destinés à un élement img. C'est un container qui va contenir toutes les propriétés liées à une image.

<picture>
	<source srcset="img/mon-image-desktop.jpg 1x, 
			img/mon-image-desktop-hd.jpg 2x"
	media="(min-width: 1024px)">
	<source srcset="img/mon-image-tablet.jpg 1x, 
			img/mon-image-tablet-hd.jpg 2x"
	media="(min-width: 761px)">
	<img src="img/mon-image.jpg" 
	srcset="/img/mon-image.jpg 1x, 
			img/mon-image-hd.jpg 2x"
	alt="Mon image responsive">
</picture>

Dans cet exemple, nous faisons du responsive mobile first, donc l'image par défaut sera l'image mobile qui est aussi stockée dans la balise img (pour gérer le fallback). Avec srcset nous définissons une image à afficher en fonction du ratio et ensuite grâce à la propriété media nous définissons une taille pour tablette et desktop en changeant la source de l'image. Ensuite toujours avec srcset nous affichons une image hd ou non en fonction du ratio.

La balise picture offre de grandes libertés et peut combiner différentes combinaisons. Elle permet vraiment d'avoir la main sur l'image que l'on souhaite afficher, d'en optimiser l'affichage ainsi que les performances.

Niveau compatibilité ?

L'élément picture est un tout petit peu mieux gérée que les attributs srcset et sizes.

Pour conclure :

Les images responsives vous donnent, en tant que développeur, la possibilité de donner à vos utilisateurs la meilleure expérience possible sur les multiples périphériques qu'ils utilisent pour visualiser votre site web. S'en servir serait judicieux, d'autant que de plus en plus d'utilisateurs sont mobiles désormais et que la performance est la clé d'un site web consulté.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *