AMP

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:

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>
Dieses Snippet im Playground öffnen

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>
Dieses Snippet im Playground öffnen

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>
Dieses Snippet im Playground öffnen

ERFAHRE MEHR: Erfahre mehr über fortgeschrittene Layoutmethoden.

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>
Dieses Snippet im Playground öffnen

HINWEIS: Binde <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> im Header deiner Seite ein, um diese Komponente zu verwenden.

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:

This browser does not support the video element.

<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>
Dieses Snippet im Playground öffnen

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:

Your browser doesn’t support HTML5 audio.

<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>
Dieses Snippet im Playground öffnen

HINWEIS: Binde <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> im Header deiner Seite ein, um diese Komponente zu verwenden.