Essayer cette démonstration
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
. - Rechargez l'application avec différentes tailles de navigateur. Notez à quel point les images sont différentes: elles ne sont pas seulement de tailles différentes, mais aussi de recadrage et de format différents.
Que se passe-t-il ?
La direction artistique montre 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 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 afficher le code d'orientation 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 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 multimédia qui renvoie la valeur "true". Si aucun des requêtes multimédias ne correspond, le navigateur revient à charger l'image spécifiée par <img>.
.
img
La balise <img> permet à ce code de fonctionner dans 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>.