Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Responsive Grafiken mit HTML

Grafiken nach Pixeldichte auswählen: <img> und srcset x

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Anhand eines praktischen Beispiels lernen Sie die Syntax und die Funktionsweise des Attributs srcset mit einem x-Wert kennen.

Transkript

Ich möchte Ihnen jetzt anhand eines praktischen Beispiels zeigen wie das funktioniert mit der Auswahl der Grafik entsprechend der Pixeldichte des Bildschirms. Zunächst ein Blick auf die Syntax. <img src="small.jpg" alt... und ein Alt-Text. Dann das neue Attribut srcset="small.jpg 1x mit einer Leerstelle dazwischen, Komma, medium.jpg (Leerstelle) 2x und, Komma, large.jpg (Leerstelle) 3x. "srcset" ist das Attribut und das setzt sich zusammen aus dem Wort "Set", das englische Wort für "Satz" von Grafikdateien, die der Browser sich betrachtet um eine Source hier oben zu suchen. Der Browser schaut sich also diesen Satz von in Frage kommenden Grafiken an. Er weiß, welche Pixeldichte der Bildschirm hat, auf dem er läuft und er wählt dann eine Grafikdatei aus und setzt die hier als Source ein. Das heißt, das ist nach wie vor das <img src, was die Grafik darstellt. Der x-Wert gibt die "DPR" an, die "Device Pixel Ratio", das Verhältnis von CSS-Pixeln zu Gerätepixeln. "1x" bedeutet: Ein CSS-Pixel ist ein Gerätepixel, also traditionelle Bildschirme. "2x" ist DPR von 2, und so weiter und so fort. Das ist relativ logisch. Mehr als 3x braucht man im Augenblick glaube ich noch nicht. Schauen wir uns das Ganze im Editor an. Hier ist eine Beispielseite. Ganz normal, nicht besonders aufwändig. Ein bisschen Basisformatierung und hier kommt der wichtige Teil. Die Reihenfolge der Attribute spielt natürlich wie immer keine Rolle. Ich habe das hier mal etwas übersichtlicher dargestellt. "small.jpg 1x, medium.jpg 2x, large.jpg 3x" Das sind diese Grafiken. Small 400, medium 800 und large 1600 zur Auswahl und jetzt nehme ich einen Browser, der das versteht. Der würde jetzt die Grafiken entsprechend auswählen. Das sind natürlich noch nicht alle Browser, aber Browser, die "srcset" nicht verstehen, die würden das einfach ignorieren und wie gewöhnlich die small.jpg als Source laden. Man hat eigentlich nichts verloren. Das Schlimmste, was passieren kann, ist, dass es genauso ist wie vorher. So. Opera wählt hier "small.jpg". Ich suche mal "Element untersuchen", hole mal den Seiteninspektor hier und hier unten sehen Sie den Quelltext. Jetzt kann man in Opera und Chrome auch hier "Device Mode" toggeln. Das heißt, ich kann jetzt so tun, als ob dieser Browser auf einem anderen Gerät läuft. Wenn ich da draufklicke, kommt ein kleines Warndreieck. Das heißt, ich muss die Seite einmal neu laden. Das mach ich gleich, aber achten Sie hier schonmal auf die Grafik. Ausgewählt ist zufällig hier ein Apple iPad 3 / 4 mit einer DPR von 2. Neu laden und Sie sehen: Da kommt jetzt schon die medium.jpg. Das heißt, der Browser, der Opera in diesem Falle, er tut ja so als ob er auf einem iPad läuft und er hat gleich gemerkt: "Aha, DPR von 2 und dann soll ich hier die medium.jpg laden." Und das tut er dann auch. So sieht das in der Praxis aus. Das heißt, diese Grafik ist natürlich etwas größer als die andere, aber sie bleibt scharf. Sie hat die doppelte Pixelauflösung hier, die vierfache Menge an Pixeln genau genommen, und bleibt dann auch auf hochauflösenden Bildschirmen scharf. So, hier nochmal im Überblick: Grafiken nach Pixeldichte. Bei einem herkömmlichen Bildschirm mit einer Device Pixel Ratio von 1 wird "small" geladen und auf einem Screenshot hier von einem iPhone wird dann "medium" geladen. So funktioniert das mit "srcset x" und der Pixeldichte.

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!