Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Grafiken mit HTML

Fazit zu <img> und srcset x

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film werfen Sie einen Blick auf die Browserunterstützung und sehen, dass srcset x für Webseiten mit einer festen Layoutbreite eine lohnenswerte Option ist.

Transkript

So. Ein kurzer Blick auf den Anwendungsfall "Unterschiedliche Pixeldichte", ein kurzes Fazit und zunächst einmal möchte ich dazu einen Blick werfen auf den Browser-Support für das Attribut "srcset" mit den x-Werten dazu. Dazu surfe ich im Browser, egal in welchem, nach "caniuse.com" und suche aus der Liste hier das "srcset"-Attribut oder tippe das hier oben einfach ein. srcset - 1 result found - ein Ergebnis gefunden und da sind wir. Srcset attribute. Global support und hier sehen Sie zwei Zahlen, zum Einen die komplette Unterstützung und zum Anderen die teilweise Unterstützung. Da ist hier "srcset x" damit gemeint. Das sehen Sie gleich noch. So, und wenn man sich die Farbenverteilung hier einmal anschaut, dann sehen Sie: Internet Explorer nicht hier, TP, Not Supported, Test Case, aber Microsoft hat angekündigt, dass Sie daran arbeiten. Das heißt also, in der nächsten Version wird es wahrscheinlich was geben. Der Firefox kann es, zeigt es aber noch nicht. Der Firefox ist hier: "Not supported by default, but can be enabled" und da steht dann unten hier, wo man das einstellen muss. Das macht natürlich kein normaler Benutzer, aber zum Testen könnte man hier bei "About Config" diesen Wert in "true" umändern und dann würde er das verstehen. Chrome ist einen Schritt weiter. Seit Version 38 unterstützt Chrome die komplette "srcset" und seit Version 35 den Teil mit dem x-Wert. Safari unterstützt hier in diesem Grünton ebenfalls den x-Wert, kann aber noch nicht die komplette Syntax mit den responsiven Grafiken. Hier, der "x descriptor", der x-Wert, der ist da Opera kann's. iOS Safari kann "x" auch hier, sehen Sie, und Android Browser und Chrome for Android können es auch, in neueren Versionen zumindest. Ältere Android-Versionen können das dann noch nicht. Sie sehen: So schlecht sieht die Unterstützung gar nicht aus, besonders wenn man berücksichtigt, dass auf vielen Geräten mit einer hohen Bildschirmauflösung natürlich hier moderne Browser ihr Werk verrichten und das würde sich also durchaus lohnen, da Hand anzulegen an den Quelltext und entsprechende Grafiken zu servieren. Zum Fazit: Also, das <img-Element mit der Syntax "srcset x" liefert dieselbe Grafik in unterschiedlichen Versionen. Die muss man natürlich vorher vorbereiten. Berücksichtigt den Anwendungsfall "Pixeldichte", die Viewportbreite des Browsers spielt dabei überhaupt keine Rolle. "srcset x" wäre also eine Art Erste Hilfe, und zwar besonders für Webseiten mit einer festen Layoutbreite. Anders ausgedrückt: Für nicht-responsive Seiten, da die Viewportbreite eben nicht berücksichtigt wird. Die Browserunterstützung liegt fast bei 50% im Dezember 2014. Wird eigentlich, naja, nicht stündlich, aber doch tendenziell besser und selbst wenn die Browser es nicht unterstützen, haben Sie nichts verloren, da als Fallback immer noch das "src"-Attribut da ist und Sie haben wirklich genau den gleichen Fall. Sie können also durch den Einsatz von "srcset x" bei nicht-responsiven Webseiten mit einer festen Layoutbreite eigentlich nur gewinnen.

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!