Essayer cette démo
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
. - Actualisez l'application dans différentes tailles de navigateur. Notez à quel point les images sont différentes: elles sont non seulement de tailles, mais aussi de cadrages et de formats différents.
Que se passe-t-il ?
L'option Direction artistique permet d'afficher 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'écran.
Utiliser la direction artistique pour améliorer la présentation visuelle. Par exemple, grâce aux différents recadrages d'images de cette démonstration, le point d'intérêt (la fleur) est toujours affiché en détail, quel que soit l'affichage. Les avantages de la direction artistique sont purement esthétiques : il n'offre aucun avantage en termes de performances par rapport aux images responsives.
Afficher le code
- Affichez
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>.
image
La balise <picture> fournit un wrapper pour zéro, une ou plusieurs balises <source> et une balise <image>.
source
La balise <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 requête média ne correspond, le navigateur charge l'image spécifiée par <img>.
possédant le même tag réseau.
img
La balise <img> permet à ce code de fonctionner dans les navigateurs qui n'acceptent pas 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>.