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

Une image réceptive est une image qui s’adapte aux différentes caractéristiques du gadget. Lorsqu’elles sont bien faites, les images réceptives peuvent améliorer les performances et l’expérience utilisateur d’un site.

Ce court article vous explique comment créer des images réceptives en HTML en utilisant srcset et aussi l’aspect de l’image.

Pourquoi devriez-vous utiliser des images réactives ?

Lorsque les concepteurs de logiciels développaient Internet, ils ne pensaient pas à la manière dont les navigateurs Internet traiteraient les images réceptives. En outre, les individus accédaient simplement à Internet à partir d’ordinateurs de bureau ou d’ordinateurs portables. Certes, ce n’est pas réel aujourd’hui.

Selon Statistique , plus de 90 % de la population mondiale du Web se connectent à Internet à l’aide de leur téléphone portable. De nombreux sites Web sur le net contiennent des images et ces images sont l’une des mesures utilisées pour évaluer les performances d’Internet. Pour booster les performances, vous devez optimiser vos photos en les rendant réceptives.

Comment créer des images réactives en HTML

Vous pouvez aborder les images réactives sous 2 angles, soit en servant la même image avec différentes dimensions, soit en proposant différentes photos en fonction des caractéristiques de l’écran. Vous pouvez utiliser << image>> ou << srcset>> . Ces deux alternatives traitent les photos réceptives d’une manière différente, mais elles montrent toutes une photo parmi les alternatives proposées en fonction des règles établies.

Utilisation de source

Le conventionnel << img> > HTML ne vous permet de définir qu’une seule donnée d’image. Si vous souhaitez présenter une image différente en fonction de la dimension de l’outil, vous devez utiliser srcset .

Syntaxe :

srcset vous permet de donner des fichiers source supplémentaires, ainsi que le navigateur choisira certainement l’image qui semble idéale pour cette dimension d’image.

srcset est construit à partir de 3 composants : Le nom de fichier de l’image qui spécifie le chemin vers l’image source, un espace, et aussi la taille innée ou réelle de la photo.

Utilisation de src avec des tailles

Le problème de l’utilisation de srcset est que vous n’avez aucun contrôle sur la photo que le navigateur sélectionnera certainement pour afficher. Combiner srcset avec tailles résout ce problème. tailles définir une collection de problèmes de médias qui font allusion à l’image avec la taille optimale.

Vous pouvez actuellement réviser le << img> > marquer comme suit.

tailles est composé d’un problème de média, dans cet exemple c’est (max-width: 600px) qui représente la largeur de la fenêtre, la pièce, ainsi que la largeur de l’emplacement (480px) spécifiant la pièce dans laquelle l’image se chargera si le problème de média est vrai.

Ici, le navigateur examinera initialement la largeur du gadget et la comparera au problème de support. Si la condition est vraie, il examinera la largeur de la fente et affichera une photo à partir de srcset avec la même largeur ou la suivante plus grande.

Notez que vous êtes également composé de src qui fournit la photo pour se rabattre sur les navigateurs Web qui ne prennent pas en charge srcset et dimensions .

srcset vous permet également pour servir des images à différentes résolutions en utilisant des descripteurs x.

Dans ce cas, si l’appareil a une résolution de deux pixels d’appareil par CSS ou même plus, le navigateur Internet emballera le cute-cat-high1. photo jpg.

Pixels matériels et logiciels

Le problème avec ce remède est que les images sont simplement réceptives à la densité de pixels de l’outil. Il s’agit de la proportion de pixels matériels par rapport aux pixels logiciels ou CSS. Un pixel matériel est le point de lumière réel sur l’écran tandis que le pixel d’application logicielle ou pixel CSS est un système de dimension. La densité de pixels identifie la résolution de l’appareil.

Lorsque vous créez des photos réactives, ne tenez pas seulement compte de la résolution ; la taille de l’écran est également essentielle. Ou bien, vous risquez de remplir inutilement de grandes images ou des photos trop pixélisées.

En utilisant< photo>>

<< picture>> est un composant HTML qui couvre de nombreux << source>> composants constitués de différents fichiers de ressources ainsi que d’un << img>> composant. Tandis que << img src="" alt="">> rend les images réceptives en proposant différentes dimensions d’une même photo,< image> > vous permet de vraiment transformer la photo montrée.

Syntaxe:

Considérez un scénario où vous avez une immense image de paysage. L’image s’affiche et semble proportionnelle sur un ordinateur de bureau, mais elle se réduit considérablement sur un mobile, de sorte que les composants de la photo deviennent petits. La photo non réactive ajoute à une mauvaise expérience client. Avec< photo> > vous pouvez indiquer à votre navigateur Internet de passer à une image portrait en gros plan lorsque vous êtes sur mobile.

Comme dans la technique initiale, << resource> > contient un attribut de support que vous pouvez utiliser pour fournir la condition du support. Par exemple, le navigateur affichera le « cute-cat-480w. jpg » si la taille de la fenêtre est de 639px ou beaucoup moins. le srcset contient le cours de données d’image que vous souhaitez afficher et src définit l’image par défaut.

Repli pour le format d’image WebP

Une autre chose qui< image> > gère bien fournit une solution de repli pour les mises en page de photos contemporaines comme WebP. Les images WebP ont une efficacité élevée, sont petites et offrent une expérience Web rapide. Vous pouvez donc choisir de les utiliser sur vos sites. Un défi que vous pourriez rencontrer est que tous les navigateurs Web ne prennent pas en charge les images WebP. Avec << picture>> vous ne rencontrez pas ce problème car votre navigateur Internet peut contenir une image différente s’il ne prend pas en charge WebP.

Pourquoi créer des images responsives en HTML et pas en CSS ?

CSS offre des options durables pour traiter les photos réceptives. Alors pourquoi ne pas l’utiliser ? Le navigateur Internet précharge les images avant d’analyser le CSS. Ainsi, avant que JavaScript de votre site Web ne trouve la taille de la fenêtre d’affichage pour apporter les ajustements appropriés aux images, les images initiales ont déjà été préchargées. Par conséquent, il est préférable de prendre soin des images réceptives en utilisant HTML.

Visez la qualité d’image la plus efficace possible

Vous avez vu comment vous pouvez développer des images réceptives en HTML en utilisant << image > > et << srcset>> dans ce poste. La diffusion d’images réceptives implique généralement de réfléchir à la dimension et à la résolution de l’image, car elles sont associées à la taille de l’écran. Si c’est fait par erreur, la qualité de l’image peut en souffrir. Assurez-vous de sélectionner une image qui offre une fonctionnalité optimale en utilisant le moins de sources.