Das HTML Picture Element ist ein leistungsstarkes Tool, um verschiedene Versionen eines Bildes anzuzeigen, abhängig von den Geräteeigenschaften wie Bildschirmgröße, Auflösung oder anderen Bedingungen. Es ist besonders nützlich, wenn Sie reaktionsschnelle Bilder (responsive images) verwenden möchten, um die Performance und Benutzererfahrung Ihrer Webseite zu verbessern. In diesem Artikel lernen Sie, wie das <picture>-Element funktioniert, wie Sie es implementieren und optimieren können.
1. Was ist das <picture>-Element?
Das <picture>-Element ermöglicht es Ihnen, mehrere Quellen für ein Bild bereitzustellen. Abhängig von den Eigenschaften des Geräts (z.B. Bildschirmgröße oder Pixeldichte) wird die passende Bildquelle geladen. Dadurch können Sie sicherstellen, dass Benutzer auf Mobilgeräten kleinere, optimierte Bilder laden, während Benutzer auf Desktop-Displays hochauflösende Bilder sehen.
Das <picture>-Element besteht aus mehreren <source>-Tags, die verschiedene Bildquellen definieren, und einem <img>-Tag, das das Fallback-Bild angibt, falls keine der Bedingungen der <source>-Tags erfüllt ist.
2. Grundlegende Syntax des <picture>-Elements
Die Grundstruktur des <picture>-Elements besteht aus einem <picture>-Tag, mehreren <source>-Tags und einem <img>-Tag:
<picture>
<source srcset="bild-hochauflösend.jpg" media="(min-width: 800px)">
<source srcset="bild-mobil.jpg" media="(max-width: 799px)">
<img src="fallback-bild.jpg" alt="Beschreibung des Bildes">
</picture><source>: Definiert die Bildquelle und die Bedingungen, unter denen dieses Bild verwendet werden soll.srcset: Gibt die URL des Bildes an.media: Bestimmt die Medienabfrage (Media Query), die angibt, wann das Bild geladen wird.<img>: Dient als Fallback, falls keine der Bedingungen für die<source>-Tags erfüllt ist.
3. Einsatz von <source> mit srcset und media
3.1. Responsive Bilder je nach Bildschirmbreite
Mit media können Sie verschiedene Bilder je nach Bildschirmbreite laden. Zum Beispiel kann ein großes Bild für Desktops und ein kleineres Bild für Mobilgeräte verwendet werden.
<picture>
<source srcset="großes-bild.jpg" media="(min-width: 1200px)">
<source srcset="mittleres-bild.jpg" media="(min-width: 600px)">
<source srcset="kleines-bild.jpg" media="(max-width: 599px)">
<img src="fallback-bild.jpg" alt="Beispielbild">
</picture>3.2. Verschiedene Bildformate laden
Sie können auch verschiedene Bildformate bereitstellen, um moderne und performante Bildformate (wie WebP) zu verwenden, während ältere Browser auf herkömmliche Formate wie JPEG zurückgreifen.
<picture>
<source srcset="bild.webp" type="image/webp">
<source srcset="bild.jpg" type="image/jpeg">
<img src="bild.jpg" alt="Ein Beispielbild">
</picture>In diesem Beispiel wird, wenn der Browser WebP unterstützt, das Bild im WebP-Format geladen. Ansonsten fällt der Browser auf das JPEG-Format zurück.
4. srcset und sizes für verbesserte Bildauswahl
Mit srcset und sizes können Sie dem Browser helfen, das optimale Bild basierend auf der Gerätegröße und Pixeldichte zu laden.
4.1. Verwendung von srcset für Bilder unterschiedlicher Auflösung
Das srcset-Attribut kann eine Liste von Bildquellen mit unterschiedlichen Auflösungen enthalten. Der Browser wählt basierend auf der Pixeldichte des Geräts das beste Bild aus.
<img srcset="bild-1x.jpg 1x, bild-2x.jpg 2x" src="bild-1x.jpg" alt="Beispielbild mit verschiedenen Auflösungen">- 1x: Für Standarddisplays.
- 2x: Für Retina-Displays oder hochauflösende Bildschirme.
4.2. sizes für flexible Layouts
Das sizes-Attribut teilt dem Browser mit, wie breit das Bild auf dem Bildschirm angezeigt wird, sodass er das passende Bild aus srcset auswählen kann.
<img srcset="bild-klein.jpg 600w, bild-mittel.jpg 1200w, bild-groß.jpg 2000w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
src="fallback-bild.jpg" alt="Responsive Bild">600w,1200w,2000w: Die Breite des Bildes in Pixeln.100vw,50vw,33vw: Die Breite, die das Bild im Viewport einnimmt, in Relation zur gesamten Fensterbreite.
In diesem Beispiel wird das Bild basierend auf der Viewport-Größe ausgewählt. Auf kleinen Bildschirmen wird ein kleines Bild (100% der Viewport-Breite) verwendet, während auf größeren Bildschirmen ein größeres Bild geladen wird.
5. Barrierefreiheit und SEO
Es ist wichtig, das alt-Attribut für das <img>-Tag zu verwenden, um die Barrierefreiheit zu gewährleisten. Suchmaschinen und Screenreader verwenden den alt-Text, um den Inhalt des Bildes zu interpretieren.
<picture>
<source srcset="bild-hoch.jpg" media="(min-width: 1000px)">
<source srcset="bild-klein.jpg" media="(max-width: 999px)">
<img src="fallback.jpg" alt="Beschreibung des Bildes">
</picture>Das alt-Attribut sollte prägnant und aussagekräftig sein, um den Inhalt oder Zweck des Bildes genau zu beschreiben.
6. Best Practices für das <picture>-Element
- Vermeiden Sie zu viele Bildquellen: Verwenden Sie nicht mehr Quellen als notwendig, um die Ladezeit und den Code-Overhead zu minimieren.
- Optimierung der Bildgrößen: Stellen Sie sicher, dass die Bilder gut komprimiert und in modernen Formaten (z.B. WebP) verfügbar sind.
- Mobile-first Ansatz: Beginnen Sie mit kleineren Bildern für Mobilgeräte und erweitern Sie schrittweise die Bildquellen für größere Bildschirme.
Häufig gestellte Fragen
Wann sollte ich das <picture>-Element verwenden?
Verwenden Sie das <picture>-Element, wenn Sie verschiedene Bilder für unterschiedliche Bildschirmgrößen oder Auflösungen bereitstellen müssen oder wenn Sie verschiedene Bildformate unterstützen wollen (z.B. WebP vs. JPEG).
Ist das <picture>-Element notwendig für responsive Bilder?
Nein, Sie können auch das srcset-Attribut im <img>-Tag verwenden, um responsive Bilder bereitzustellen. Das <picture>-Element bietet jedoch mehr Flexibilität, insbesondere bei der Bereitstellung verschiedener Bildformate oder wenn Sie auf spezielle Bedingungen (z.B. Bildschirmgröße) reagieren möchten.
Was passiert, wenn der Browser das <picture>-Element nicht unterstützt?
Die meisten modernen Browser unterstützen das <picture>-Element. Falls ein Browser es nicht unterstützt, wird das Fallback-Bild aus dem <img>-Tag angezeigt. Daher ist es wichtig, immer ein Fallback-Bild anzugeben.
Wie kann ich die Bildladezeiten verbessern?
Sie können die Bildladezeiten verbessern, indem Sie kleinere, optimierte Bilder für Mobilgeräte bereitstellen und moderne Bildformate wie WebP verwenden. Stellen Sie außerdem sicher, dass Sie srcset und sizes richtig verwenden, um nur das erforderliche Bild zu laden.
Kann ich das <picture>-Element mit SVG-Bildern verwenden?
Ja, das <picture>-Element kann auch verwendet werden, um SVG-Bilder bereitzustellen. Sie können SVG-Dateien als Quelle in den <source>-Tags angeben, um vektorbasierte Grafiken zu verwenden.