Une image qui paraît parfaite sur un grand écran peut devenir trop lourde ou mal cadrée sur mobile. Le but de ce cours est d'apprendre, pas à pas, comment une balise image peut proposer plusieurs fichiers pour que le navigateur choisisse le plus adapté.
Quand on débute, on insère souvent une seule image avec un seul fichier. Cela fonctionne, mais ce n'est pas toujours idéal. Un petit écran n'a pas forcément besoin d'une image très large, alors qu'un écran haute définition peut, au contraire, avoir besoin d'un fichier plus précis.
Le responsive design ne consiste donc pas seulement à faire rétrécir l'image visuellement. Il consiste aussi à servir le bon fichier au bon moment.
Pourquoi adapter les images en fonction de la taille de l'écran ?
Avant de voir la syntaxe, il faut comprendre le problème. Une image n'a pas seulement un rôle décoratif. Elle influence aussi la lecture, la mise en page et la vitesse de chargement.
Enjeux de design
Sur un grand écran, une grande image peut être agréable. Elle respire mieux et accompagne bien le contenu. Sur mobile, cette même image peut prendre trop de place, pousser le texte trop bas ou rester floue si elle n'a pas été prévue pour certains écrans.
Un bon exemple est celui d'une large bannière pensée pour un ordinateur. Si on affiche exactement la même image sur mobile, elle peut devenir trop petite, mal cadrée ou perdre une grande partie de son intérêt. L'idée est donc de proposer une version lisible, bien dimensionnée et cohérente avec l'espace disponible.
Ici, l'image non adaptée sera trop petite sur un écran mobile.
Pour pallier à ça, on en chargera une autre, avec un autre ratio.
Enjeux de performances
Un fichier image trop lourd ralentit le chargement de la page. C'est particulièrement visible sur mobile ou avec une connexion moyenne. Si vous envoyez une image de 2000 pixels de large à un petit écran qui n'en affiche que 400, vous faites souvent télécharger plus de données que nécessaire.
Adapter les images permet donc de gagner sur deux plans :
- la page se charge plus vite,
- le visiteur télécharge un fichier plus proche de son besoin réel.
Voilà pourquoi les attributs srcset et sizes sont utiles. Ils donnent au navigateur plusieurs options au lieu de lui imposer une seule image.
Les attributs srcset et sizes pour afficher différentes images
La base reste la balise img. Vous gardez un src classique, puis vous ajoutez srcset pour lister plusieurs fichiers possibles.
<img
src="images/photo-800.jpg"
srcset="images/photo-480.jpg 480w,
images/photo-800.jpg 800w,
images/photo-1200.jpg 1200w"
alt="Une photo de paysage"
/>
Dans srcset, chaque fichier est suivi d'une indication de largeur. Ici, 480w veut dire que le fichier fait 480 pixels de large, 800w qu'il fait 800 pixels, et ainsi de suite.
À ce stade, le navigateur sait qu'il a plusieurs fichiers disponibles, mais il a encore besoin de comprendre quelle place l'image va prendre dans la page. C'est justement le rôle de sizes. L'attribut s'appelle bien sizes, au pluriel.
<img
src="images/photo-800.jpg"
srcset="images/photo-480.jpg 480w,
images/photo-800.jpg 800w,
images/photo-1200.jpg 1200w"
sizes="(max-width: 700px) 100vw, 700px"
alt="Une photo de paysage"
/>
Cette ligne signifie :
-
si l'écran fait au maximum 700px de large, l'image prendra toute la largeur visible, soit
100vw, - sinon, on considère qu'elle s'affichera sur 700px de large.
Le navigateur peut alors choisir le fichier le plus adapté parmi ceux proposés dans srcset. Il évite ainsi de prendre un fichier trop gros ou trop petit.
<figure class="illustration">
<img
src="images/photo-800.jpg"
srcset="images/photo-480.jpg 480w,
images/photo-800.jpg 800w,
images/photo-1200.jpg 1200w"
sizes="(max-width: 700px) 100vw, 700px"
alt="Une photo de paysage"
/>
</figure>
.illustration img{
display: block;
width: 100%;
height: auto;
}
Le CSS ci-dessus rend l'image souple dans sa boîte. Le HTML, lui, aide le navigateur à télécharger un fichier plus adapté. Les deux travaillent donc ensemble.
Avec srcset et sizes, vous décrivez le contexte d'affichage au navigateur.
Si vous souhaitez revoir la syntaxe de base de la balise img, vous pouvez relire le cours Images.
Gestion de différentes résolutions
Jusqu'ici, nous avons parlé de la taille affichée de l'image. Il existe un autre cas fréquent : deux écrans peuvent afficher une image dans la même taille visuelle, mais l'un d'eux a une densité de pixels plus élevée. C'est le cas de nombreux écrans Retina ou haute définition.
Dans cette situation, on peut proposer plusieurs fichiers presque identiques, mais plus ou moins précis. Cette fois, on utilise souvent des descripteurs comme 1x et 2x.
<img
src="images/logo.png"
srcset="images/logo.png 1x,
images/logo@2x.png 2x"
alt="Logo du site"
/>
Ici, le navigateur choisit la version 2x sur un écran plus dense, afin d'obtenir un affichage plus net. Sur un écran classique, il peut se contenter de la version 1x.
Cette approche est pratique quand l'image garde la même taille visuelle, mais qu'on veut améliorer sa finesse sur certains écrans. On l'utilise souvent pour les logos, les icônes ou de petites images d'interface.
Deux images peuvent occuper la même place à l'écran, mais ne pas avoir la même précision.
Attention ! Les descripteurs w et x ne se mélangent pas n'importe comment. Pour débuter, retenez surtout ceci :
-
utilisez
wavecsizesquand la largeur affichée change selon l'écran, -
utilisez
1x,2xet plus quand la taille affichée reste la même, mais que la finesse de l'écran change.
Conclusion
Retenez surtout que le responsive design des images repose sur une idée simple : ne pas envoyer systématiquement le même fichier à tout le monde. Selon la largeur disponible ou la densité de l'écran, le navigateur peut choisir une image plus pertinente.
En pratique, vous avancerez souvent en deux étapes. D'abord, vous rendez l'image souple dans la mise en page avec du CSS comme width: 100% et height: auto. Ensuite, vous utilisez srcset et sizes pour proposer plusieurs fichiers.
Ce n'est pas la syntaxe la plus courte du HTML, mais elle répond à un vrai besoin. Une fois la logique comprise, elle devient beaucoup plus naturelle : vous décrivez au navigateur ce que l'image pourra occuper, et lui choisit la bonne ressource.