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

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

Trop long; Pour lire

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Trop long; Pour lire

Bob Wright

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

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

Trop long; Pour lire

Bob Wright

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES