Responsive Grafiken mit HTML

Grafiken flexibel einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Grafiken werden im responsiven Webdesign ohne width und height eingebunden und im CSS mit max-width flexibilisiert, aber es wird immer dieselbe Datei ausgeliefert.

Transkript

Wenn die Grafiken optimiert sind, dann geht es im nächsten Schritt darum, sie flexibel einzubinden, und ich möchte zeigen, worauf man dabei bisher im responsiven Webdesign geachtet hat. Zuerst einmal, beim Grafiken einbinden in HTML geht es darum, dass man früher mit "width" und "height" immer die gegebene Größe der Grafik "vorangemeldet" hat beim Browser, damit der vor dem Laden der Grafik schon wusste, wie groß die Grafik wird, und den Platz quasi reservieren konnte. Da man bei responsiven Webseiten eigentlich nie genau weiß, wie groß das Bild wird, lässt man "width" und "height" weg. Der Alt-Text bleibt natürlich erhalten. Das sieht also im Quelltext - hier ein Beispiel - so aus: <figure, <img src="porto-altstadt.jpg", Foto der Altstadt von Porto, keine Größe, keine Breite, unten noch ein <figcaption drunter. Im Browser sieht das so aus hier. Sie sehen die Grafik, ich klicke hier mal mit rechts im Firefox auf "Grafik-Info anzeigen". Sie sehen, 0 px x 0 px, da ist nichts vorgegeben. Also nimmt der Browser die Originalgröße 800 x 533. Nachteil dieser Variante ist, wenn ich jetzt hier die Bildschirmgrößen teste im Firefox, Sie sehen, das Bild wird abgeschnitten, es passt sich nicht an. Es ist zwar nichts vorgegeben, aber es passt sich eben auch nicht an. Wenn ich hier die vergrößere, jetzt ist es da, aber automatisch ist da noch nichts. Dazu gibt es das Flexibilisieren per CSS; die Zauberformel: "img {max-width: 100%" und "height" auf "auto". Das ist altbekannt, im responsiven Webdesign gilt das als Best Practice. "Hallo Grafiken: Bitte nicht größer als das Elternelement." heißt das hier frei übersetzt. Im Editor sieht das dann so aus wie hier. Da kommt ein Style dazu an alle Grafiken: "max-width: 100%" und "height: auto". Also auch für diese Grafik, und im Browser hat das leicht andere Auswirkungen: Wenn ich jetzt hier die Bildschirmgröße teste, "Entwickler-Werkzeuge" "Bildschirmgrößen testen", dann sehen Sie, das passt sich ganz wunderbar an. Das ist schon ein entscheidener Schritt weiter; die Grafik wird nicht abgeschnitten, aber sie ist immer noch dieselbe Grafik. D. h., wenn ich hier Grafik-Info aufrufe, dann sehen Sie, es ist immer noch dieselbe und wenn ich das verkleinere "Bildschirmgrößen testen", das ist auch hier per Grafik-Info immer noch dieselbe. Jetzt ist sie skaliert zu 212 x 141, aber es ist dieselbe Grafikdatei. Damit ist das Problem nicht wirklich aus der Welt geschafft. Das sieht zwar optisch gut aus soweit, das Bild passt sich sehr flexibel an, aber für kleine Bildschirme wie eben gesehen, mit etwa 200 Pixeln, wird dieselbe große Grafikdatei übertragen wie für größere Viewports. Und darum geht es in diesem Video-Training "Responsive Grafiken per HTML", denn in HTML gibt es seit kurzer Zeit Möglichkeiten, für unterschiedliche Viewports unterschiedliche Grafikdateien auszuliefern.

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!