amp-img

Comportement

L'environnement d'exécution peut différer le chargement des ressources ou le traiter en priorité en fonction de la position de la fenêtre d'affichage, des ressources système, de la bande passante de connexion ou d'autres facteurs. Le composant amp-img permet à l'environnement d'exécution de gérer efficacement les ressources d'image de cette manière.

Le composant amp-img, à l'instar de toutes les ressources AMP récupérées en externe, doit se voir attribuer au préalable une taille explicite (avec les attributs width/height), de sorte que les proportions puissent être déterminées sans qu'il faille récupérer l'image. Le comportement de la mise en page est déterminé par l'attribut layout.

Exemple : Affichage d'une image responsive

Dans l'exemple suivant, l'image affichée répond à la taille de la fenêtre d'affichage en définissant layout=responsive. L'image est étirée et réduite en fonction des proportions spécifiées par les attributs width et height.

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>

En cas d'échec de chargement de la ressource demandée par le composant amp-img, l'espace est vide, sauf si un élément enfant fallback est fourni. Une création de remplacement n'est exécutée que sur la mise en page initiale et aucune création de ce type n'est affectée aux modifications ultérieures de l'attribut src (à l'aide de resize + srcset, par exemple) pour des raisons de performances.

Exemple : Spécifier une image de remplacement

Dans l'exemple suivant, si le navigateur n'est pas compatible avec WebP, l'image JPG de remplacement est affichée :

<amp-img alt="Mountains"
  width="550"
  height="368"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

Vous pouvez définir une couleur d'arrière-plan pour l'espace réservé ou un autre élément visuel en utilisant le sélecteur CSS et en appliquant un style à l'élément proprement dit.

D'autres caractéristiques d'image, comme des légendes, peuvent être mises en œuvre avec le code HTML standard (figure et figcaption, par exemple).

Attributs

src

Cet attribut est semblable à l'attribut src sur la balise img. La valeur doit être une URL qui pointe vers un fichier image pouvant être mis en cache. Les fournisseurs de cache peuvent réécrire ces URL lors de l'intégration de fichiers AMP pour les faire pointer vers une version en cache de l'image.

srcset

Identique à l'attribut srcset sur la balise img. Pour les navigateurs qui ne sont pas compatibles avec srcset, <amp-img> utilise par défaut src. Si seulement srcset est fourni, mais pas src, la première URL de l'attribut srcset est sélectionnée.

sizes

Identique à l'attribut sizes dans la balise img.

alt

Chaîne de texte de substitution, semblable à l'attribut alt dans la balise img.

attribution

Chaîne indiquant l'attribution de l'image. Par exemple, attribution="CC courtesy of Cats on Flicker"

height et width

Taille explicite de l'image utilisée par l'exécution AMP pour déterminer les proportions sans récupérer l'image.

common attributes

Cet élément comprend des attributs communs étendus aux composants AMP.

Application d'un style

Un style peut être appliqué directement au composant amp-img par le biais de propriétés CSS. Ainsi, il est possible de définir un espace réservé avec un arrière-plan gris en utilisant le code suivant :

amp-img {
  background-color: grey;
  }

Conseils et astuces

Agrandir une image jusqu'à la largeur maximale

Si vous souhaitez que l'image soit agrandie à mesure que la fenêtre est redimensionnée, sans toutefois dépasser une largeur maximale, procédez comme suit :

1. Définissez layout=responsive pour <amp-img>.
2. Sur le conteneur de l'image, spécifiez l'attribut CSS max-width:<max width to display image>. Pourquoi spécifier cet attribut sur le conteneur ? Un élément amp-img avec layout=responsive est un élément au niveau du bloc, tandis que <img> est un élément intégré. Vous pouvez également définir display: inline-block dans votre code CSS pour l'élément amp-img.

Différence entre les mises en page "responsive" et "intrinsic"

Les mises en page responsive et intrinsic créent une image qui est agrandie automatiquement. La principale différence réside dans le fait que la mise en page intrinsic utilise une image SVG comme élément de mise à l'échelle. Elle se comporte de la même manière qu'une image HTML standard, tout en conservant un avantage non négligeable, à savoir que le navigateur connaît la taille d'image sur la mise en page initiale. La mise en page intrinsic possède une taille intrinsèque et augmente la taille d'une balise div flottante jusqu'à ce qu'elle atteigne la taille d'image naturelle ou une contrainte CSS telle que la max-width. La mise en page responsive affiche 0x0 dans une balise div flottante, car sa taille provient du parent, lequel n'a pas de taille naturelle lorsqu'il est flottant.

Définir une image de taille fixe

Pour que votre image soit affichée à une taille fixe, procédez comme suit :

1. Définissez layout=fixed pour <amp-img>.
2. Spécifiez les attributs width et height.

Définir les proportions

Dans le cas des images responsives, les attributs width et height ne doivent pas nécessairement correspondre à la largeur et à la hauteur exactes du composant amp-img. Ces valeurs doivent simplement générer les mêmes proportions.

Par exemple, au lieu de spécifier width="900" et height="675", vous pouvez simplement indiquer width="1.33" et height="1".

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="1.33"
  height="1"
  layout="responsive">
</amp-img>

Définir plusieurs fichiers sources pour différentes résolutions d'écran

L'attribut srcset doit être utilisé pour fournir différentes résolutions de la même image, ayant toutes les mêmes proportions. Le navigateur choisit automatiquement le fichier le plus approprié à partir de l'attribut srcset en fonction de la résolution d'écran et de la largeur d'écran de l'appareil de l'utilisateur.

En revanche, l'attribut media affiche ou masque les composants AMP et doit être utilisé lors de la conception de mises en page responsives. Pour afficher des images avec des proportions différentes, vous devez utiliser plusieurs composants <amp-img>, chacun avec un attribut media correspondant aux largeurs d'écran auxquelles chaque instance doit être affichée.

Pour plus d'informations, consultez le guide sur la création de pages AMP responsives.

Conserver les proportions des images de dimensions inconnues

Le système de mise en page AMP doit connaître les proportions d'une image avant de la récupérer. Toutefois, dans certains cas, il se peut que vous ne connaissiez pas les dimensions de l'image. Pour afficher des images de dimensions inconnues et conserver les proportions, associez la mise en page fill d'AMP à la propriété CSS object-fit. Pour en savoir plus, consultez la page How to support images with unknown dimensions sur AMP By Example.

Validation

Consultez les règles relatives à amp-img dans les spécifications du validateur AMP.