Guide d'image réactif HTML: vue rapide des extraits de code

Ce guide explique principalement la syntaxe HTML (et une petite quantité de CSS) d'images réactives. La syntaxe d'image réactive est con?ue pour fournir une image à partir de plusieurs options basées sur des règles et des environnements. Il existe deux formes d'images réactives, qui sont utilisées à des fins différentes:

Si votre seul objectif est ...

Améliorer les performances

Alors tu as besoin ...

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381805452081.jpg" class="lazy" alt="Guide d'images réactives HTML">

Ici, nous faisons de la valeur par défaut ( src ) une copie "faible résolution" (1 ×) de l'image. L'utilisation des ressources les plus petites / les plus rapides par défaut est généralement un choix judicieux. Nous proposons également une version 2x. Si le navigateur sait qu'il est sur un affichage de densité de pixels supérieur (partie 2x), il utilisera cette image.

<img src="/static/imghw/default1.png" data-src="baby-lowres.jpg" class="lazy" alt="Bébé portant un bandeau jaune souriant." srcset="
    baby-high-1.jpg 1.5x,
    baby-high-2.jpg 2x,
    baby-high-3.jpg 3x,
    baby-high-4.jpg 4x,
    baby-high-5.jpg 100x
  ">

Vous pouvez ajouter autant de variantes de densité de pixels que vous le souhaitez.

Bien que cela soit cool et utile, le descripteur X ne représente qu'une petite partie de l'utilisation d'images réactives. Pourquoi? Ils permettent aux navigateurs d'ajuster un seul contenu: afficher la densité des pixels. Cependant, plusieurs fois, nos images réactives sont dans une disposition réactive et la taille de disposition de l'image se rétrécira et s'étirera à mesure que la fenêtre change. Dans ces cas, le navigateur doit prendre des décisions en fonction de deux éléments: la densité de pixels de l'écran et la taille de disposition de l'image. C'est là que le descripteur w et l'attribut sizes entrent en jeu, nous le présenterons dans la section suivante.

Utilisation de tailles SRCSET / W

C'est une bonne chose. Cela représente environ 85% de l'utilisation réactive de l'image sur le réseau. Nous fournissons toujours plusieurs copies de la même image et laissons le navigateur choisir la copie la plus appropriée. Cependant, au lieu d'utiliser la densité de pixels (x) pour les étiqueter, nous utilisons le descripteur W pour étiqueter leur largeur de ressource. Donc, si baby-s.jpg est 300 × 450, nous le marquons à 300W.

L'utilisation srcset avec un descripteur de largeur (w) comme celle-ci signifie qu'elle doit être associée à la propriété sizes afin que le navigateur sache combien d'espace l'image sera affichée. Sans ces informations, le navigateur ne pourra pas faire de choix éclairé.

Créer des attributs de tailles précises

La création de la propriété sizes peut être délicate. sizes décrit la largeur de l'image à afficher dans la disposition de votre site Web spécifique , ce qui signifie qu'il est étroitement lié à votre CSS. La largeur du rendu de l'image dépend de la mise en page, pas seulement de la fenêtre!

Regardons une disposition assez simple avec trois points d'arrêt. Voici une vidéo de démonstration: (le lien vidéo doit être inséré ici, le texte original est manquant)

Les points d'arrêt sont exprimés en CSS à l'aide de requêtes multimédias:

 corps {
  marge: 2rem;
  Police: 500 125% System-UI, SANS-Serif;
}
.page-wrap {
  Affichage: grille;
  écart: 1rem;
  grille-template-colonnes: 1fr 200px;
  Grid-Template-Areas:
    "En-tête en tête"
    "Main de c?té"
    "pied de page de page";
}

@media (max-largeur: 700px) {
  .page-wrap {
    Grid-Template-colonnes: 100%;
    Grid-Template-Areas:
      "en-tête"
      "principal"
      "de c?té"
      "pied de page";
  }
}
@media (max-large: 500px) {
  corps {
    marge: 0;
  }
}

La taille de l'image est différente à chaque point d'arrêt. Voici une ventilation de toutes les pièces qui affectent la largeur de mise en page de l'image au point de rupture maximum (lorsque la largeur de la fenêtre est supérieure à 700 pixels):

• à une taille maximale: il y a un espacement explicite de 9REM, donc la largeur de l'image est calc(100vw - 9rem - 200px) . Si la colonne utilise des unités FR au lieu de 200px, nous serons un peu de problème ici.
• à la taille moyenne: la barre latérale est placée en dessous, il y a donc moins d'espacement à considérer. Néanmoins, nous pouvons toujours utiliser calc(100vw - 6rem) pour calculer les marges et le rembourrage.
• à une taille minimale: les marges corporelles sont supprimées, donc calc(100vw - 2rem) est suffisant.

appel! Pour être honnête, je trouve un peu difficile à penser et j'ai fait beaucoup d'erreurs dans la création de cela. Enfin, j'ai eu ceci:

<img ...="" sizes="
    (max-width: 500px) calc(100vw - 2rem), 
    (max-width: 700px) calc(100vw - 6rem),
    calc(100vw - 9rem - 200px)
  ">

Une propriété sizes qui fournit au navigateur la largeur de l'image sous les trois points d'arrêt et prend en compte la grille de mise en page et toutes les lacunes, les marges et le rembourrage qui affectent la largeur de l'image.

etc! Gronder! ??? C'est toujours faux. Je ne comprends pas pourquoi, car pour moi, il semble que ce soit à 100% de décrire ce qui se passe dans la disposition CSS. Mais c'est mal, parce que la Respimagelint de Martin Ausw?ger dit. L'exécution de l'outil sur la démo isolé n'a signalé aucun problème, sauf que sizes est mauvaise pour certaines tailles de la fenêtre et devrait être:

<img ...="" sizes="
    (min-width: 2420px) 2000px, 
    (min-width: 720px) calc(94.76vw - 274px), 
    (min-width: 520px) calc(100vw - 96px), 
    calc(100vw - 32px)
  ">

Je ne sais pas comment cela est calculé, il est totalement impossible de maintenir manuellement, mais c'est exact. L'outil de Martin redimensionne la page plusieurs fois et écrit une propriété sizes qui décrit la largeur réelle de l'image observée sous différentes tailles de fenêtre. C'est les mathématiques réalisées par les ordinateurs, donc c'est correct. Donc, si vous voulez une propriété sizes super précises, je recommande de mettre la mauvaise propriété en premier, d'exécuter cet outil et de copier la bonne propriété.

Pour approfondir tout cela, consultez le descripteur et sizes w d'Eric Portis: dans les coulisses.

Plus détendu dans les tailles

Une autre option consiste à utiliser sizes de la méthode de fer à cheval et de grenade ? (ou, en d'autres termes, près de compter). Ceci est fortement recommandé.

Par exemple, sizes="96vw" signifie: "Cette image sera grande sur la page - presque pleine largeur - mais il y aura toujours un petit rembourrage sur les bords, donc il n'est pas complet." Ou sizes="(min-width: 1000px) 33vw, 96vw" signifie: "Cette image utilise une disposition à trois colonnes sur le grand écran, sinon elle sera proche de la pleine largeur." En termes de praticité, cela peut être une solution raisonnable.

Vous constaterez peut-être que certaines solutions d'image qui répondent automatiquement ne connaissent pas votre mise en page et font donc des suppositions - par exemple sizes="(max-width: 1000px) 100vw, 1000px" . Il s'agit simplement de dire: "Hé, nous ne savons pas grand-chose sur cette mise en page, mais nous allons essayer, le pire des cas est que l'image est pleine largeur, espérons qu'elle ne rende jamais plus de 1000 pixels".

Tailles abstraites

Je crois que vous pouvez imaginer que non seulement il est facile de se sizes , mais cela deviendra également faux avec le temps à mesure que la disposition du site Web change. Vous feriez mieux d'utiliser une langue de modèle ou un filtre de contenu pour l'abstraire afin que vous puissiez modifier plus facilement les valeurs de toutes les images de votre site Web.

Je parle en fait de définir sizes dans une variable à la fois, puis de nombreuses choses différentes sur le site Web<img alt="Guide d'images réactives HTML" > Utilisez cette variable dans l'élément. Le HTML natif ne fournit pas cette fonctionnalité, mais il le fait dans une langue backend; Par exemple, les constantes PHP, les variables de configuration des rails, les API de contexte réagissent pour les variables d'état global ou les variables dans les langages de modèle telles que le liquide peuvent être utilisées pour abstraction sizes .

  Php // dans la portée globale $ my_sizes = "";
?>
<img alt="" sizes="<?php echo $my_sizes; ?>" src="" srcset="">

"Sélection du navigateur"

Maintenant que nous avons la propriété sizes , le navigateur conna?t la taille (ou proche de cette taille) de l'image et peut faire sa magie . Autrement dit, il peut effectuer des opérations mathématiques qui prennent en compte la densité de pixels de l'écran et la taille de l'image à rendre, puis choisissez l'image la plus appropriée.

Au début, les mathématiques étaient assez simples. Supposons que vous soyez sur le point d'afficher une image de 40VW dans une fenêtre avec une largeur de 1200 pixels sur un écran de densité de 2x pixels. La largeur d'image parfaite doit être de 960 pixels, donc le navigateur recherchera l'image la plus proche. Le navigateur calculera toujours sa taille de cible préférée en fonction des conditions de la fenêtre et de la densité de pixels et ce que vous savez de sizes et comparez cette cible avec ce qu'elle a dans srcset pour la sélection. Cependant, il peut être un peu étrange de voir comment le navigateur fait la sélection.

Si le navigateur choisit de le faire, il peut inclure plus de contenu dans cette équation. Par exemple, il peut prendre en compte la vitesse du réseau actuelle de l'utilisateur, ou si l'utilisateur a permis une sorte de préférence de "sauvegarde des données". Je ne sais pas si des navigateurs le font réellement, mais ils peuvent le faire librement s'ils le souhaitent, car c'est ainsi que la spécification est écrite. Certains navigateurs choisissent parfois d'extraire du cache. Si les opérations mathématiques indiquent qu'ils devraient utiliser une image de 300 pixels, mais ils ont déjà une image de 600 pixels dans le cache local, ils utiliseront directement cette image. intelligent. Laisser de l'espace pour de telles choses est un avantage de srcset / sizes . C'est aussi pourquoi vous utilisez toujours les différentes tailles de la même image dans srcset : vous ne pouvez pas savoir quelle image vous sélectionnez. Ceci est le choix du navigateur .

C'est très étrange. Le navigateur ne sait-il pas déjà ces choses?

Vous pensez peut-être: "Eh bien, pourquoi dois-je dire au navigateur à quel point l'image sera la taille, ne sait-il pas?" Eh bien, il ne le sait, mais seulement après qu'il téléchargent votre HTML et CSS et que je dis tout. sizes est lié à la vitesse. Il fournit suffisamment d'informations pour que le navigateur puisse voir votre<img alt="Guide d'images réactives HTML" > Faites des choix éclairés lors du marquage.

<img data-sizes="auto" data-srcset="
    responsive-image1.jpg 300w,
    responsive-image2.jpg 600w,
    responsive-image3.jpg 900w">

Maintenant, vous pensez peut-être: "Mais qu'en est-il de l'image qui est retardée de chargement?" (Autrement dit, lorsque vous demandez l'image qui est retardée de chargement, la mise en page est terminée et le navigateur conna?t déjà la taille de rendu de l'image). Ok, excellente idée! La bibliothèque Lazysizes d'Alexander Farkas écrit automatiquement l'attribut sizes lors du chargement paresseux, et discute de la fa?on de sizes automatiquement nativement pour les images de chargement paresseux.

Les tailles peuvent être plus grandes que la fenêtre

Instructions rapides sur sizes . Supposons qu'il y ait un effet sur votre site Web afin que lorsque vous cliquez sur l'image, l'image "magnifie". Il pourrait s'étendre pour remplir l'intégralité de la fenêtre, ou il peut zoomer davantage afin que vous puissiez voir plus de détails. Dans le passé, nous aurions peut-être d? cliquer pour changer src pour passer à des versions de résolution supérieure. Mais maintenant, en supposant qu'une source de résolution plus élevée est déjà dans srcset , il vous suffit de modifier sizes en une grande valeur, comme 200 VW ou 300VW, le navigateur devrait télécharger automatiquement la source ultra-haute résolution pour vous. Scott Jehl a un article sur cette technologie. (Le lien de l'article doit être inséré ici, le texte d'origine est manquant)

(Le contenu du reste est trop long, et il est recommandé de le traiter en segments ou de le traduire sélectivement selon les besoins)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!