Une conception réactive nécessite un équilibre entre performances et flexibilité - la diffusion d'une image correctement dimensionnée et optimisée pour tous les appareils possibles ne devrait pas signifier un temps de chargement lent.  Compte tenu de la variété des méthodes de mise en œuvre de la conception réactive, il est important de comprendre celles qui fonctionnent le mieux pour différents cas d'utilisation.  Dans ce didacticiel, nous verrons quand utiliser l'élément   et comment l'implémenter le plus efficacement avec imgix. <picture>  Direction artistique vs changement de résolution  L'imagerie réactive est généralement utilisée pour résoudre l'un des deux problèmes suivants : la nécessité de modifier l'image pour l'adapter à une conception qui change en fonction de l'appareil (direction artistique) ou la nécessité d'   (changement de résolution). ajuster la résolution de l'image à l'appareil  En termes d'implémentation, c'est un choix entre donner au navigateur suffisamment d'informations pour décider quelle version de l'image utiliser ou la commander directement.  L'élément   est mieux utilisé pour le cas d'utilisation de la direction artistique, car les modifications requises comprendront probablement la modification des rapports d'aspect, le recadrage de l'image différemment et d'autres aspects de conception qui sont plus complexes que la simple diffusion d'une image à plus haute résolution. <picture>  Dans ce cas, vous souhaitez commander directement le navigateur, malgré l'impact potentiel sur les performances.  Utiliser imgix et   pour la direction artistique <picture>  imgix présente deux avantages principaux lors de l'utilisation de l'élément   . Tout d'abord, il supprime le besoin de conserver des copies séparées et prétraitées de l'image pour chaque taille de fenêtre. Appliquez tous les paramètres nécessaires pour ajuster la taille, le recadrage et le ratio de pixels de l'appareil. <picture>  Deuxièmement, cela aide à minimiser les performances en optimisant l'image et en mettant en cache toutes les différentes versions demandées.    L'élément     pour certains anciens navigateurs. Vous pouvez utiliser   pour ajouter la prise en charge de ces clients. Remarque : <picture> n'est pas disponible Picturefill  Voyons comment tout cela s'emboîte. Nous commencerons par une image en orientation paysage, puis fournirons différents paramètres pour montrer la partie la plus significative de l'image pour différents appareils qui peuvent avoir d'autres orientations.     Cliquez sur l'image pour voir les modifications de la fenêtre d'affichage en taille réelle   <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop" media="(min-width: 480px)" > <img src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop"> </picture>  Même s'ils ne sont pas exactement dimensionnés par rapport à l'appareil (compte tenu de la grande variété de tailles d'écran disponibles), la définition de quelques points d'arrêt simples dans la fenêtre et l'application de quelques paramètres peuvent vous permettre d'atteindre la majeure partie du chemin avec beaucoup moins de frais généraux que de générer différentes images originales pour chaque taille.  Vous pouvez continuer à augmenter le nombre de points d'arrêt selon vos besoins, en fonction de ce que vous savez des appareils de vos utilisateurs.  Même avec cette implémentation simple de   , nous avons couvert les bases, en ajustant une seule image selon les besoins pour fournir la version la plus convaincante de l'image pour chaque taille cible. <picture>  Cependant, avec quelques ajouts à ce code, il est possible de faire   un outil puissant pour automatiser la direction artistique sur l'ensemble de votre ensemble d'images, et pas seulement sur une seule photo isolée. <picture>  Direction artistique automatisée  Dans les exemples ci-dessus, le recadrage était simple car le contenu significatif était au milieu (ce qui est la valeur par défaut pour   ). fit=crop  Cependant, si la partie la plus pertinente de l'image n'est pas centrée, vous pouvez toujours utiliser les modes   d'imgix pour ajuster par programmation le début du recadrage, sans avoir à produire manuellement des versions pré-recadrées pour différents rapports d'aspect. crop  imgix propose deux modes de recadrage en fonction du contenu de l'image :   et   . Ils fonctionnent de la même manière en évaluant l'image et en détectant les visages ou les zones de contraste élevé, puis en recadrant avec ceux du centre. crop=faces crop=entropy  Vous trouverez plus de détails sur l'utilisation de ces modes dans nos guides sur   et   . la création d'avatars le recadrage des points d'intérêt  Voyons comment l'utilisation   et des fonctionnalités clés d'imgix telles que les superpositions de texte et les filigranes peut créer un ensemble d'images entièrement personnalisées qui recadrent et changent pour s'adapter à l'écran de n'importe quel appareil. <picture>  Chaque version de ces images est créée à la volée à partir d'un fichier d'image d'origine en réponse à la taille de la fenêtre d'affichage et mise en cache, ce qui minimise considérablement le stockage des images et tout impact sur les performances que   pourrait normalement causer. <picture>  Recadrage    Afficher des exemples de recadrage de visages/d'entropie dans le CodePen   https://codepen.io/imgix/pen/ZQVXBY?embedable=true  Voir l'   par imgix (   ) sur   . élément d'image du stylo et la direction artistique avec imgix @imgix CodePen  Dans l'exemple CodePen, les images s'ajustent à la fenêtre d'affichage en taille et en rapport d'aspect, et le style de recadrage varie en fonction de ce qui est nécessaire à ces dimensions pour garder le président Obama centré.  Selon la variation de l'image, cela se fait avec   ,   , l'alignement des cultures (   , etc.) et parfois   pour zoomer sur une partie de l'image à des tailles plus petites. crop=faces crop=entropy crop=top rect  Le filigrane du logo et le crédit photo sont également ajustés en fonction de la taille et du rembourrage pour s'adapter aux changements de fenêtre d'affichage et changer de position pour éviter le chevauchement du sujet.  Mise à l'échelle du texte et des filigranes  Les superpositions de texte, les mélanges ou les filigranes que vous ajoutez à vos images peuvent être mis à l'échelle et ajustés avec l'image. Voici un exemple qui tire parti de   pour diriger l'art de manière encore plus spectaculaire.  <picture>   Afficher des exemples de filigrane/mélange dans le CodePen   https://codepen.io/imgix/pen/NxoadL?embedable=true  Ajout de la prise en charge DPR  Si vous souhaitez prendre en charge plusieurs résolutions de pixels dans   , vous pouvez le faire en ajoutant des variations   à chaque   . Par exemple, si nous voulions prendre en charge un périphérique à plus haute densité pour notre exemple d'origine, le code ressemblerait à ceci : <picture> DPR srcset   <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x" media="(min-width: 480px)" > <img srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x"> </picture>  Notez à nouveau qu'il n'est pas nécessaire de créer de nouvelles versions de l'image. Créez simplement une copie de la source, ajoutez un paramètre   à l'URL et étiquetez chacune avec le descripteur de densité de pixels approprié (   ,   , etc.). dpr 1x 2x  Votre image originale est tout ce dont vous avez besoin pour créer des variations infinies au fur et à mesure que vos besoins et vos conceptions changent.  Résumé    est un allié puissant pour aborder la complexité de l'imagerie réactive dans des conceptions en évolution rapide. Avec de simples modifications de paramètres, vous pouvez traiter de nouveaux conteneurs de conception, appareils et résolutions d'appareils par programmation au lieu de retraiter l'intégralité de votre catalogue d'images. imgix  Nous soutenons également les approches avant-gardistes telles que   qui tentent de simplifier la conception et la mise en œuvre réactives. Client Hints    pour profiter d'imgix. Créez un compte gratuit dès aujourd'hui  Paramètres imgix pertinents    | Mode de recadrage crop    | Ratio de pixels de l'appareil dpr    | Redimensionner le mode d'ajustement fit    | Région du rectangle source rect  Autres ressources    sélection organisée de sites Web conçus de manière réactive à l'aide de requêtes multimédias. Utile pour examiner différentes approches de la direction artistique.  : Media Queries    Série d'introduction de Cloud Four Design couvrant toutes les méthodes de création d'images réactives et leurs compromis et cas d'utilisation  : Images réactives 101    apprenez à utiliser   avec les paramètres de recadrage du point focal d'imgix pour rendre vos images attrayantes, quelle que soit leur taille.  : Recadrage du point focal pour une direction artistique réactive <picture>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

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

Trop long; Pour lire

Make resilience your competitive advantage

Utiliser<picture> pour rendre dynamiquement des images pour différents environnements utilisateur

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Télégramme : le pont de Crypto Island vers le continent

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Télégramme : le pont de Crypto Island vers le continent

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps