Essayer cette démo
- Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran)
. - Actualisez l'application en utilisant différentes tailles de navigateur. Notez à quel point les images sont différentes : elles n'ont pas seulement des tailles différentes, mais aussi des recadrages et des formats différents.
Que se passe-t-il ?
La 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 va encore plus loin et charge des images complètement différentes en fonction de l'affichage.
Utilisez la direction artistique pour améliorer la présentation visuelle. Par exemple, les différents recadrages d'image de cette démonstration garantissent que le point d'intérêt (la fleur) est toujours affiché en détail, quel que soit l'écran. Les avantages de la direction artistique sont purement esthétiques. Elle n'offre aucun avantage en termes de performances par rapport aux images responsives.
Afficher le code
- Consultez
index.htmlpour voir le code de direction artistique de cette démonstration.
Fonctionnement du code
La direction artistique utilise les balises <picture>, <source> et <img>.
photo
La balise <picture> fournit un wrapper pour zéro ou plusieurs balises <source> et une balise <image>.
source
La balise <source> spécifie une ressource multimédia.
Le navigateur utilise la première balise <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 sur les navigateurs qui ne sont pas compatibles avec la balise <picture>.
Si un navigateur n'est pas compatible avec la balise <picture>, il charge l'image spécifiée par la balise <img>.