Implémentation d'images réactives avec les attributs HTML SRCSET et tailles

SRCSET et les tailles sont des propriétés clés pour l'implémentation HTML des images réactives. SRCSET fournit plusieurs sources d'image et leur densité de largeur ou de pixel, telles que 400W et 800W, et le navigateur sélectionne l'image appropriée en conséquence; Les tailles définissent la largeur d'affichage de l'image sous différentes largeurs d'écran, telles que (max-largeur: 600px) 100VW, 50VW, afin que le navigateur puisse correspondre plus précisément à la taille de l'image. Dans une utilisation réelle, vous devez préparer des images multi-taille, clairement nommées, concevoir la disposition conformément à la requête multimédia, et tester les performances de l'équipement pour éviter d'ignorer les tailles ou les erreurs unitaires, enregistrant ainsi la bande passante et améliorant les performances.

Lorsque les pages Web se chargent, les images occupent souvent la bande passante maximale. Afin d'activer différents appareils pour charger efficacement des images de la bonne taille, HTML fournit des propriétés srcset et sizes pour implémenter des images réactives.

Qu'est-ce que srcset ?

srcset vous permet de fournir plusieurs sources d'image pour votre navigateur et de lui dire la largeur ou la densité de pixels de ces images. De cette façon, le navigateur peut sélectionner l'image la plus appropriée à charger en fonction de la taille de l'écran et de la résolution de l'appareil actuel.

Par exemple:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225052011544.jpeg"  class="lazy"  src = "image-400w.jpg" 
     srcset = "image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
     alt = "Exemple d&#39;image">

Dans le code ci-dessus, le navigateur sélectionnera un fichier image approprié dans la liste srcset en fonction du rapport Pixel d'espace et de périphérique disponible.

Points clés:

• Chaque image est suivie par sa largeur (se termine par w ), comme 400w
• Le navigateur porte des jugements en fonction de la taille de la fenêtre, du rapport de mise à l'échelle et d'autres facteurs

Quelle est la fonction des sizes ?

Bien que srcset fournit plusieurs images, le navigateur ne sait pas quelle est la taille de l'image sur la page. À l'heure actuelle, sizes sont nécessaires pour dire au navigateur: "Quelle est la largeur de cette image sous différentes largeurs d'écran."

Par exemple:

 <img src = "image-400w.jpg" 
     srcset = "image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
     tailles = "(largeur max: 600px) 100vw, 50vw"
     alt = "Exemple d&#39;image">

La signification de cette sizes est:

• Si la largeur de l'écran est inférieure ou égale à 600px, l'image remplira toute la largeur de la fenêtre (100VW)
• Sinon, l'image occupe la moitié de la largeur de la fenêtre (50VW)

Avantages de l'utilisation en combinaison avec srcset :

• Le navigateur peut sélectionner plus précisément la taille de l'image "juste à droite"
• Évitez le chargement d'images trop grandes ou trop petites, sauvant la bande passante et améliorant les performances

Suggestions dans une utilisation réelle

Pour mieux utiliser ces deux propriétés, vous pouvez suivre les suggestions pratiques suivantes:

• Préparer des images de plusieurs tailles : il est recommandé de générer 3 à 4 versions de largeurs communes (comme 400px, 800px, 1200px)
• Clear Naming : par exemple, utilisez -400w.jpg et -800w.jpg pour marquer la largeur de l'image
• Disposition de conception en conjonction avec la requête multimédia : assurez-vous que les points d'arrêt des sizes sont conformes à la requête multimédia CSS
• Testez les performances de différents appareils : Chrome Devtools peut être utilisé pour simuler différents appareils pour voir quelle image est chargée

Si vous utilisez CMS ou des générateurs de sites Web statiques, beaucoup prennent en charge générant automatiquement srcset et des images de différentes tailles, ce qui peut vous faire économiser les tracas du traitement manuel.

N'ignorez pas les petits détails

Certains développeurs n'écrivent que srcset mais ignorent sizes , afin que le navigateur ne puisse juger grossièrement la taille de l'image en fonction de la largeur de la fenêtre, ce qui peut conduire à la mauvaise sélection d'image. Surtout lorsque l'image n'est pas une largeur complète, l'ajout sizes peut vraiment donner un jeu complet à l'avantage réactif.

Un autre endroit facile pour faire des erreurs est que l'unité écrit de manière incorrecte, comme l'écriture w AS px ou le W Missing w , ce qui entraînera une analyse correcte du navigateur.

Fondamentalement, c'est tout. L'utilisation rationnelle de srcset et sizes peut non seulement améliorer la vitesse de chargement, mais également améliorer l'expérience de navigation des utilisateurs mobiles.

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!