Ajouter des images et vidéos

tout comme sur une page HTML normale, AMP vous permet d'intégrer des contenus image, vidoé et audio. Découvrez la différence avec les équivalents AMP et apprenez comment les inclure dans vos pages.

Pourquoi pas <img>, <video> et <audio>?

AMP ne prend pas en charge les équivalents HTML par défaut pour l'affichage des médias, comme <img>. Nous fournissons des composants équivalents pour les raisons suivantes:

• Nous devons comprendre la disposition de la page avant le chargement des ressources, ce qui est crucial pour assurer le préchargement de la première fenêtre.
• Nous devons contrôler les demandes réseau liées au chargement différé et hiérarchiser les ressources de manière efficace

Attention: bien que pas pris en charge, ils seront lus, mais AMP ne validera pas vos pages et vous ne bénéficierez pas des avantages d'AMP.

Images

Ajoutez une image dans votre page en utilisant l'élément amp-img, comme suit:

<amp-img
  alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
</amp-img>

Dans cet exemple très basique, l'image s'affichera avec la hauteur et la largeur fixes spécifiées. Au minimum, une largeur et une hauteur explicites doivent être définies.

Comment afficher des images lorsque JavaScript est désactivé

Étant donné que <amp-img> s'appuie sur JavaScript, si l'utilisateur choisit de désactiver les scripts, les images ne s'afficheront pas. Dans ce cas, vous devez fournir une image de secours en utilisant <img> et <noscript>, comme suit:

<amp-img
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
  <noscript>
    <img
      src="/static/inline-examples/images/sunset.jpg"
      width="264"
      height="195"
    />
  </noscript>
</amp-img>

Mises en page avancées

AMP permet de créer des images entièrement réactives bien plus facilement qu'avec du CSS/HTML standard. Dans sa forme la plus simple, il vous suffit d'ajouter layout="responsive":

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

Comportement et caractères de remplacement

Le runtime HTML AMP peut gérer efficacement les ressources image, en choisissant de retarder ou de hiérarchiser le chargement des ressources en fonction de la position de la fenêtre, des ressources système, de la bande passante ou d'autres facteurs.

Images animées

L'élément amp-anim est très similaire à l'élément amp-img et offre des fonctionnalités supplémentaires pour gérer le chargement et la lecture d'images animées telles que les GIF.

<amp-anim
  width="400"
  height="300"
  src="/static/inline-examples/images/wavepool.gif"
>
  <amp-img
    placeholder
    width="400"
    height="300"
    src="/static/inline-examples/images/wavepool.png"
  >
  </amp-img>
</amp-anim>

Vidéo

Incluez une vidéo dans votre page à l'aide de l'élément amp-video.

Utilisez cet élément uniquement pour l'intégration directe de fichiers vidéo HTML5. L'élément assure un chargement différé de la ressource vidéo spécifiée par l'attribut src, à un moment déterminé par AMP.

Incluez un caractère de remplacement avant le démarrage de la vidéo et une solution de secours si le navigateur ne prend pas en charge les vidéos HTML5, par exemple:

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Audio

Incluez une ressource audio dans votre page, en utilisant l'élément amp-audio.

Utilisez cet élément uniquement pour l'intégration directe de fichiers audio HTML5. Comme toutes les ressources externes intégrées dans une page AMP, l'élément assure le chargement différé de la ressource audio spécifiée par l'attribut src, à un moment déterminé par AMP.

Incluez une solution de secours, si le navigateur ne prend pas en charge l'audio HTML5, par exemple:

<amp-audio width="400"
  height="200"
  src="/static/inline-examples/audio/cat-meow.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg"
    src="/static/inline-examples/audio/cat-meow.mp3">
  <source type="audio/ogg"
    src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>

• Written by @pbakaus
  with contributions from @Meggin and @bpaduch