Responsive Grafiken mit HTML

Sonderfall: unterschiedliche Dateiformate ausliefern per <picture>, <source> und type

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Einige Browserhersteller basteln bereits an neuen Dateiformaten, die Nachfolger von JPG werden sollen. Mit dem <picture>-Element könnten Browser, die eines dieser Formate verstehen, es bereits einsetzen.

Transkript

Der 4. Anwendungsfall für responsive Grafiken ist die Auslieferung von unterschiedlichen Dateiformaten. Dazu benötigt man das Element "picture", mit seinem Kind-Element "source" und diversen Attributen, unter anderem neu dabei:"type". Zuvor ein kurzer Blick. Was bedeutet neue Dateiformate im Bereich Grafiken? Da gibt es einige, die in der Diskussion sind, wie zum Beispiel "WebP" von Google, in der Entwicklung. Das soll besser komprimieren als "jpeg". Ist aber noch nicht weit verbreitet. Es gibt "JPEG XR", (extended range), das wird von Microsoft entwickelt. Sie sehen, alle Browserhersteller sind hier dabei. Auch das soll besser komprimieren als "jpeg". Dann gibt es "jpeg 2000", das wird vom jpeg-Konsortium entwickelt. Apple ist da ein bisschen dabei. Mit iPhoto wird das dargestellt, aber der Safari-Browser kann das auch noch nicht. Im Überblick kann man hier einfach sagen, dass "WebP" von Google selbst unterstützt wird. Chrome kann das. Microsoft "JPEG XR" wird im Internetexplorer dargestellt, sonst nirgendwo. "JPEG 2000" bei Apple ein bisschen bei iPhoto, bei Safari noch nicht. Der einzige der konsequent gar nichts von diesen Grafikformaten unterstützt ist Mozilla mit "Firefox". Wie kann man nun, falls man "WebP-Grafiken" hat und findet die komprimieren besser, dann möchte ich die ausliefern für Browser, die das verstehen. Sprich, Chrome und Opera. Wir haben das picture-Element, (Anfang)<source srcset="grafik.webp" type="image/webp"(Ende). Man liefert den MIME-type hiermit aus, sodass ein Browser, der das versteht, sagt: ja, klar, WebP, ich bin Chrome. Ich verstehe das. Für alle Anderen hat man eine fallback-Grafik "jpeg". Irgendeine hübsche Grafik. Und dann kommt wieder "/picture". Und so ist das Ganze schon erledigt.

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!