Comment créer des images réactives avec SRCSET

Cet article, qui fait partie de la série de développement Web de Microsoft, explore les images réactives - un aspect crucial de la création de sites Web qui fonctionnent parfaitement sur divers appareils. Ce n'est plus facultatif; C'est une nécessité dans notre monde multi-appareils.

Prise des clés:

• Utilisez l'attribut srcset pour offrir diverses sources d'image optimisées pour différents rapports de pixels de l'appareil.
• combiner srcset avec l'attribut sizes pour spécifier les tailles d'affichage d'image par rapport à la fenêtre, guidant le navigateur pour choisir la meilleure image.
• Tirez parti de l'élément <picture></picture> pour une flexibilité améliorée, permettant une sélection d'images basée sur les conditions multimédias (comme les requêtes multimédias CSS) et en prenant en charge divers formats d'image via l'attribut type.
• Incluez toujours une image par défaut à l'aide de l'attribut src comme secours pour les navigateurs manquant srcset support.
• Testez soigneusement la réactivité et les performances sur divers appareils et navigateurs à l'aide d'outils comme ceux proposés par Microsoft pour les vérifications de compatibilité et l'optimisation de l'expérience Web.

Comprendre les images réactives:

Une image réactive adapte sa présentation au dispositif d'observation. "Meilleure forme" signifie différentes choses:

• Affichage de différents actifs d'image basés sur la taille de l'écran (par exemple, une image différente pour un ordinateur portable de 13,5 pouces par rapport à un téléphone de 5 pouces).
• en utilisant différentes images basées sur la résolution de l'appareil (ou le rapport périphérique de périphérique - le rapport des pixels de l'appareil aux pixels CSS).
• Sélection d'un format d'image (comme JPEG XR) s'il est pris en charge par le navigateur, potentiellement pour une meilleure compression.

Activer des images réactives:

Bien qu'il existe des méthodes de script plus anciennes, elles ne sont pas recommandées en raison de problèmes potentiels avec plusieurs téléchargements ou des images manquantes. L'approche préférée utilise:

1. srcset Attribut
2. sizes Attribut
3. <picture></picture> élément

L'attribut srcset:

Avant de plonger dans srcset usage, définissons:

Ratio d'appareil-pixel: Il s'agit du nombre de pixels de l'appareil par pixel CSS, influencé par:

1. Densité des pixels de l'appareil (pixels physiques par pouce): les dispositifs de résolution plus élevés ont une densité plus élevée et donc un rapport périphérique de dispositif plus élevé au même niveau de zoom.
2. Niveau de zoom du navigateur: les niveaux de zoom plus élevés augmentent le rapport périphérique de périphérique pour un dispositif donné.

Basic srcset L'implémentation utilise le rapport x Descripteur pour le rapport périphérique de périphérique:

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg" class="lazy" alt="How to Build Responsive Images with srcset "></code>

• 1x: space-needle.jpg pour un rapport périphérique-pixel de 1.
• 2x: space-needle-2x.jpg pour un rapport périphérique-pixel de 2.
• 3x: space-needle-hd.jpg pour un rapport périphérique-pixel de 3.

L'attribut src sert de repli pour les navigateurs sans support srcset. Le descripteur w spécifie la largeur d'image:

<code class="language-html"><img  src="/static/imghwm/default1.png" data-src="images/space-needle.jpg" class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Comment créer des images réactives avec SRCSET" ></code>

L'attribut sizes:

Pour contrôler la taille de l'image en fonction de la taille de la fenêtre, utilisez l'attribut sizes avec le descripteur w dans srcset.

Exemple 1 (image à la large largeur de la fenêtre):

<code class="language-html"><img  src="/static/imghwm/default1.png" data-src="images/space-needle.jpg" class="lazy" sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Comment créer des images réactives avec SRCSET" ></code>

Exemple 2 (dimensionnement réactif basé sur la largeur de la fenêtre):

<code class="language-html"><img  src="/static/imghwm/default1.png" data-src="images/space-needle.jpg" class="lazy" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Comment créer des images réactives avec SRCSET" ></code>

L'élément <picture></picture>:

L'élément <picture></picture> permet la sélection d'images en fonction des capacités de taille et de navigateur rendues. Il contient des éléments <source></source> avec srcset, sizes, media et type attributs. Un <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png" class="lazy" alt="How to Build Responsive Images with srcset ">

(Remarque: les sources d'image et les tailles sont illustratives.)

Conclusion:

Les images réactives améliorent l'expérience utilisateur entre les appareils. Implémentez-les pour des performances optimales de site Web. D'autres ressources et outils de Microsoft sont disponibles pour les tests de navigateur croisé et les meilleures pratiques de développement Web. Une section FAQ détaillée suit, aborder des questions courantes sur srcset implémentation.

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!