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

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 <picture> et comment l'implémenter le plus efficacement avec imgix.

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' ajuster la résolution de l'image à l'appareil (changement de résolution).

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 <picture> 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.

Dans ce cas, vous souhaitez commander directement le navigateur, malgré l'impact potentiel sur les performances.

Utiliser imgix et <picture> pour la direction artistique

imgix présente deux avantages principaux lors de l'utilisation de l'élément <picture> . 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.

Deuxièmement, cela aide à minimiser les performances en optimisant l'image et en mettant en cache toutes les différentes versions demandées.

Remarque : L'élément <picture> n'est pas disponible pour certains anciens navigateurs. Vous pouvez utiliser Picturefill pour ajouter la prise en charge de ces clients.

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 <picture> , 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.

Cependant, avec quelques ajouts à ce code, il est possible de faire <picture> 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.

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 crop 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.

imgix propose deux modes de recadrage en fonction du contenu de l'image : crop=faces et crop=entropy . 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.

Vous trouverez plus de détails sur l'utilisation de ces modes dans nos guides sur la création d'avatars et le recadrage des points d'intérêt .

Voyons comment l'utilisation <picture> 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.

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 <picture> pourrait normalement causer.

Recadrage

Afficher des exemples de recadrage de visages/d'entropie dans le CodePen

Voir l' élément d'image du stylo et la direction artistique avec imgix par imgix ( @imgix ) sur 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 crop=faces , crop=entropy , l'alignement des cultures ( crop=top , etc.) et parfois rect pour zoomer sur une partie de l'image à des tailles plus petites.

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 <picture> pour diriger l'art de manière encore plus spectaculaire.

Afficher des exemples de filigrane/mélange dans le CodePen

Ajout de la prise en charge DPR

Si vous souhaitez prendre en charge plusieurs résolutions de pixels dans <picture> , vous pouvez le faire en ajoutant des variations DPR à chaque srcset . 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> <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 dpr à l'URL et étiquetez chacune avec le descripteur de densité de pixels approprié ( 1x , 2x , etc.).

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é

imgix 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.

Nous soutenons également les approches avant-gardistes telles que Client Hints qui tentent de simplifier la conception et la mise en œuvre réactives.

Créez un compte gratuit dès aujourd'hui pour profiter d'imgix.

Paramètres imgix pertinents

• crop | Mode de recadrage
• dpr | Ratio de pixels de l'appareil
• fit | Redimensionner le mode d'ajustement
• rect | Région du rectangle source

Autres ressources

• Media Queries : 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.

• Images réactives 101 : 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

• Recadrage du point focal pour une direction artistique réactive : apprenez à utiliser <picture> avec les paramètres de recadrage du point focal d'imgix pour rendre vos images attrayantes, quelle que soit leur taille.