Responsive Grafiken mit HTML

Die Pixeldichte ist in srcset w schon enthalten

Testen Sie unsere 1957 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Attribut srcset darf nur entweder w-Werte für die Grafikbreite oder x-Werte für die Pixeldichte enthalten. Beides zusammen ist nicht erlaubt, aber auch nicht sinnvoll, wie dieser Film zeigt.

Transkript

Das Attribut "srcset" mit einem w-Wert dient dazu, die Viewport-Breite zu berücksichtigen bei der Darstellung von Grafiken. Der w-Wert, wie gesagt, gibt die Breite der Grafik an, sodass der Browser sie nicht herunterladen muss. Die Pixeldichte, die eigentlich mit "srcset x" angegeben wird, ist in "srcset w" schon mit drin und das möchte ich Ihnen jetzt einmal demonstrieren. Eine der Grundregeln hier bei <img mit "srcset w" ist, dass man "w" und "x" nicht mischen darf. Das heißt also: Man darf nicht gleichzeitig 400w und dahinter noch 2x schreiben für die doppelte Pixeldichte. Das ist explizit verboten in der "picture"-Spezifikation und Sie werden jetzt sehen, warum das auch nicht besonders sinnvoll ist. Ich habe hier unten das sizes="100vw" hinzugeschrieben, etwas grau. 100vw. Viewport Width. Volle Viewport-Breite, weil der Browser dieses Attribut mit dem Standardwert 100vw ergänzt, wenn es nicht dort hingeschrieben wurde. Das heißt in diesem Setup: Also vier Grafiken stehen zur Auswahl. Der Browser denkt sich: "Volle Viewport-Breite für die Grafik" und er hat hier die Information über die Breite der Grafik. So weit ist es alles vorhanden. Jetzt gehen wir einmal kurz rüber in den Browser. Sie sehen hier: Ich mache das einmal sichtbar. "Element untersuchen" und hier ist das Image, beziehungsweise die Images genauer genommen. So. Das sind die Informationen, die der Browser hat. Sie sehen hier: "small", "medium", "large" und "xlarge". Der Browser entscheidet sich bei einem Viewport hier, der relativ breit ist... Ich gehe einmal ganz kurz hier... So, da sehen Sie es: 1267. Da entscheidet er sich für "large", das eine Breite hat von 1600 Pixel. 1600, das reicht. Wenn ich jetzt wieder in den Geräte-Emulationsmodus gehe hier, dann sehen Sie hier schon eine andere Situation. Ich lade noch einmal wieder neu. Das sollte man eben einmal tun. Apple iPad 3 / 4, doppelte Pixeldichte und bei der Breite von 1024 ist das iPad im Standard breit, entscheidet er sich für "xlarge". "xlarge" hat, wenn Sie unten schauen, 3200 Pixel. Das macht er, weil der Browser weiß: "Aha, iPad-Retinabildschirm. Doppelte Pixeldichte. Dann brauche ich 1024, brauche aber in Wirklichkeit 2048 Pixel wegen der doppelten Dichte, damit die Grafik vernünftig scharf dargestellt wird." 2048 Pixel hat "large" aber nicht mehr, also muss ich die nächstgrößere Version nehmen, und nehme "xlarge" mit 3200. So, und jetzt wechsle ich hier einmal ins Hochformat. So. Da ist es geschehen. Also hier wechseln und sehe, dass jetzt "large" hier genügt, denn 768 Pixel mal Zwei, da reichen die 1600 von "large" aus. Die Berücksichtigung der Pixeldichte ist also in dem w-Wert schon mit drin. Sie brauchen gar keinen x-Wert anzugeben, das macht der Browser von alleine. Außerdem hat er noch ein bisschen Spielraum. So. Hier noch einmal im Überblick. iPad 4 im Hochformat: 768 Pixel breit, die Viewportbreite. DPR, Device Pixel Ratio, Pixeldichte von 2. Das heißt: Der Browser braucht die doppelte Anzahl von Pixeln. Das sind 1536, also reicht eben "large.jpg" mit einer Breite von 1600. Auf einem Gerät mit DPR 3 würde das nicht mehr reichen. Da hätte er wahrscheinlich eine andere Grafik genommen. Das Ganze noch einmal im Querformat. iPad 4 im Querformat. Sehen Sie hier. "3 / 4". Viewportbreite 1024 Pixel, DPR 2. Er benötigt 2048 Pixel hier um die Grafik scharf darstellen zu können auf dem Bildschirm. Das wäre ideal aus seiner Sicht. Also nimmt er "xlarge" mit einer angegebenen Breite von 3200. Das "w" wie gesagt für Width. Somit ist in "srcset w" die Pixeldichte wirklich schon mit enthalten. Es hat also durchaus seinen Sinn, dass x- und w-Wert nicht gemischt werden dürfen.

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!