Guide du débutant pour les images réactives en HTML

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 ou . Ces deux options gèrent différemment les images réactives, mais elles affichent toutes une image à partir d’alternatives données en fonction des règles définies.

En relation: Comment rendre votre site Web réactif et interactif avec CSS et JavaScript

Utilisation de srcset

Le standard HTML ne vous permet de spécifier qu’un seul fichier image. Si vous souhaitez afficher une image différente en fonction de la taille de l’appareil, vous devez utiliser srcset.

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 tag ci-dessus comme suit.

<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.

En relation: Comment utiliser les requêtes multimédias en HTML et CSS pour créer des sites Web réactifs

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

est un élément HTML qui encapsule plusieurs éléments contenant différents fichiers source et un élément. Tandis que rend les images réactives en servant différentes tailles de la même image, vous permet de changer réellement l’image affichée.

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 , vous pouvez indiquer à votre navigateur de passer à une image de portrait en gros plan lorsque vous êtes sur mobile.

<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, contient un attribut de média que vous pouvez utiliser pour fournir la condition de média. Par exemple, le navigateur affichera le « cute-cat-480w.jpg » si la largeur de la fenêtre est de 639px ou moins. le srcset contient le chemin du fichier image que vous souhaitez afficher et src spécifie l’image par défaut.

En relation : 7 nouvelles fonctionnalités CSS pour créer un site Web réactif

Repli pour le format d’image WebP

Une autre chose que gère bien est de fournir une solution de repli pour les formats d’image modernes comme WebP. Les images WebP ont des performances élevées, sont petites et offrent une expérience Web rapide. Vous pouvez donc décider de les utiliser sur vos sites. Un défi que vous pourriez rencontrer est que tous les navigateurs ne prennent pas en charge les images WebP. Avec vous ne rencontrez pas ce problème car votre navigateur peut charger une image alternative s’il ne prend pas en charge WebP.

<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 > et dans cet article. La diffusion d’images réactives implique généralement de prendre en compte la taille et la résolution de l’image en fonction de la taille de l’affichage. Si c’est mal fait, la qualité de l’image peut en souffrir. Assurez-vous de choisir une image qui offre une convivialité optimale en utilisant le moins de ressources.

Principes de conception de sites Web réactifs

Les concepteurs Web défendent le design réactif depuis des années, mais qu’est-ce que c’est et comment peut-il produire des pages Web de qualité supérieure ?

Lire la suite

A propos de l’auteur

Marie Gathoni
(5 articles publiés)

Mary Gathoni est une développeuse de logiciels passionnée par la création de contenu technique non seulement informatif mais également engageant. Lorsqu’elle ne code pas ou n’écrit pas, elle aime passer du temps avec des amis et être à l’extérieur.

Plus de Mary Gathoni

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner