Include images & video

Mit AMP kannst du wie auf einer normalen HTML Seite Bild-, Video- und Audioinhalte einbetten. Erfahre, wie sich die entsprechenden AMP Elemente unterscheiden und wie du sie in deine Seiten aufnehmen kannst.

Warum nicht <img>, <video> und <audio>?

AMP unterstützt nicht die standardmäßigen HTML Entsprechungen zum Anzeigen von Medien wie beispielsweise <img>. Wir bieten aus folgenden Gründen äquivalente Komponenten an:

• Wir müssen das Layout der Seite verstehen, bevor Ressourcen geladen werden. Das ist wichtig für die Unterstützung des Preloading für den ersten Viewport.
• Wir müssen Netzwerkanforderungen steuern, um Lazy Loading zu ermöglichen und Ressourcen effektiv zu priorisieren.

Achtung: Die Elemente werden zwar nicht unterstützt, werden aber gerendert. Allerdings validiert AMP deine Seiten dann nicht und du kannst nicht alle Vorteile von AMP nutzen.

Bilder

Füge mit dem Element amp-img ein Bild in deine Seite ein:

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

In diesem einfachen Beispiel wird das Bild mit der vorgegebenen festen Höhe und Breite angezeigt. Es muss mindestens eine explizite Breite und Höhe festgelegt werden.

Bilder anzeigen, wenn JavaScript deaktiviert ist

Da <amp-img> auf JavaScript basiert, werden Bilder nicht angezeigt, wenn der Benutzer die Skripte deaktiviert. In diesem Fall solltest du mit <img> und <noscript> wie folgt ein Fallback für das Bild bereitstellen:

<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>

Erweiterte Layouts

Im Vergleich zu standardmäßigem CSS/HTML ist es mit AMP wesentlich einfacher, vollständig responsive Bilder zu erstellen. Für das einfachste Ergebnis musst du nur layout="responsive" hinzufügen:

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

Verhalten und Platzhalter

Die AMP HTML Runtime kann Bildressourcen effektiv verwalten. Dazu wird das Laden von Ressourcen verzögert oder priorisiert, wobei die Position des Viewports, die Systemressourcen, die Verbindungsbandbreite und andere Faktoren berücksichtigt werden.

Animierte Bilder

Das Element amp-anim ist dem Element amp-img sehr ähnlich und bietet zusätzliche Funktionen, um das Laden und Abspielen von animierten Bildern wie GIFs zu verwalten.

<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>

Video

Füge mit dem Element amp-video ein Video zu deiner Seite hinzu.

Verwende dieses Element nur zum direkten Einbetten einer HTML5 Videodatei. Das Element nutzt Lazy Loading für die durch das Attribut src angegebene Videoressource und lädt sie zu einem von AMP festgelegten Zeitpunkt.

Stelle für den Fall, dass der Browser HTML5 Video nicht unterstützt, einen Platzhalter vor dem Start des Videos sowie ein Fallback bereit. Beispiel:

<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

Füge mit dem Element amp-audio eine Audioressource zu deiner Seite hinzu.

Verwende dieses Element nur zum direkten Einbetten einer HTML5 Audiodatei. Der Vorgang ist für alle in eine AMP Seite eingebetteten externen Ressourcen gleich: Das Element nutzt Lazy Loading für die durch das Attribut src angegebene Audioressource und lädt sie zu einem von AMP festgelegten Zeitpunkt.

Include a fallback, if the browser doesn't support HTML5 audio, for example:

<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