Responsive Grafiken mit HTML

Fazit zu <img>, srcset w und sizes

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das <img>-Element mit der erweiterten Syntax srcset w und sizes ermöglicht responsive Grafiken im HTML. Der Browser entscheidet aufgrund der ihm vorliegenden Informationen, welche Grafik optimal ist. Bei unklarer Syntax nimmt er eine Fallback-Grafik.

Transkript

Das image-Element und die neuen Attribute srcset mit w-Wert und sizes ermöglichen responsive Grafiken per HTML. Jetzt möchte ich noch kurz auf die Browserunterstützung eingehen und ein Fazit ziehen. Zunächst die Browser-Unterstützung dazu surfe ich zu "caniuse.com" und gebe hier ein: srcset ein Ergebnis wieder gefunden. Und jetzt schauen Sie sich diese Grafik mal im Überblick an. Es gibt hier zwei Grüntöne Rot heißt geht nicht, also Internet Explorer kennt es nicht. Firefox kennt es mit Fähnchen, das heißt man kann es aktivieren, aber es ist noch nicht freigeschaltet. Das ist aber eigentlich nur eine Frage der Zeit, denn eigentlich kann Firefox es ja schon. Hier das Gelb-Grüne, das ist srcset X, das kann Chrome also schon lange und das Dunkelgrüne, das ist dann die komplette srcset-Syntax mit sizes und w descriptor, wie es hier unten heißt. Das ist also dann die komplette Syntax. Also wer hier dunkelgrün ist, der kann responsive Grafiken per HTML. Sie sehen der Safari gehört noch nicht dazu, das wird er wahrscheinlich ab der nächsten Version können, denn im Moment die Version 8 bzw. 8.1 unter IOS, die kann nur srcset X, also die Pixeldichte abfragen. Aber noch nicht src w und sizes mit responsiven Grafiken. Das geht noch nicht. Opera mini, das ist ein Fall für sich. Internet Explorer Microsoft hat angekündigt, daran zu arbeiten. In welcher Version das enthalten sein wird, ist noch nicht ganz deutlich. Zeit für ein kurzes Fazit: Unterschiedliche Viewportbreite geht mit <img, srcset w und sizes. Diesselbe Grafik wird in unterschiedlichen Versionen serviert, so dass Browser auf kleineren Bildschirmen, in kleineren Viewports nicht unnötig große Grafikdateien laden müssen. Responsive Grafiken, nur per HTML es wird die Viewportbreite und sogar die Pixeldichte berücksichtigt. Das ist implizit enthalten in dieser Syntax. Der Autor stellt mit srcset w und sizes Informationen bereit, die der Browser wissen muss, um entscheiden zu können. Mit srcset w gibt er die Breite der Grafiken an, mit sizes sagt er wie breit die Grafik dargestellt werden soll. Und sizes kann auch Mediaqueries enthalten. Ganz wichtig ist aber: Der Autor entscheidet nicht, der Autor stellt nur Information bereit, die Entscheidung fällt der Browser. Nur der Browser kennt die Umgebung in der die Grafiken dargestellt werden sollen und er ist der Einzige, der alle vier benötigten Informationen wirklich beisammen hat. Die Browser-Unterstützung, Ende 2014, mit gut 20 Prozent noch nicht der Hammer, aber die Tendenz ist steigend und die gute Nachricht ist, dass macht nichts. Browser, die srcset w und sizes nicht verstehen, die haben immer noch das ganz normale image-Element mit dem Attribut source. Dort steht die Fallback-Grafik geschrieben und das können die Browser dann benutzen. Das ist also mit Netz und doppeltem Boden. Es ist ein bisschen Arbeit, src w und sizes dazu zu schreiben, aber man verliert gar nichts, jeder Browser stellt eine Grafik dar und die Browser, die die neue Syntax verstehen, die können responsive Grafiken per HTML bereits umsetzen.

Responsive Grafiken mit HTML

In diesem Video-Training lernen Sie, wie Sie mit Attributen und Elementen wie srcset, sizes und responsive Grafiken per HTML einbinden können.

1 Std. 39 min (25 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!