Un des problèmes que l'on rencontre aujourd'hui et que les utilisateurs peuvent consulter notre site avec des périphériques avec des tailles d'écran variées. Il est possible de changer l'apparence de notre site via les media query CSS, mais malheureusement, il n'existait pas jusqu'à maintenant de manière simple de gérer plusieurs formats d'images (il fallait souvent avoir recourt à du JavaScript.).
Mais aujourd'hui il existe deux méthodes pour gérer des images adaptatives :
Ces deux méthodes sont supportées par la plupart des navigateurs modernes et seront ignorées par des navigateurs plus vieux qui ne les supporte pas point.
L’attribut srcset
Cet attribut HTML va permettre d'indiquer aux navigateurs différentes images qu'il est possible d'utiliser à un endroit particulier. On indiquera la taille des différentes images et le navigateur qui choisira en fonction de la configuration de l'utilisateur l'image à utiliser. Cet attribut s'accompagne souvent de l’attribut sizes.
<img
src="image_par_defaut.jpg"
srcset="[url image] [taille réelle],
[url image] [taille réelle],
[url image] [taille réelle]"
sizes="[taille de l’image]">
<!--Exemple-->
<img
src="image_grande.jpg"
srcset="image_mobile.jpg 500w,
image_bureau.jpg 1200w,
image_grande.jpg 1600w"
sizes="100vw">L'unité w permet d'indiquer la taille réelle de l'image, c'est cette unité qui permet aux navigateurs de faire son choix en fonction de la largeur d'écran disponible (il est aussi possible d'utiliser "1x", "2x" pour cibler la densité d'écran). L’attribut sizes permet d'indiquer aux navigateurs la taille qu'occupera notre image dans l'écran. Cette taille permettra ensuite au navigateur de choisir l'image convenablement.
Si votre image change en fonction de la taille d'écran vous pouvez utiliser des media query.
<img
srcset="image-320w.jpg 320w,
image-480w.jpg 480w,
image-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="image-800w.jpg">La balise picture
Le problème de l'attribut srcset et qu'il ne permet pas de spécifier l'image à utiliser en fonction de la taille d'écran, le navigateur fait son choix et on ne peut pas garantir l'image qui sera utilisée. Parfois, pour des raisons artistiques on va vouloir changer l'image en fonction du format de la taille de fenêtre. Par exemple une image en format paysage peut-être transformée en mode portrait sur des petites fenêtres. Dans ce cas-là il la balise <picture> sera plus adaptée.
<picture>
<source
media="(max-width: 799px)"
srcset="image-480w-close-portrait.jpg">
<source
media="(min-width: 800px)"
srcset="image-800w.jpg">
<img src="image-800w.jpg">
</picture>Cette balise va permettre d'indiquer plusieurs sources à utiliser en fonction de la situation. On peut mettre une contrainte grâce à l'attribut media qui permettra de spécifier la taille d'écran associée à l'image. L'attribut srcset fonctionne comme vu plus haut. Il est donc possible de cumuler les deux méthodes en ayant plusieurs images pour chacun des formats.
Enfin il est aussi possible d'utiliser cette balise <picture> afin de déterminer le type d'image supporté par le navigateur.
<picture>
<source type="image/svg+xml" srcset="image.svg">
<source type="image/webp" srcset="image.webp">
<img src="image.png">
</picture>Conclusion
Par défaut on aura plutôt tendance à utiliser l'attribut srcset afin de spécifier différentes tailles d'image à utiliser. On réservera l'utilisation de la balise <picture> dans le cas où on souhaite forcer différents format d'images suivant la taille de la fenêtre.
