L'élément <picture> est un moyen natif d'implémenter des images réactives dans HTML5. Il permet de charger les ressources d'image les plus appropriées en fonction de facteurs tels que la taille de l'écran, la résolution et l'orientation de l'appareil. Définissez plusieurs sources d'image et leurs conditions de requête multimédia correspondantes via la balise <source>. Le navigateur correspondra et chargera les images qui remplissent les conditions dans l'ordre, et utilisent enfin la balise comme repli par défaut. Par exemple: lorsque la largeur du périphérique est supérieure ou égale à 1024px, le milieu.jpg est chargé entre 768 et 1023px, small.jpg est chargé si la largeur du périphérique est supérieure ou égale à 1024px. Par rapport à SRCSET de , fournit des capacités de contr?le plus raffinées, telles que l'adaptation aux écrans de rétine, la commutation d'écran horizontale et verticale, le contenu d'image complètement différent, etc. Les scénarios applicables typiques comprennent: la commutation d'images avec différentes compositions, l'utilisation du format WebP et le retour à JPG / PNG, le rapport d'aspect ajusté pour s'adapter aux modifications de direction, etc.

Les images réactives ne font pas simplement l'échelle des images, mais chargent les ressources d'image les plus appropriées en fonction de facteurs tels que la taille de l'écran, la résolution, etc. L'élément <picture></picture> est une manière native fournie par HTML, ce qui nous permet de contr?ler plus précisément quelle image devrait être affichée dans différentes conditions.

Qu'est-ce qu'un élément <picture></picture> ?

<picture></picture> est une balise introduite par HTML5 pour fournir plusieurs sources d'image pour différentes conditions de périphérique. C'est un peu comme " @media Query for Images", qui vous permet de définir plusieurs balises <source></source> , chacune avec des requêtes multimédias ou d'autres conditions, en fonction de laquelle le navigateur sélectionnera l'image la plus appropriée à charger.

La structure de base est la suivante:

 <mage>
  <Source srcset = "Large.jpg" media = "(min-width: 1024px)">
  <source srcset = "mediad.jpg" media = "(min-width: 768px)">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175212402729657.jpeg"  class="lazy"  src = "small.jpg" alt = "Description">
</ photo>

Si la largeur du périphérique est supérieure ou égale à 1024px, grand.jpg est chargé; Medium.jpg est chargé entre 768 et 1023px; small.jpg est utilisé s'il est inférieur à 768px.

Pourquoi utiliser <picture> au lieu de srcset de Just <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175212402729657.jpeg" class="lazy" alt="Implémentation d'images réactives à l'aide de l'élément d'image HTML" > ?

Bien que la balise <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175212402729657.jpeg" class="lazy" alt="Implémentation d'images réactives à l'aide de l'élément d'image HTML" > prenne également en charge les attributs srcset et sizes pour les images réactives, sa granularité de contr?le est limitée. Par exemple:

• Vous ne pouvez pas spécifier différentes images en fonction du rapport pixel de différents appareils (tels que l'écran de rétine);
• L'image ne peut pas être commandé en fonction de la direction de l'appareil (écran horizontal / vertical);
• Il est également impossible de remplacer le contenu d'image complètement différent (tels que des images de versions simplifiées affichées sur mobile).

Et <picture> peut facilement gérer ces scénarios. Par exemple: vous souhaitez montrer une photo de composition verticale sur votre téléphone mobile et une composition horizontale sur votre bureau. Dans ce cas, <picture> est très adapté.

Comment implémenter correctement les images réactives à l'aide de <picture> ?

Voici quelques points clés et suggestions:

• Incluez toujours un <img alt="Implémentation d'images réactives à l'aide de l'élément d'image HTML" > se repliez : peu importe le nombre <source> il y a, il doit y avoir une balise <img alt="Implémentation d'images réactives à l'aide de l'élément d'image HTML" > comme garantie, sinon certains navigateurs qui ne prennent pas en charge <picture> ne verront pas l'image.

• Définissez raisonnablement les conditions media : assurez-vous qu'il n'y a pas de conflits ou d'intervalles manquants pour chaque requête multimédia <source> . Par exemple:

  • Le premier <source> est (min-width: 1024px)
  • Le second peut être (min-width: 768px) au lieu de (min-width: 768px) and (max-width: 1023px) parce que le plus grand cas a été exclu auparavant.

• Utilisez des images haute résolution avec srcset : vous pouvez utiliser srcset dans chaque <source> pour spécifier des images 1x et 2x pour améliorer l'expérience de l'écran de la rétine, par exemple:

   <source 
    srcset = "Photo-Large.jpg, Photo-Large-2x.jpg 2x"
    Media = "(min-large: 1024px)"
  >

• Remarquez la taille et les performances du fichier : même si vous fournissez plusieurs images, optimisez leur taille. Les grandes images ne doivent être chargées que lorsqu'elles sont vraiment nécessaires pour éviter de ralentir la page.

Quand <picture> convient-il?

Toutes les images réactives ne nécessitent pas <picture> . Voici quelques scénarios d'utilisation typiques:

• Vous devez changer de contenu d'image complètement différent en fonction de la taille de l'écran (comme la version mobile montrant le gros plan du produit vs version de bureau de l'image de scène)
• Vous souhaitez fournir des images de définition plus élevée pour les écrans haute résolution
• Utilisez de nouveaux formats tels que webp, tout en conservant le repli JPEG / PNG
• Modifier le rapport d'aspect de l'image pour s'adapter à différentes directions d'écran

Par exemple:

 <mage>
  <source srcset = "Hero-wide.webp" type = "image / webp">
  <source srcset = "Hero-wide.jpg">
  <img src = "Hero-Mobile.jpg" alt = "Banner à domicile">
</ photo>

Cela donnera la priorité au chargement des images larges de bureau au format webp. Si ce n'est pas pris en charge, retombez à JPG. Sinon, la version mobile des petites images sera affichée.

Dans l'ensemble, <picture></picture> nous apporte une solution d'image réactive plus flexible. Tant que vous organisez raisonnablement les conditions <source></source> et les utilisez avec srcset et type , vous pouvez réaliser des stratégies de chargement d'images à la fois belles et efficaces. Fondamentalement, tout cela est. Bien qu'il n'y ait pas beaucoup de code, il est facile de causer des problèmes si les détails ne sont pas bien faits.

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!