Direction artistique

Katie Hempenius
Katie Hempenius

  • Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran
  • Actualisez l'application avec différentes tailles de navigateur. Remarquez à quel point les images sont différentes sont non seulement de tailles différentes, mais aussi de recadrages et et différents formats.

Direction artistique affiche différentes images sur différentes tailles d'écran.

Une image responsive charge différentes tailles de la même image. La direction artistique prend des images complètement différentes en fonction l'écran.

Utiliser la direction artistique pour améliorer la présentation visuelle. Par exemple, les différents Dans cette démonstration, les recadrages d'images permettent de s'assurer que le point d'intérêt (la fleur) toujours affiché en détail, quel que soit l'écran. Les avantages de Art Direction sont purement esthétiques ; il n'offre aucun avantage en termes de performances par rapport aux images responsives.

Afficher le code

  • Affichez index.html pour voir le code de direction artistique de cette démonstration.

Fonctionnement du code

La direction artistique utilise <picture>, <source>, et <img>.

image

Le tag <picture> fournit un wrapper pour zéro, une ou plusieurs balises <source> et un tag <image>.

source

Le tag <source> spécifie une ressource multimédia.

Le navigateur utilise le premier tag <source> avec une requête média. qui renvoie la valeur "true". Si aucune des requêtes média ne correspond, le navigateur charge l'image spécifiée par <img>. .

img

La balise <img> permet à ce code de fonctionner dans les navigateurs qui ne l'utilisent pas. acceptent la balise <picture>.

Si un navigateur n'accepte pas la balise <picture>, il charge le spécifiée par le tag <img>.