UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Das <picture>-Element

25. April 2014, von stephan

Vor wenigen Tagen wurde die Einigung über das HTML5 <picture>-Element bekannt. Damit ist eine langjährige Diskussion abgeschlossen und der Weg für „responsive“ Bilder frei. Warum dabei aber erst ein winziger Teil des Weges zurückgelegt ist und noch viele Herausforderungen warten, möchte ich in diesem Artikel behandeln.
pictures_kreis

Responsive Images?

Responsive Images werden seit langem als wichtige Ergänzung und Bestandteil des mittlerweile etabliertem „Responsive Webdesign“ gesehen.
Responsive Images sollen dabei zwei Fliegen mit einer Klappe schlagen: Einerseits werden auf kleineren Devices Bilder auch nur in kleinerer Auflösung ausgeliefert, was vor allem bei Smartphones und Tablets zu einer starken Reduktion der Webseitengröße führen kann.
Andererseits können auf diesen Geräten damit aber auch andere Bildausschnitte gewählt werden, um wichtige Bildelemente auch auf kleinen Bildschirmen nicht aus dem Fokus zu verlieren.

Das <picture>-Element

Seit längerem gibt es bereits viele Ideen, wie man das <img>-Element – mittlerweile auch schon 20 Jahre alt – um eine dynamische Komponente erweitern könnte. Nachdem Developer und Browserhersteller lang über die Implementierung diskutierten, gibt es nun die ersten Drafts dazu:

<picture>
    <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">
    <img alt="A rad wolf" src="pic1x.jpg" width="500" height="500">
</picture>

Das <picture>-Element ist vom Aufbau her mit dem HTML-5 <video>-Element vergleichbar. Im Element befindet sich ein Fallback auf ein Standardkonformes <img>-Element mit einer normal aufgelösten Version des Bildes. Zusätzlich dazu können beliebig viele source-Elemente eingefügt werden, die anhand bestimmter Faktoren (z.B. Auflösung oder Bildschirmgröße) das richtige Bild für das jeweilige Device in das <img>-Element laden.
Ein weiteres Beispiel für das neue picture-Element ist Folgendes:

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 18em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>

Hier ist neben dem srcset-Attribut ebenfalls das media-Attribut vorhanden, das in ähnlicher Form auch bei Media Queries in CSS vorkommt. Dabei wird dem Browser mitgeteilt, ab welcher Bildschirmbreite welches Bild geladen werden soll.

Der lange Weg zur vollständigen Implementierung

Wie im Web üblich wird es noch lange dauern, bis das <picture>-Element voll einsatzfähig ist. Neben der vollständigen Unterstützung durch Browser (bis dahin gibt’s einen JavaScript-Polyfill) wird es aber im Fall des <picture>-Elements noch eine weitere Hürde geben: Die Unterstützung durch Content-Management-Systeme. Um das Element wirklich sinnvoll einsetzen zu können, muss es in Zukunft auch Workflows und Möglichkeiten geben, verschieden aufgelöste Bilder mit gegebenenfalls unterschiedlichen Bildausschnitten im System zu hinterlegen.
Das ist einerseits eine Herausforderung für die Entwickler der Systeme, die dafür eine einfache Möglichkeit schaffen müssen. Viel wichtiger ist aber noch, dass damit zusätzliche Verantwortung auf die Redakteure von Webseiten zukommt, weil diese in Zukunft auch vermehrt Zeit mit der Auswahl und Bearbeitung von Bildern in verschiedenen Formaten und Größen verbringen müssen.
Das <picture>-Element ist ein wichtiger Schritt, um Websites in Zukunft dynamisch und maßgeschneidert auf das Device des Users anzupassen. Anders als bei anderen neuen HTML-Elementen, die hauptsächlich Ansprüche an die Entwickler von Seiten stellen, muss im Fall des <picture>-Elements aber auch Bewusstsein für den Sinn und Nutzen bei Personen geschaffen werden, die für die redaktionelle Befüllung von Webseiten verantwortlich sind.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
5 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
12. Juni 2014 um 18:47

wir haben das picture element und das zugehörige picturefill näher unter die lupe genommen und kritisch betrachtet: http://intuio.at/en/blog/why-we-dont-use-picturefill-for-responsive-images/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
2. Mai 2014 um 14:16

Guter Beitrag. Die CMS der durch die Werbung bekanntesten Provider aber auch von nicht so werbeintensiven wie WIX oder One.com (die allerdings auch richtige Homepage-Baukästen anbieten und nicht nur CMS) haben das bereits umgesetzt. One.com zum Beispiel stellt die Bilder mit der entsprechenden Auflösung auch systemintern und ohne Zutun des Nutzers bereit. Es reicht ein entsprechendes großes Ausgangsbild, den Rest macht das System.
Eine geschickte Vernetzung von solchen Baukästen und individueller Programmierung kann enorme Resourcen und Zeit sparen.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    Stephan Schimpf
    2. Mai 2014 um 14:46

    Hallo,
    vielen Dank für die Hinweise über WIX und One.com. Spannend, das gerade solche CMSysteme zu den Ersten zählen.
    Schöne Grüße,
    Stephan

Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close