Une image responsive est une image qui s'adapte aux différentes caractéristiques de l'appareil qui l'affiche. Lorsqu'elles sont faites correctement, les images réactives peuvent améliorer les performances du site Web et différencier votre expérience utilisateur.
Cet article explique comment vous pouvez créer des images HTML réactives à l'aide de srcset et élément Image. Départ Code on the Go : Meilleures applications d'édition HTML pour Android.
Pourquoi utiliser des images responsives ?
Lorsqu'un ingénieur logiciel créait des pages Web, il ne pensait pas à la façon dont les navigateurs gèrent les images réactives. Après tout, les utilisateurs n'accédaient souvent au Web qu'à partir d'ordinateurs de bureau ou portables. Bien sûr, ce n'est pas vrai aujourd'hui.
Selon Statesman Plus de 90 % des internautes dans le monde naviguent sur le Web à l'aide de leur téléphone mobile. La plupart des pages Web 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 améliorer vos images en les rendant réactives. Vérifier Les meilleurs outils de développement Web les plus populaires utilisés par tous les professionnels.
Comment créer des images HTML réactives
La conception Web réactive signifie non seulement que les mises en page peuvent changer en fonction des attributs de l'appareil utilisé, mais également du contenu. Par exemple, sur les moniteurs à haute résolution (2x), des graphiques haute résolution sont également nécessaires pour garantir le niveau de netteté. Une image avec une valeur de largeur de 50 % peut bien fonctionner uniquement lorsque le navigateur a une largeur de 800 pixels, mais cela aura un impact important sur un téléphone étroit, et le problème de la consommation de bande passante élevée existera toujours lorsque la taille est réduite pour s'adapter petit écrans.
Caractéristiques de l'article img d'une grande importance; Puisqu'il aide à télécharger, décoder et afficher le contenu, les navigateurs modernes sont compatibles avec un certain nombre de formats d'image différents. L'intégration d'images qui fonctionnent sur tous les appareils n'est pas la même que pour le bureau, et seules quelques modifications mineures sont nécessaires pour faire bonne impression.
Vous pouvez travailler avec des images réactives sous deux angles, soit en présentant la même image à différentes tailles, soit en présentant différentes images en fonction des caractéristiques d'affichage. vous pouvez utiliser ou . Ces deux options gèrent différemment les images réactives, mais elles affichent toutes une image parmi certaines alternatives en fonction de l'ensemble de règles.
utiliser srcset
La fonction vous permet de HTML standard en spécifiant un seul fichier image. Si vous souhaitez afficher une image différente en fonction de la taille de l'appareil, vous devez utiliser srcset.
La construction de la phrase:
<img srcset=”” src=”” alt=””>
La fonction vous permet de srcset En fournissant des fichiers sources supplémentaires, le navigateur choisira l'image qui semble optimale pour la taille d'écran utilisée.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” src=”cute-cat.jpg” alt=”A cute cat”>
Se compose srcset Il comporte trois parties : le nom du fichier image qui spécifie le chemin d'accès à l'image source, la zone et la largeur intrinsèque ou réelle de l'image.
Utiliser srcset avec des tailles
Le problème réside dans l'utilisation de srcset En cela, vous ne pouvez pas contrôler l'image que le navigateur choisit d'afficher. La combinaison de srcset et de tailles résout ce problème. Les tailles sont définies par un ensemble de termes multimédias qui indiquent qu'une image a la taille optimale.
Vous pouvez maintenant retaper la balise ci-dessus comme suit.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” sizes=”(max-width: 600px) 480px, 800px” src=”cute-cat.jpg” alt=”A cute cat”>
Les tailles consistent en un état de média, dans cet exemple (max-width : 600px) qui représente la largeur du port, la zone et la largeur de l'emplacement (480px) avec la quantité d'espace que l'image remplira si le média l'état est vrai.
Ici, le navigateur va d'abord vérifier le rendu de l'appareil et le comparer à l'état du média. Si la condition est vraie, il vérifiera la largeur de l'ouverture et téléchargera une image de srcset Même largeur ou la prochaine image plus grande.
Notez que vous incluez également src Qui fournit l'image à titre de référence aux navigateurs qui ne prennent pas en charge srcset et les tailles.
Vous permet de srcset Présente également des images dans différentes résolutions à l'aide de descripteurs x.
<img srcset=”cute-cat-high.jpg, cute-cat-high1.jpg 1.5x, cute-cat-high2.jpg 2x” src=”cute-cat-low.jpg” alt=”A cute cat”>
Dans cet exemple, si l'appareil a une résolution de 1 pixels par CSS ou plus, le navigateur chargera l'image cute-cat-highXNUMX.jpg.
L'attribut srcset améliore le comportement de l'élément img, facilitant la fourniture de plusieurs fichiers image pour différentes fonctionnalités matérielles. Comme dans l'image-set , la fonction CSS d'origine, srcset Le navigateur a le droit de choisir la meilleure image en fonction des fonctionnalités de l'appareil, par exemple en utilisant une image 2x sur un écran 2x, et éventuellement à l'avenir, une image 1x sur un appareil 2x lors de l'utilisation d'un réseau à bande passante limitée.
Pixels matériels et logiciels
Le problème avec cette solution est que les images ne répondent 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 lumineux réel sur l'écran tandis qu'un 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 vous contentez pas de prendre en compte la résolution ; La taille de l'écran compte également. Sinon, vous risquez de télécharger inutilement de grandes images ou des images extrêmement pixélisées.
<img srcset=”cute-cat-high1–480w.jpg 1.5x, cute-cat-high2–640w.jpg 2x” src=”cute-cat-low.jpg” alt=”A cute cat”>
Utilisation
Attribut C'est un élément HTML qui enveloppe de nombreux éléments qui contient divers fichiers source et un élément . en faisant Les images répondent en offrant différentes tailles de la même image, vous permettant de changer réellement l'image affichée.
La construction de la phrase:
<picture> <source media=”” srcset=””> <source media=”” srcset=””> <img src=”” alt=””> </picture>
Considérez une situation où vous avez une grande photo de paysage. L'image s'affiche et semble proportionnelle sur le bureau, mais elle se rétrécit tellement sur mobile que les éléments de l'image deviennent petits. Une image qui ne répond pas contribue à une mauvaise expérience utilisateur. en utilisant l'attribut . , vous pouvez indiquer à votre navigateur de passer en gros plan lorsque vous utilisez un téléphone mobile.
<picture> <source media=”(max-width: 639px)” srcset=”cute-cat-480w.jpg”> <source media=”(min-width: 640px)” srcset=”cute-cat-640w.jpg”> <img src=”elva-640w.jpg” alt=”A cute cat”> </picture>
Comme dans la première méthode, l'attribut . contient contient un attribut de support que vous pouvez utiliser pour fournir l'état du support. Par exemple, le navigateur affichera "cute-cat-480w.jpg" si la fenêtre d'affichage est de 639 pixels ou moins. conserver l'attribut srcset Le chemin du fichier image que vous souhaitez afficher est spécifié src image par défaut.
Retour à WebP . Format d'image
L'autre chose que vous traitez est une fonctionnalité Une bonne chose est de fournir une sauvegarde des formats d'image modernes comme WebP. Les images WebP ont des performances élevées, sont souvent de petite taille et offrent une expérience Web rapide. Vous pouvez donc décider de les utiliser sur vos sites Web. Le défi auquel vous pouvez être confronté est que tous les navigateurs ne prennent pas en charge les images WebP. avec thème Vous ne rencontrerez pas ce problème car votre navigateur peut télécharger une autre image s'il ne prend pas en charge WebP.
<picture> <source type=”image/webp” srcset=”cute-cat.webp”> <img src=”cute-cat.jpg” alt=”A cute cat.”> </picture>
Pourquoi créer des images à crête en HTML et non en CSS ?
CSS fournit des options puissantes pour gérer les images réactives. Pourquoi ne pas l'utiliser alors ? Le navigateur Web précharge les images avant d'analyser le CSS. Ainsi, avant que le javascript de votre site ne détecte la fenêtre d'affichage pour apporter les modifications appropriées aux images, les images d'origine seront préchargées. Pour cette raison, il est préférable de travailler avec des images réactives avec HTML.
Viser la meilleure qualité d'image possible
Vous avez vu comment créer des images HTML réactives avec un attribut . et Dans cet article. La livraison 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'écran. Si c'est mal fait, la qualité de l'image peut être affectée. Assurez-vous de choisir une image qui utilise au mieux le moins de ressources. Vérifier Comment ouvrir et convertir des images HEIC sur Android.
