Télécharger le PDF du cours
Cependant, on ne va pas pouvoir « réorganiser » une image en CSS. Nous allons bien évidemment pouvoir placer notre image dans un conteneur en HTML puis utiliser par exemple le flexbox pour rendre l’image « responsive » mais cela ne va pas être une solution optimale et ceci pour deux raisons :
- En n’utilisant qu’une seule image, nous allons être obligés de choisir la version la plus grande possible de celle-ci afin qu’elle ne pixellise pas lorsqu’un utilisateur l’affiche sur un grand écran. Or, plus une image est grande et plus elle est lourde : nous allons donc imposer aux mobiles le téléchargement d’une image très lourde sans raison ce qui va ralentir la vitesse d’affichage de nos pages ;
- En n’utilisant qu’une seule image, il est fort probable que l’image ne rende pas bien sur mobile car comme celle-ci sera plus petite à cause de la taille de l’écran le sujet dans l’image va apparaitre lointain ou comme dézoomé.
Ces deux problématiques font qu’on aimerait pouvoir proposer différentes versions d’une image pour différents types d’appareil. Nous allons voir comment faire dans ce chapitre.
Pixels physiques, pixels CSS et écrans retina
Nous l’avons vu dans le chapitre sur le viewport : un pixel n’est pas toujours égal à un pixel ! Comprendre cela va être très important pour afficher des images qui vont s’afficher correctement sur tous les appareils.
Ici, retenez que les écrans retina ont généralement une résolution deux fois plus importante que les écrans standards. Cela signifie que chaque « pixel retina » est l’équivalent de 4 « pixels standards » (2 en largeur, 2 en hauteur).
Ainsi, pour qu’une image s’affiche correctement sur un écran retina, il faudra qu’elle soit deux fois plus grande que l’écran sur lequel elle doit s’afficher (1960x 980px par exemple pour un affichage sur un écran retina de 980x 490px).
Notez également ici que certains écrans retina possèdent une résolution 3 fois plus importante qu’un écran standard, auquel cas il faudra une image 3 fois plus grande et etc.
Une première solution : utiliser des images SVG
La première solution, qui semble la plus évidente pour gérer les différentes tailles d’écran et les différentes résolutions est d’utiliser des images au format SVG pour Scalable Vector Graphic.
Comme le nom l’indique, ces images sont vectorielles, ce qui signifie qu’on va pouvoir les agrandir ou les rapetisser à l’infini sans perte de qualité.
Cependant, cela ne résout qu’une partie du problème puisqu’en n’utilisant qu’une seule image pour toutes les versions de notre site, cette image risque d’apparaitre comme trop imposante pour la version bureau ou trop dézoomée pour la version mobile.
De plus, souvent, vous serez obligés d’intégrer des photos ou images d’un format différent comme jpeg ou png.
Proposer plusieurs versions d’une image en utilisant les attributs HTML srcset et sizes
Nous allons pouvoir ajouter un attribut srcset dans notre élément img qui va nous permettre de fournir plusieurs sources d’images (c’est-à-dire concrètement de fournir plusieurs images différentes) au navigateur parmi lesquelles choisir.
Ce qui va nous intéresser ici va être de proposer plusieurs versions d’une même image avec des tailles et des cadrages différents. Pour cet exercice, je vais utiliser trois versions d’une même image que j’ai prédécoupé avant :
- Une version complète « L » de l’image de dimensions 800x 625px que l’on va servir aux grands écrans ;
- Une version « M » rognée avec un premier centrage sur le sujet pour les écrans de taille moyenne ;
- Une version « S » de dimensions 400x 625px complètement centrée sur le sujet pour les petits écrans.
Vous pouvez télécharger ces trois images en cliquant ici. Voici à quoi ressemblent mes trois photos :
L’attribut srcset va être accompagné d’un attribut sizes qui va nous permettre de préciser un ensemble de conditions relatives au terminal utilisé par un utilisateur (généralement des conditions de tailles de fenêtre) et d’indiquer la largeur que doit occuper l’image dans chaque situation.
Ici, nous renseignons chacune des versions de notre image dans l’attribut srcset avec leur valeur intrinsèque en unités w qui sont un équivalent pixel. Pour faire très simple, nous indiquons la largeur de chacune de nos images en pixels avec l’unité w.
Ensuite nous allons préciser dans l’attribut size un ensemble de conditions et la largeur de l’espace que doit occuper l’image dans l’écran si une condition est vérifiée.
Les conditions seront généralement des conditions sur la taille de la fenêtre et vont être le strict équivalent de nos Media Queries CSS. Par exemple la condition (max-width : 576px) va être vérifiée pour toutes les tailles de fenêtre inférieures à 576px et l’image devra alors être affichée dans un espace de 380px de large.
Si cette condition est vérifiée, alors le navigateur utilisera l’image dont les dimensions sont le plus proche de l’espace dans lequel elle devra être affichée.
Notez que l’ordre d’écriture des conditions dans sizes compte puisque c’est toujours la première condition vérifiée qui va être retenue. Ainsi, nous déclarerons toujours nos conditions de la plus restrictive à la moins restrictive afin que le navigateur récupère la meilleure version à chaque fois.
Le navigateur va donc ici commencer par calculer la taille de l’écran de vos visiteurs puis passer en revue les conditions données jusqu’à ce qu’une condition soit vérifiée. Dès que c’est le cas, le navigateur va noter la largeur de la place que doit occuper l’image et va charger l’image dans srcset dont la taille est la plus proche de la largeur précisée dans notre condition.
Attention cependant ici : l’attribut srcset ne donne qu’une indication de préférence au navigateur et celui-ci est libre de l’ignorer pour charger la version de l’image qu’il souhaite. Ainsi, il est possible que le navigateur d’un visiteur ne charge pas la version souhaitée dans le cas où, par exemple, le navigateur possèderait déjà une version avec une meilleure résolution de l’image en cache.
En effet, la plupart des navigateurs comprennent bien que l’attribut srcset est utilisé à des fins d’optimisation. Or, si le navigateur possède déjà une version de qualité supérieure cachée d’un média, c’est-à-dire une version déjà téléchargée et prête à l’affichage, alors il est normal qu’il l’affiche puisque cela optimisera le rendu (supposément) et les performances.
Faites donc bien attention de votre côté si vous testez srcset à le tester en navigation privée ou à supprimer le cache de votre navigateur afin de bien voir l’image changer en fonction de la taille de l’écran.
