4.2.11 Medien einbinden

Das Auszeichnen von Bildern und Illustrationen erfolgt über <figure> und <figcaption>. Darin können neben den bekannten Medien auch Videos und Audios eingebettet werden:

1
2
3
4
5
6
7
8
9
<figure>
  <video src="Pfad zur Videodatei"></video>
  <figcaption>Beschreibung unterhalb des Videos</figcaption>
</figure>

<figure>
  <audio src="Pfad zur Audiodatei"></audio>
  <figcaption>Beschreibung unterhalb des Audioplayers</figcaption>
</figure>

Nicht alle Browser und alle Betriebssysteme unterstützen alle Video- und Audioformate. Somit kann man Alternativen innerhalb der Elemente <audio> und <video> mit dem Element <source> vornehmen:

1
2
3
4
5
<video>
  <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <source src='video.mp4' type='video/mp4'>
  Ihr Browser unterstützt leider keines der vorhandenen Formate
</video>

Attribute für Video- und Audioelemente

Die Elemente <video> und <audio> kennen einige Attribute, beispielsweise:

1
<audio controls preload></audio>
  • controls erzeugt einen sichtbaren Player.
  • preload bedeutet, dass die Datei im Hintergrund geladen wird. Dies ist sinnvoll im Zusammenhang mit controls und wenn man davon ausgeht, dass der Nutzer die Datei auf jeden Fall ansehen wird.
  • autoplay spielt die Datei sofort ab. Wird oft ohne controls zum automatischen Abspielen verwendet.
  • loop spielt die Datei als Endlosschleife immer wieder ab.

Für <video> gibt es noch weitere wichtige Attribute:

  • poster="Pfad-zur-Grafik" zeigt eine Abbildung an, solange das Video nicht gestartet wurde. Hier kann man einen aussagekräftigen Screenshot aus dem Video nehmen.
  • width="..." und height="..." sollte die tatsächliche Höhe und Breite des Videos enthalten, damit das Video in der gewünschten Größe angezeigt wird.

Best Practices für die Einbindung von Medien

1. Optimierung der Dateigrößen

  • Reduzieren Sie die Dateigrößen von Bildern und Videos, um die Ladezeiten zu verkürzen und die Performance zu verbessern.

  • Verwenden Sie geeignete Komprimierungstechniken und Formate, die eine gute Balance zwischen Qualität und Dateigröße bieten.

    • JPEG für Fotos und Bilder mit vielen Farben.

    • PNG für Bilder mit Transparenz oder scharfen Kanten.

    • SVG für skalierbare Vektorgrafiken, die ohne Qualitätsverlust skaliert werden können.

    • Für Videos bieten sich Formate wie MP4 (H.264) und WebM an, da sie von den meisten modernen Browsern unterstützt werden.

2. Verwendung von responsiven Bildern

  • Nutzen Sie das srcset-Attribut im <img>-Tag, um verschiedene Bildgrößen für unterschiedliche Bildschirmauflösungen bereitzustellen. Dies gewährleistet eine optimale Darstellung auf verschiedenen Geräten.

    <img src="bild.jpg" alt="Beispielbild" 
srcset="bild-320w.jpg 320w, bild-480w.jpg 480w, bild-800w.jpg 800w" 
sizes="(max-width: 600px) 100vw, 50vw">

3. Implementierung von Lazy Loading

  • Verzögern Sie das Laden von Bildern und Videos, die sich außerhalb des sichtbaren Bereichs befinden, bis der Nutzer zu ihnen scrollt. Dies verbessert die initiale Ladezeit der Seite.
<img src="bild.jpg" alt="Beispielbild" loading="lazy">

4. Sicherstellung der Barrierefreiheit

  • Fügen Sie für alle Medieninhalte aussagekräftige Alternativtexte (alt-Attribut für Bilder) und Untertitel oder Transkripte (für Videos und Audiodateien) hinzu, um die Zugänglichkeit für alle Nutzer zu gewährleisten.

5. Vermeidung von Autoplay bei Videos

  • Deaktivieren Sie das automatische Abspielen von Videos, um die Kontrolle dem Nutzer zu überlassen und unerwünschte Datenübertragungen zu vermeiden.

6. Sicherstellung der Browserkompatibilität

  • Stellen Sie sicher, dass die verwendeten Medienformate in allen gängigen Browsern unterstützt werden.

  • Bieten Sie bei Bedarf alternative Formate an, um eine breite Kompatibilität zu gewährleisten.