Responsive Grafiken mit HTML

Hochauflösende Bildschirme: Ein Pixel ist nicht immer ein Pixel

29,95
Das Retina-Display des iPhone 4 hat im Sommer 2010 das Webdesign für immer verändert, denn ein CSS-Pixel entspricht seitdem nicht mehr immer einem Gerätepixel. Diese device-pixel-ratio (DPR) wird in diesem Film kurz erläutert.

Der erste Anwendungsfall bei responsiven Grafiken in HTML ist die unterschiedliche Pixeldichte, Pixel density im Englischen, und die Lösung steht hier im Untertitel: Der X-Faktor "image", das alte <img element und ein neues Attribut: "srcset" mit "x"-Werten. Dazu gleich mehr, aber zunächst nur ein kleiner Rückblick: im Frühjahr 2010 hatte sich die Welt des Webdesign für immer verändert, im Mai ist hier der Artikel von Ethan Marcotte erschienen bei " A List Apart". Kurz darauf im Juni wurde das iPhone 4 vorgestellt, und eine Besonderheit an diesem iPhone 4 war sein Bildschirm. Der wurde als Retina-Display bezeichnet, da er viel mehr Pixel hatte als sein Vorgänger, das iPhone 3. Er hatte 326 Pixel pro inch, 960 x 640 Pixel, doppelt so viel wie vorher, da waren es 480 x 320. Das hätte zur Folge gehabt, dass eine Grafik von 320 Pixel auf dem iPhone nur noch halb so groß gewesen wäre. Deswegen hat man sich einen Trick ausgedacht: Auf traditionellen Bildschirmen ist ein Pixel im CSS, auch wirklich ein Pixel auf dem Bildschirm. auf dem Gerät oder Englisch, auf dem "device". 1 CSS-Pixel = 1 Geräte-Pixel (device pixel) also 1:1, ist ein einfach zu merkendes Verhältnis. Bei hochauflösenden Bildschirm wie dem Retina-Display, oder auch bei vielen anderen Geräten inzwischen ganz normal, hochauflösende Bildschirme. 1 Pixel im CSS entspricht x Pixel auf dem Bildschirm, also verschieden viele Pixel, je nach Pixeldichte des Bildschirms, 1 CSS-Pixel ist gleich x Geräte-Pixel, so kann man das nennen, die Gleichung. Und das Ganze bezeichnet man als device pixel ratio, abgekürzt DPR, also das Verhältnis von Geräte-Pixeln zu CSS-Pixeln. Dazu gibt es eine Website, die heißt devicepixelratio.com Ein sehr passender und sprechender Name, da kann man mit beliebigen Geräten hinsurfen, und es wird dann direkt angezeigt, welche DPR hat das Gerät, mit dem sich hier gerade die Website besuchen. Ich habe einen traditionellen Bildschirm mit einer 1 als Antwort, Common device pixel ratio: Hier sind ein paar andere Geräte im Überblick, Sie sehen, 2.0 ist durchaus geläufig, hier ein HTC Butterfly hat drei Geräte-Pixel für ein CSS Pixel, damit Grafiken insgesamt schärfer dargestellt werden. müssen sie natürlich dann auch entsprechend viele Pixel mitbringen. Eine Grafik, die auf einem Gerät mit DPR 1 scharf ist, wirkt auf einem Gerät mit 3 DPR doch eher etwas verschwommen. Eine andere Website, mydevice.io, bringt etwas mehr Informationen. Hier wird noch der Viewport mit angegeben, und hier steht auch die Pixel-Ratio CSS Pixel-Ratio = 1, und noch viele andere Informationen, und ein drittes Tool in diesem Zusammenhang, ist die Website http://screensiz.es/ kleines Wortspiel mit der Top-Level-Domain, das ist Spanien hier, "screensizes" gesprochen. Hier finden Sie eine Liste mit Auflösungen diverser bekannter Geräte. Hier oben können Sie verschiedene Optionen einstellen . Hier z. B. die Popularität dieser Geräte, dann in Prozent, wie verbreitet sind die. Das ist ein sehr schöner Überblick, auch nach Tablets & Desktop-Monitore genannt, Im Überblick die wichtigsten Informationen zu diesen Bildschirmen. Das Problem, das es zu lösen gilt, ist: Wie bekommen hochauflösende Bildschirme mit einer anderen DPR eine passende Grafik, damit die auch dort nicht verschwommen wirkt, und traditionelle Bildschirme gleichzeitig eine kleinere Grafik bekommen. denn eine scharfe, höchauflösende Grafik ist natürlich auch wesentlich größer.

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!