Étant donné que  , 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. près de 50 % du poids d'une page typique est constitué d'images  Ce didacticiel couvre les tenants et les aboutissants de l'utilisation de l'attribut   et comment imgix facilite le processus. srcset  La diffusion d'images correctement dimensionnées est importante car elle peut réduire le nombre d'octets transférés et   . L'attribut   est l'un des meilleurs moyens de le faire aujourd'hui.  la surcharge du processeur srcset  srcset et densités d'affichage    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   est facile : srcset img   <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   et   , nous pouvons simplifier la quantité d'efforts nécessaires pour générer les attributs   sur nos images. Pour cet exemple, nous utiliserons l'image située à : w dpr srcset   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" >   https://codepen.io/imgix/pen/aOxmqg?embedable=true  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é   ,   et   à nos actifs 1x, 2x et 3x, respectivement. Le paramètre   indique à imgix de traiter les paramètres   comme   (également appelés "pixels CSS"). dpr=1 dpr=2 dpr=3 dpr w des pixels indépendants de l'appareil  Ainsi, l'image 400x300 à   sera en fait une image 800x600 pixels. L'image   sera de 1200×900 pixels.  dpr=2 dpr=3  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   sort. imgix prend actuellement en charge jusqu'à   . 4x dpr=5  Cette pratique fonctionne mieux avec des mises en page d'images fixes. L'utilisation   avec   est actuellement   . srcset dpr largement prise en charge  Utilisation   et   avec Media Queries srcset sizes  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   . Cette solution vous permet de cibler des tailles en fonction de définitions de requêtes multimédias dans un attribut   . srcset 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   , nous ciblons deux requêtes de comportement pour les images. sizes  À une fenêtre de   ou plus, les images s'afficheront à 1/3 de la largeur de la fenêtre. 36em  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>.   https://codepen.io/imgix/pen/VLNZaW?embedable=true  Meilleures pratiques d'utilisation d'imgix  Il y a plus à penser lors de la livraison des meilleures images possibles avec   et imgix. srcset  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   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. srcset  Heureusement, de nombreuses   peuvent générer automatiquement un   optimal pour vous. bibliothèques imgix srcset  Utiliser  fit=max  L'utilisation du paramètre   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   , il n'y aura pas d'extrapolation d'image. En savoir plus sur   dans la documentation. fit=max dpr=3 fit  Utiliser  auto=format  Le paramètre   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. auto=format  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   dans la documentation. la négociation automatique de contenu  Utiliser une qualité variable  Lorsque vous définissez   avec imgix, vous pouvez envisager d'ajuster la qualité de vos images. Le réglage du paramètre   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. dpr q    La taille de l'image est de 21,3 Ko.   .  ?q=80 Essayez-le et voyez la différence dans Sandbox    La taille de l'image est de 34,7 Ko.  ?dpr=2&q=40 Essayez-le et voyez la différence dans Sandbox.     La taille de l'image est de 42,1 Ko.  ?dpr=3&q=20 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   DPR : srcset   <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>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps