Responsive Grafiken mit HTML

Picturefill: Vor- und Nachteile in der Übersicht

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Kein Vorteil ohne Nachteil, hat ein bekannter Fußballer mal gesagt und so ist es auch bei Picturefill. Das src-Attribut für das Fallback-Image wird entfernt und so sehen Browser ohne JavaScript nur den alt-Text.

Transkript

Der "Picturefill" ist ein Responsive-Image-Polyfill. Polyfill ist der Name für JavaScript-Lösung, ein Sammelbegriff für Spachtelmasse, so heißt das im richtigen Leben, mit dem man Löcher in Wänden stopft und hier ist das bildlich gesprochen, dass Löcher in Browsern gestopft werden. Und zwar, der Picturefill ist ein Polyfill für responsive Grafiken. Hier auf der GitHub-Seite von Programmierer Scott Jehl wird das im Detail beschrieben. Sie sehen hier eine lange Seite mit langer Anleitung. Fangen wir oben an. Der Download des Picturefills. Da gibt es hier den Link. Ich nehme mal gleich die minimierte Version. Wenn Sie das JavaScript studieren wollen, geht das besser mit der Version. Zum Einsetzen ist diese besser. Schwupps, komme ich bei GitHub raus hier und kann entweder die Raw-Version direkt herunterladen -- Seite speichern, runter und dann im Ordner speichern - oder ich gehe zurück. Wenn Sie das nicht so gerne mögen, gehe ich auf die Seite von Picturefill und hier kann man auch ein ZIP downloaden. Egal, was Sie brauchen, Hier diese Datei im Ordner "dist": picturefill.min.js. Wie Sie die kriegen, ist letztlich egal. So, ich gehe hier mal wieder zurück auf die Übersichtsseite. Nach dem Download wird es eingebunden, das Script. Ich habe das hier -- ich zeig's ihnen ganz kurz -- im Ordner. Hier liegt das "picturefill.min.js", und das sind die Grafiken, die dazugehören. So, dann wird es eingebunden. Der kürzeste Schnipsel ist einfach nur ein JavaScript-Tag hier. Ein Script-Element mit "picturefill.min.js" für die minimierte Version. Für ältere Browser kann es noch ein bisschen mehr JavaScript geben, also "IE 8" und Konsorten, sofern sie den HTML5 Shiv nicht benutzen. Kommen wir zum "Basic Markup Pattern". Zu den Quelltextschnipseln, könnte man es nennen. So, jetzt schauen wir hier mal an mit "srcset" und "sizes". Das ist die häufigste Anwendung für responsive Grafiken. Es geht hier ganz normal los. <img sizes=" (min-width: 40em) 80vw, 100vw". Das ist ein Media Query und "srcset", da werden dann Grafiken serviert, und die Breite der Grafik in Pixeln wird hier jeweils dahinter angegeben. Ich scroll hier mal durch. Danach kommt der Alt-Text. "A giant stone" und so weiter in Kambodscha. Und dann ist der Image-Tag fertig. Vermissen Sie eventuell das Attribut "src"? Das ist richtig, denn das wird hier entfernt. Das ist einer der Nachteile von Picturefill, denn wenn "src" hier drinstehen würde, dann würden die Browser sofort nach dem Laden der Seite die Grafik holen, die normale Fallback-Grafik. Dann erst würde das Script aktiv und würde die optimale Grafik herausholen. Hier zum Beispiel "medium" oder "large". Und dann würde der Browser beide Grafiken laden. Das ist natürlich für ein JavaScript, das sich zum Ziel gesetzt hat, die Grafikmenge zu reduzieren, genau das Falsche. Das kann überhaupt nicht im Sinne des Optimierers sein. Also wird "src" entfernt. Hier sehen Sie unten weiter dann, wenn wir das "Picture"-Element verwenden -- oben das war "srcset" und "w" -- bei der Verwendung des "picture"-Elementes gibt es noch einen Nachteil hier, denn der IE 9 versteht "src" auch mit Nachhilfe nicht. Also braucht er hier noch ein "Video"-Element drum herum, das mit einem "Conditional Comment" ausgeliefert wird. Also je ausgefeilter die Wünsche, desto aufwändiger die Umsetzung. Das bleibt dasselbe. So, dann gibt es hier noch ein paar weitere Beispiele, und unten kommen wir zum Browser-Support. Da sehen wir dann die Nachteile. Wenn JavaScript im Browser ausgestellt ist, dann gibt es keine "Fallback"-Grafik mehr. Es gibt nur noch den Alt-Text. Das war oben bei dem Schnipsel eben zu sehen. Es gibt kein "src"-Element, also gibt es keine "Fallback"-Grafik, sondern nur noch den Alt-Text. Das ist der große Nachteil und das hat's wirklich in sich. Da muss man abwägen, ob man das Risiko eingehen möchte. Dann gibt es hier noch ein extra HTTP Request für "picture" in Browsern, die "srcset" unterstützen, aber "picture" noch nicht. Die gehen dann zweimal hin und her. Alles das sind diverse Nachteile für den Einsatz von Polyfills. Das reicht für den ersten Überblick, und die Bedienungsanleitung auf dieser Seite ist recht ausführlich.

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!