Responsive Grafiken mit HTML

Picturefill: ein Praxisbeispiel

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ohne Picturefill zeigt der Firefox (V34) nur die Fallback-Grafik, mit Picturefill versteht er responsive Grafiken, solange JavaScript aktiviert ist.

Transkript

Picturefill im Praxiseinsatz möchte ich Ihnen jetzt einmal zeigen. Es gibt hier zunächst einen Ordner; dort liegen ein paar Grafiken. Da ist hier das Script und eine Webseite. Im Editor sehen sie hier die Einbindung der Grafik "srcset w" mit Sizes und Fallback-Grafik. Und in einem Browser, der die moderne Syntax, die erweiterte Syntax, nicht versteht, wie Firefox im Augenblick, so sieht das hier aus. "small" als Fallback-Grafik wird geladen. Der Rest wird ignoriert. So, um jetzt hier das Picturefill zu laden, gehe ich in den Editor und füge hier einfach ein Script-Element ein. Das hatte ich schon in der Zwischenablage. Script lädt aus demselben Ordner "picturefill.min.js". Das ist alles, was im Augenblick nötig ist. Und bei Picturefill muss dann hier chirurgisch entfernt werden: src="small.jpg". Einmal speichern das Ganze, und jetzt ist der Quelltext soweit vorbereitet. Das ist hier eine echte Lücke, denn das ist sehr ungewohnt: Ein Image-Element ohne Source und somit auch ohne Fallback-Grafik. Jetzt gehe ich zurück in den Browser und lade die Seite neu. Und Sie sehen: Es funktioniert! Hier ist Picturefill mit Image Srcset "w" und Sizes und Firefox lädt tatsächlich die Medium-Grafik, die hier - ich zeig's nochmal im Quelltext - nur geladen wird, weil hier JavaScript am Werke ist. Denn hier steht jetzt "src=medium.jpg", und dieses Source-Attribut wurde vom JavaScript on the fly sozusagen ergänzt, denn hier im Originalquelltext gibt es kein Source-Attribut. So. Das funktioniert ganz schön. Und wenn ich jetzt hier das Browser-Fenster verkleinere und vergrößere... Sie sehen: "small", "medium" und "small" und "medium", genau so, wie der Quelltext das andeutet. Immer abwechselnd werden diese beiden Grafiken geladen. Soweit zu den Vorteilen. Kommen wir jetzt zu den Nachteilen. Das erste, was passiert, wenn JavaScript ausgestellt ist. Dazu mache ich hier mal die Web Developer Toolbar sichtbar, deaktiviere JavaScript und lade die Seite neu. Wie Sie sehen, sehen Sie nichts. Das ist nur noch der Alt-Tag hier. Das JavaScript ist weg. Also bleibt im Quelltext genau das stehen, was wir hier im Editor geschrieben hatten. Es gibt kein Source-Attribut, es gibt somit keine Grafik. Die Seite ist natürlich auch nicht valide, und hier gibt es nur noch den Alt-Text, der dann vom Browser angezeigt wird. Da muss man dann schon abwägen. Was sind die Vor- und was sind die Nachteile? Hier sehen Sie: Das Script wird eingebunden. "src" wird entfernt. Sie können "src" natürlich auch drinlassen. Das ist nicht Pflicht. Das Script funktioniert trotzdem. Aber dann muss man damit leben, dass der Browser mindestens zwei Grafiken lädt, nämlich die vordere Grafik zuerst automatisch, und wenn dann das JavaScript aktiviert wird, dann lädt er noch die optimale Grafik hinterher. So, ich mach das hier mal eben wieder sichtbar. Und Sie sehen auf der anderen Seite: Mit dem JavaScript funktioniert es eigentlich ganz gut.

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!