Guide du débutant : images réactives avec srcset

Étant donné queprès de 50 % du poids d'une page typique est constitué d'images , l'optimisation des images est extrêmement importante pour faire fonctionner un site performant. Chaque octet que vous n'avez pas à transférer pour servir votre contenu signifie une page allégée et des temps de chargement plus rapides pour vos utilisateurs.

Ce didacticiel couvre les tenants et les aboutissants de l'utilisation de l'attribut srcset et comment imgix facilite le processus.

La diffusion d'images correctement dimensionnées est importante car elle peut réduire le nombre d'octets transférés et la surcharge du processeur . L'attribut srcset est l'un des meilleurs moyens de le faire aujourd'hui.

srcset et densités d'affichage

srcset fournit un moyen simple de spécifier différentes images pour différentes résolutions de périphérique. Il permet aux sites de fournir des versions d'images 2x, 3x ou supérieures aux appareils modernes dotés d'écrans haute résolution. L'utiliser dans une balise img est facile :

 <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >

Bien que cela fournisse les meilleurs actifs aux utilisateurs, cela déplace la charge sur le service pour générer et stocker chaque version de chaque actif. Cela peut entraîner une augmentation des coûts de stockage et vous ne pourrez peut-être jamais servir tous les actifs que vous générez.

Lorsqu'il s'agit d'une grande bibliothèque ou d'un contenu généré par l'utilisateur, cela est intenable.

Avec imgix, toute votre bibliothèque d'images est instantanément prête pour srcset .

Utiliser srcset avec imgix

En utilisant les paramètres d'URL imgix w et dpr , nous pouvons simplifier la quantité d'efforts nécessaires pour générer les attributs srcset sur nos images. Pour cet exemple, nous utiliserons l'image située à :

https://assets.imgix.net/examples/bluehat.jpg

Nous voulons diffuser cette image à 400 pixels de large :

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

Nous obtenons une balise d'image qui fournit la meilleure résolution pour chaque appareil en fonction de son rapport appareil-pixel (DPR). imgix servira automatiquement plus de pixels avec le paramètre dpr .

Calcul du rapport appareil-pixel

Vous pouvez voir que nous avons appliqué dpr=1 , dpr=2 et dpr=3 à nos actifs 1x, 2x et 3x, respectivement. Le paramètre dpr indique à imgix de traiter les paramètres w comme des pixels indépendants de l'appareil (également appelés "pixels CSS").

Ainsi, l'image 400x300 à dpr=2 sera en fait une image 800x600 pixels. L'image dpr=3 sera de 1200×900 pixels.

Cela vous donne le meilleur des deux mondes : une résolution complète pour les appareils qui la prennent en charge, sans fournir plus de données que nécessaire aux appareils qui ne l'utiliseront pas. En utilisant imgix, nous n'avons qu'à stocker l'actif d'origine, puis à le manipuler à la volée, comme nous l'avons vu ci-dessus.

Cela supprime également les maux de tête si et quand un appareil 4x sort. imgix prend actuellement en charge jusqu'à dpr=5 .

Cette pratique fonctionne mieux avec des mises en page d'images fixes. L'utilisation srcset avec dpr est actuellement largement prise en charge .

Utilisation srcset et sizes avec Media Queries

Une approche différente de la gestion des images réactives pour les mises en page fluides consiste à utiliser des définitions de taille avec srcset . Cette solution vous permet de cibler des tailles en fonction de définitions de requêtes multimédias dans un attribut sizes .

Le navigateur demandera l'image la plus appropriée ou, selon le navigateur, chargera la meilleure image du cache lorsqu'elle sera disponible.

L'exemple suivant illustre le dimensionnement de trois images avec imgix à 1024, 640 et 480 pixels de large. En utilisant l'attribut sizes , nous ciblons deux requêtes de comportement pour les images.

À une fenêtre de 36em ou plus, les images s'afficheront à 1/3 de la largeur de la fenêtre.

En dessous de cette taille, les images s'afficheront en pleine taille de la fenêtre d'affichage. À ces tailles, le navigateur déterminera quelle image charger lors du rendu de la page pour la taille cible donnée.

 <img srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w, https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w, https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w" src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop" sizes="(min-width: 36em) 33.3vw, 100vw" >

Voir le stylo <a href="https://codepen.io/imgix/pen/VLNZaW/" target="_blank">VLNZaW</a> par imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) sur <a href="https://codepen.io" target="_blank">CodePen</a>.

Meilleures pratiques d'utilisation d'imgix

Il y a plus à penser lors de la livraison des meilleures images possibles avec srcset et imgix.

imgix offre la possibilité d'ajouter des opérations supplémentaires pour vous donner plus de contrôle sur vos images de sortie, et comme elles sont définies dans l'URL, vous pouvez affiner vos paramètres et apporter des modifications tardives à mesure que les décisions changent.

L'un des défis de l'utilisation srcset est que vous souhaitez générer suffisamment de tailles pour que la plupart de vos utilisateurs téléchargent des images dont la taille est proche de ce qu'ils voient à l'écran, mais si vous générez trop de tailles, vous pouvez finir par avoir un impact sur le cache. -capacité, ce qui pourrait avoir un impact négatif sur les performances.

Heureusement, de nombreuses bibliothèques imgix peuvent générer automatiquement un srcset optimal pour vous.

Utiliser fit=max

L'utilisation du paramètre fit=max sur une URL imgix garantit qu'une image n'est jamais livrée plus grande que sa taille d'origine. Ainsi, lors de la demande d'une image dpr=3 , il n'y aura pas d'extrapolation d'image. En savoir plus sur fit dans la documentation.

Utiliser auto=format

Le paramètre auto=format fournira des images WebP légères pour les navigateurs qui le prennent en charge (Chrome, Firefox, etc.) et reviendra au format d'origine pour les autres instances.

Des formats plus modernes comme WebP peuvent réduire considérablement la quantité de données d'image envoyées au client ; parfois jusqu'à 35 %. En savoir plus sur la négociation automatique de contenu dans la documentation.

Utiliser une qualité variable

Lorsque vous définissez dpr avec imgix, vous pouvez envisager d'ajuster la qualité de vos images. Le réglage du paramètre q sur des valeurs inférieures pour des DPR plus élevés vous permet de réduire la taille du fichier tout en conservant un ensemble de pixels plus dense pour votre image.

?q=80 La taille de l'image est de 21,3 Ko. Essayez-le et voyez la différence dans Sandbox .

?dpr=2&q=40 La taille de l'image est de 34,7 Ko. Essayez-le et voyez la différence dans Sandbox.

?dpr=3&q=20 La taille de l'image est de 42,1 Ko. Essayez-le et voyez la différence dans Sandbox.

Cette pratique courante est facilitée par l'API d'URL imgix. Le réglage de la qualité fonctionne particulièrement bien avec les formats avec perte tels que WebP et JPEG.

Mettre tous ensemble

Voici une implémentation de ces exemples appliqués à notre exemple srcset DPR :

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

Voir le stylo <a href="https://codepen.io/imgix/pen/MwRjzZ/" target="_blank">MwRjzZ</a> par imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) sur <a href="https://codepen.io" target="_blank">CodePen</a>.

Résumé et tutoriels associés

L'imagerie réactive est un domaine de mise en œuvre en évolution rapide, et différentes méthodes sont applicables à différents cas d'utilisation. Voici nos autres tutoriels qui abordent des aspects du responsive design.

• Conception pour Retina, Déploiement avec imgix
• Images réactives de nouvelle génération avec conseils client
• Utiliser imgix avec <image>