Direction artistique
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Katie Hempenius
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.html pour 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>.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2018/11/05 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2018/11/05 (UTC)."],[],[]]
.