Une image réactive est une image qui s’adapte aux différentes caractéristiques de l’appareil. Lorsqu’elles sont bien faites, les images réactives peuvent améliorer les performances et l’expérience utilisateur d’un site.
Cet article explique comment vous pouvez créer des images réactives en HTML à l’aide de srcset et l’élément d’image.
Pourquoi devriez-vous utiliser des images réactives ?
Lorsque les ingénieurs logiciels ont créé le Web, ils n’ont pas réfléchi à la manière dont les navigateurs traiteraient les images réactives. Après tout, les utilisateurs n’accédaient au Web qu’à partir d’ordinateurs de bureau ou d’ordinateurs portables. Bien sûr, ce n’est pas vrai aujourd’hui.
Selon Statista, plus de 90 % de la population Internet mondiale se connecte à Internet à l’aide de son téléphone portable. La plupart des pages Web sur Internet contiennent des images et ces images sont l’une des mesures utilisées pour mesurer les performances Web. Pour améliorer les performances, vous devez optimiser vos images en les rendant responsives.
Comment créer des images réactives en HTML
Vous pouvez aborder les images réactives sous deux angles, soit en diffusant la même image avec des tailles différentes, soit en diffusant des images différentes en fonction des caractéristiques d’affichage. Vous pourriez utiliser
Utilisation de srcset
Le standard
Syntaxe:
<img src="" alt="">srcset vous permet de fournir des fichiers source supplémentaires, et le navigateur choisira l’image qui semble optimale pour cette taille d’image.
<img
src="cute-cat.jpg"
alt="A cute cat">srcset est composé de trois parties : Le nom du fichier image qui spécifie le chemin vers l’image source, un espace et la largeur intrinsèque ou réelle de l’image.
Utiliser srcset avec des tailles
Le problème de l’utilisation srcset est que vous n’avez aucun contrôle sur l’image que le navigateur choisira d’afficher. Combiner srcset avec tailles résout ce problème. tailles définir un ensemble de conditions de support qui font allusion à l’image avec la taille optimale.
Vous pouvez maintenant réécrire le
<img
src="cute-cat.jpg"
alt="A cute cat">tailles est composé d’une condition de média, dans cet exemple c’est (max-width: 600px) qui représente la largeur de la fenêtre, l’espace et la largeur de la fente (480px) spécifiant l’espace que l’image remplira si la condition de média est vraie.
Ici, le navigateur vérifiera d’abord la largeur de l’appareil et la comparera à l’état du support. Si la condition est vraie, il vérifiera la largeur de la fente et chargera une image à partir de srcset avec la même largeur ou la suivante plus grande.
Notez que vous incluez également src qui fournit l’image pour se rabattre sur les navigateurs qui ne prennent pas en charge srcset et tailles.
srcset vous permet également pour servir des images à différentes résolutions à l’aide de x-descripteurs.
<img
src="cute-cat-low.jpg"
alt="A cute cat">Dans cet exemple, si l’appareil a une résolution de deux pixels d’appareil par CSS ou plus, le navigateur chargera l’image cute-cat-high1.jpg.
Pixels matériels et logiciels
Le problème avec cette solution est que les images ne réagissent qu’en termes de densité de pixels de l’appareil. Il s’agit du rapport entre les pixels matériels et les pixels logiciels ou CSS. Un pixel matériel est le point de lumière réel sur l’écran tandis que le pixel logiciel ou pixel CSS est une unité de mesure. La densité de pixels détermine la résolution de l’appareil.
Lors du rendu d’images réactives, ne considérez pas seulement la résolution ; la taille de l’affichage est également importante. Sinon, vous risquez de charger inutilement de grandes images ou des images trop pixélisées.
<img
src="cute-cat-low.jpg"
alt="A cute cat">Utilisation de
rend les images réactives en servant différentes tailles de la même image,
Syntaxe:
<picture>
<source media="" >
<source media="" >
<img src="" alt="">
</picture>Considérez une situation où vous avez une grande image de paysage. L’image s’affiche et semble proportionnelle sur un ordinateur de bureau, mais elle se rétrécit considérablement sur un mobile, de sorte que les éléments de l’image deviennent minuscules. L’image non réactive contribue à une mauvaise expérience utilisateur. Avec
<picture>
<source media="(max-width: 639px)" >
<source media="(min-width: 640px)" >
<img src="elva-640w.jpg" alt="A cute cat">
</picture>Comme dans la première approche,
Repli pour le format d’image WebP
Une autre chose que
<picture>
<source type="image/webp" >
<img src="cute-cat.jpg" alt="A cute cat.">
</picture>Pourquoi créer des images responsives en HTML et non en CSS ?
CSS offre des options robustes pour gérer les images réactives. Alors pourquoi ne pas l’utiliser ? Le navigateur précharge les images avant d’analyser le CSS. Ainsi, avant que le code JavaScript de votre site ne détecte la largeur de la fenêtre d’affichage pour apporter les modifications appropriées aux images, les images d’origine ont déjà été préchargées. Pour cette raison, il est préférable de gérer les images réactives à l’aide de HTML.
Viser la meilleure qualité d’image possible
Vous avez vu comment vous pouvez créer des images réactives en HTML en utilisant
Lire la suite
A propos de l’auteur