Comment implémenter des images réactives à l'aide de & lt; image & gt; élément et attribut srcset?

Implémentation d'images réactives avec <picture></picture> et srcset

L'élément <picture></picture> , combiné avec l'attribut srcset , fournit un moyen robuste et flexible d'implémenter des images réactives. Il vous permet de servir différentes versions d'image optimisées pour différentes tailles d'écran et densités. Voici comment vous l'implémentez:

L'élément <picture></picture> agit comme un conteneur. À l'intérieur, vous spécifiez différents éléments <source></source> , chacun avec un attribut srcset définissant un ensemble de sources d'image et leurs descripteurs correspondants. Le navigateur sélectionne l'image la plus appropriée en fonction des capacités de l'appareil. Enfin, vous incluez un élément <img src="/static/imghwm/default1.png" data-src="image-low-res.jpg" class="lazy" alt="Comment implémenter des images réactives à l'aide de & lt; image & gt; élément et attribut srcset?" > comme secours pour les navigateurs qui ne prennent pas en charge <picture></picture> .

Par exemple:

 <code class="html"><picture> <source srcset="image-high-res.jpg 2x, image-low-res.jpg 1x" media="(min-width: 1024px)"> <source srcset="image-medium-res.jpg 1.5x, image-low-res.jpg 1x" media="(min-width: 768px)"> <source srcset="image-low-res.jpg" media="(max-width: 767px)"> <img src="/static/imghwm/default1.png" data-src="image-low-res.jpg" class="lazy" alt="Description of image"> </source></source></source></picture></code>

Dans cet exemple:

• srcset="image-high-res.jpg 2x, image-low-res.jpg 1x" spécifie deux images pour les écrans d'une largeur minimale de 1024px. 2x indique une image haute résolution (double la densité), tandis que 1x est une image de résolution standard. Le navigateur choisira le plus approprié en fonction du rapport Pixel de périphérique (DPR).
• Des attributs srcset similaires sont utilisés pour d'autres requêtes multimédias, ciblant différentes tailles d'écran.
• L'élément <img alt="Comment implémenter des images réactives à l'aide de & lt; image & gt; élément et attribut srcset?" > fournit une secours si le navigateur ne prend pas en charge <picture></picture> ou <source></source> .

N'oubliez pas de remplacer "image-high-res.jpg" , "image-medium-res.jpg" et "image-low-res.jpg" avec vos noms de fichiers d'image réels. L'attribut alt est crucial pour l'accessibilité.

Avantages de <picture></picture> et srcset

L'utilisation <picture></picture> et srcset offre plusieurs avantages par rapport aux autres techniques d'image réactives comme l'utilisation max-width ou simplement de redimensionner des images avec un logiciel d'édition d'image:

• Contrôle précis: <picture></picture> permet un contrôle granulaire sur l'image servie en fonction de divers facteurs (taille de l'écran, densité de pixels, capacités de l'appareil). Cela garantit une qualité d'image et des performances optimales sur tous les appareils.
• Efficacité: En ne servant que la résolution d'image nécessaire, vous réduisez la consommation de bande passante et améliorez les temps de chargement des pages. Ceci est particulièrement crucial pour les utilisateurs mobiles.
• Flexibilité: vous pouvez combiner différents formats d'image (par exemple, webp pour une meilleure compression) dans l'élément <picture></picture> , en tirant parti du meilleur format pour chaque appareil.
• Affiration à l'avenir: L'attribut <picture></picture> Element et srcset sont pris en charge par tous les principaux navigateurs modernes, et cette méthode est recommandée par de nombreux experts en performance Web.

Optimisation d'images pour <picture></picture> et srcset

L'optimisation des images est cruciale pour les temps de chargement rapide lors de l'utilisation <picture></picture> et srcset . Voici comment:

• Choisissez le bon format: utilisez des formats modernes comme WebP, AVIF ou JPEG 2000 qui offrent une compression supérieure par rapport au JPEG ou PNG traditionnel. Envisagez d'utiliser différents formats pour différentes tailles d'écran et densités, en sélectionnant le meilleur compromis entre la qualité et la taille du fichier.
• Compression: utilisez des outils d'optimisation d'image (par exemple, TinYPNG, ImageOptim) pour réduire les tailles de fichiers sans perte de qualité significative. Considérez la compression avec perte pour les images où une légère réduction de qualité est acceptable.
• Résolutions appropriées: ne fournissez que les résolutions nécessaires. Évitez les images trop grandes qui sont inutilement à haute résolution pour les écrans plus petits.
• Principes de conception réactifs: assurez-vous que vos images évoluent proportionnellement à votre disposition à l'aide de CSS. Évitez d'utiliser de grandes images qui sont ensuite réduites à l'aide de CSS - c'est inefficace.

Compatibilité du navigateur

<picture></picture> et srcset sont largement pris en charge par les navigateurs modernes. Cependant, les navigateurs plus âgés pourraient ne pas les soutenir pleinement. Voici ce que vous devriez considérer:

• Mécanisme de secours: incluez toujours un élément <img alt="Comment implémenter des images réactives à l'aide de & lt; image & gt; élément et attribut srcset?" > dans l'élément <picture></picture> en tant que repli pour les navigateurs qui ne prennent pas en charge <picture></picture> ou srcset . Cela garantit qu'une image est toujours affichée.
• Amélioration progressive: <picture></picture> et srcset sont une amélioration progressive. Ils améliorent l'expérience pour soutenir les navigateurs, tout en fournissant un repli fonctionnel aux navigateurs plus âgés. L'image de secours sera utilisée par les anciens navigateurs.
• Tests: testez soigneusement votre implémentation sur différents navigateurs et appareils pour assurer un rendu et des performances cohérentes. Utilisez des outils de développeur de navigateur pour vérifier quelle image est chargée et assurez-vous qu'elle correspond à vos attentes. Des outils comme le phare peuvent également fournir des informations précieuses sur l'optimisation de l'image.

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!