L'utilisation de l'   permet au navigateur de sélectionner une seule image optimale à télécharger et à afficher parmi une liste qui peut être composée de différents types et tailles de fichiers. La large prise en charge disponible pour l'élément d'image nous permet de construire facilement des pages d'affichage d'images réactives indépendantes du navigateur élément Picture  L'exemple spécifique présenté ici est une bande dessinée Web qui est assez gourmande en images. L'exemple utilise l'élément image pour fournir une sélection parmi trois types de fichiers courants, à savoir les formats d'image   ,   et   . Chacun de ces types de fichiers est présenté dans une gamme de cinq dimensions, offrant ainsi au navigateur le choix parmi quinze images distinctes. Le navigateur sélectionnera la première entrée dans la liste d'images qui satisfait ses déterminations d'acceptabilité. AVIF WEBP JPG  Cet écran affiche le code de l'élément   pour l'un des exemples d'images de démonstration. Dans notre démo, chaque élément d'image est suivi d'un séparateur de ligne vierge, comme illustré ici.  d'image <image>  À l'intérieur de l'élément image se trouve une liste d'éléments   dont chacun reflète un choix possible d'une image à sélectionner par le navigateur. L'élément source est un élément   , c'est-à-dire qu'il n'a pas de balise fermante, il n'y a pas de balise </source>. Au lieu de cela, l'élément source agit davantage pour fournir un lien vers une ressource identifiée par le contenu de l'attribut   , un nom de fichier image. source vide srcset  Dans notre exemple, chaque élément source possède également deux attributs supplémentaires. Un attribut est étiqueté   et son contenu représente une requête média pour les dimensions de la fenêtre d'affichage les plus adaptées à l'image spécifiée par   . Le deuxième attribut est étiqueté   et son contenu représente le   de l'image   . Si un navigateur ne prend pas en charge un type MIME particulier, cet élément   sera ignoré. Par exemple, à l'heure actuelle, le navigateur   ne prend pas en charge le type MIME AVIF et ce navigateur ignore simplement les choix de fichiers AVIF. média srcset type type MIME srcset source Microsoft Edge  La dernière entrée dans le contenu de l'élément image est un élément   désigné nominalement comme élément de secours si aucune des images source répertoriées n'est acceptable. Outre le pointeur d'attribut   vers le fichier image, cet élément img possède un attribut   pour le texte alternatif de l'image et un attribut   qui permet à un utilisateur de naviguer facilement entre les images à l'aide de la touche   . img src alt tabindex TAB  En ce qui concerne les nombres magiques qui ont été choisis pour les tailles, j'ai initialement créé 3 tailles d'image pour les points d'arrêt de largeur. Cela a assez bien fonctionné pour inciter l'ajout de deux autres tailles de srcset et un réajustement des points d'arrêt et des tailles pour obtenir plus de granularité. Ces valeurs sont basées sur les choix de point d'arrêt Bootstrap.  noms des points d'arrêt X- Petit Petit Moyen Grand X- Grand XX- Grand  points d'arrêt <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px  conteneur 100% 540px 720px 960px 1140px 1320px  tailles d'image 576px 768px 992px 1200px 1400px  Mais l'écran de débogage de Chrome du code HTML chargé montre certaines différences entre le code source de l'élément img illustré ci-dessus et ce que le navigateur obtient, comme indiqué ici.   Lorsque le navigateur analyse la liste des sources et en sélectionne une qu'il juge préférable, il attribue cette valeur srcset à la variable   , comme indiqué dans cette capture de débogage.  this.currentSrc  Notez que cette image est celle que le navigateur a choisie parmi la liste proposée, c'est celle que le navigateur pense le mieux. Étant donné que l'image a une dimension fixe pour couvrir une gamme de tailles de fenêtres, il est probable que l'image ne soit pas parfaitement ajustée et certains ajustements pourraient être bénéfiques. L'exemple de démonstration utilise JavaScript pour mettre à l'échelle l'image choisie par le navigateur aux dimensions de la fenêtre d'affichage et ces valeurs, c'est-à-dire les dimensions de l'image mises à l'échelle aux dimensions de la fenêtre d'affichage, sont enregistrées comme indiqué ici. Il y a d'autres utilisations que nous obtenons du JavaScript   Sur cet ordinateur de bureau, le débogueur Chrome indique que la bande dessinée de démonstration, 42 images, consomme 2,5 Mo de ressources avec 56 requêtes et 2,1 Mo transférés, et se termine en 1,22 s. Vous pouvez voir la bande dessinée de démonstration sur   . Gardez un œil sur   pour une goutte de la base de code de l'application qui a généré la bande dessinée. Et vous pouvez trouver plus de bandes dessinées sur   de bandes dessinées. Hyenas2 mes dépôts GitHub ma page  Comme toujours, les commentaires, critiques et suggestions sont les bienvenus

2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Developer

Cet audio est produit dans la langue originale de l'histoire !

Comment obtenir les chargements d'images de navigateur les plus rapides

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

La fuite de l'invite du système Claude Sonnet 3.5 : une analyse médico-légale

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

La fuite de l'invite du système Claude Sonnet 3.5 : une analyse médico-légale

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps