praegnanz.de büro für intervernetzte medien

Gerrit, 16.03.2012

Was High-PPI-Bildschirme fürs Webdesign bedeuten

Während die einen noch ihre Achseln zucken, bin ich der Meinung, dass gerade für uns Webdesigner, Frontend-Entwickler und CMS-Konfigurierer spannende Zeiten anbrechen: Die Zeiten der doppelt hinterlegten Bilder.

Beim iPhone 4 (und Smartphones mit vergleichbarer Auflösung) ist es noch nicht so sehr aufgefallen, weil man auf diesen Bildschirmen selten eine Website in 1:1-Darstellung angesehen hat, sondern meist wild rumzoomte. Und die grafische Opulenz von nichtzoombaren, Web-App-ähnlichen Layouts hielt sich in Grenzen.

Doch mit dem iPad der 3. Generation könnte der Startschuss gefallen sein für duale Bildquellen. Denn nun haben wir es Bildschirmen zu tun, die in der CSS-Pixeldimension bei gewohnten 1024×768px Breite liegen, wo aber jeder virtuelle CSS-Pixel aus 4 Gerätepixeln gebildet wird. Und das iPad wird sicher nicht das einzige »Vollbildschirm«-Gerät bleiben, welches in Kürze den Faktor 1:1 bei CSS vs. Gerätepixeln durchbricht.

Nun haben wir die Aufgabe, unsere bestehenden (und natürlich auch zukünftigen) Websites zu untersuchen, und in verschiedene Bestandteile zu sortieren:

1. Text, vom Browser gerendert

Hier muss man eigentlich nichts machen, weil das reguläre Textrendering immer die volle Gerätepixelauflösung einbezieht.


Doch wie Oliver Reichenstein richtig anmerkt, könnte ästhetisch etwas zu tun sein: Vormals bildschirmoptimierte Schriften wie Verdana, Arial oder Georgia sehen auf einmal noch klobiger und ungelenkiger aus. Denn Retina-Auflösungen verhalten sich nicht mehr wie Bildschirme, sondern sind eher mit Offset vergleichbar. Und da wirken »Offset-Schriften« mit mehr Würze und kleinen Details oftmals schöner.

2. Text, als Grafik hinterlegt

Die größte Katastrophe. Abgesehen davon, dass man diese Textersetzungstechnik sowieso seit Jahren nicht mehr empfiehlt: Es kommt vor. Und es gilt, hier schleunigst Abhilfe zu schaffen, denn auf High-PPI-Bildschirmen erwartet der Nutzer, dass zumindest Schrift immer knackig scharf ist. Wenn es irgendwie geht, sollte man hier auf nativ gerenderten Text umstellen. Webfonts machen es möglich!

3. Grafische Schmuckelemente und Icons

Hier sollte man versuchen, sooft wie möglich mit CSS3-Techniken zu agieren, denn diese nutzen natürlich die Geräteauflösung voll aus: Abgerundete Ecken, Randlinien, Schrägstellen von Elementen usw.

Bei komplexeren Formen und vor allem Icons sieht die Sache ein wenig anders aus. Hier kann es sich lohnen, eine Version mit doppelter Auflösung separat anzufertigen und für entsprechende Clients auszuliefern. Hier eine Anleitung für die entsprechenden CSS-Media-Queries. Nichts spricht übrigens dagegen, die High-DPI-Grafiken mit in das reguläre CSS-Sprite reinzunehmen. Ihr arbeitet ja alle brav mit Sprites!

Eine Alternative (vor allem) für Icons sind vektorbasierte Formen. Entweder als monochromer Webfont oder irgendwie mit SVG-Dateien. Wobei für Letzteres immer noch keine zufriedenstellenden Best-Pratices existieren. Oder?

4. Inhaltsbilder

Tja, was machen wir mit Bildern, die nicht per CSS als Schmuckelement, sondern als inhaltliches Element per <img> eingebunden werden? Hier wird es kniffelig, weil hier zum ersten Mal auch der Redakteur eines CMS ins Spiel kommt. Folgende Thesen:

  • Rein fotografische Motive mit einer gewissen Komplexität fallen nicht so sehr als minderbepixelt auf. Bei Ihnen wäre eine Vervierfachung der Pixel auch ganz schon heftig, was die Datenmenge betrifft.
  • sehr grafische oder gar typografische Darstellungen leiden dagegen extrem unter halber Auflösung. Zum Glück lassen sich diese Art von Motiven meist ganz gut komprimieren (vor allem als PNG8), so dass das Dateigewicht sich nicht so gravierend auswirkt.
  • Es wäre vom Workflow recht einfach, alle Bildmotive stur ausschließlich in hoher Auflösung anzulegen und über die width=""- und height=""-Attribute entsprechend in halber Größe ins Layout zu setzen. Die Datenmenge für Nicht-Retina-Nutzer wird dadurch aber unnötig groß.
  • Es ist vom Workflow her schwieriger, immer zwei Versionen des Bildes vorzuhalten, und dann per serverseitiger oder clientseitiger Abfrage die jeweilige Version auszuliefern. Hier wird noch ein bisschen geforscht und programmiert werden müssen. Ich denke vor allem an entpsprechende CMS-Plugins und/oder serverseitige On-Demand-Skalierungsskripte.

Noch gibt es kaum Patentlösungen, weil das Thema erst jetzt akut wird. Dennoch hier ein paar Artikel zum Weiterlesen. Ich bleibe dran, versprochen!

19 Kommentare

  1. carlito am 16. März 2012 #

    Vormals bildschirmoptimierte Schriften wie Verdana, Arial oder Georgia sehen auf einmal noch klobiger und ungelenkiger aus.

    also eigentlich genau so wie wenn man eine aktuelle IKEA-anzeige betrachtet! ;-))))

  2. Michael am 16. März 2012 #

    Es wird wirklich spannend, hab heute mein iPad der 3. Generation bekommmen und optimierte Seiten wie Apple.com sehen natürlich absolute toll aus. Man merkt aber dass hier erst die Standardgrafiken geladen und dann die für retina optimierten nachgeladen werden. Wie hier genau gearbeitet wurde hab ich noch nicht nachgesehen.

    Halt uns auf dem laufenden Gerrit, finde dass ist aktuell das wichtigste und spannendste Thema überhaupt. :)

  3. Michael am 16. März 2012 #

    Sorry link oben übersehen. ;-)
    (How Apple.com will serve retina images to new iPads)

  4. David Hellmann am 17. März 2012 #

    Also fürs iPhone 4 mach ich das schon die ganze Zeit wenn ich die Kontrolle darüber habe. Bei meiner Seite jetzt nun auch wieder. Sie ist bis auf’s iPhone Responsive und bekommt auch x2 Grafiken zu sehen.

    iPad 3 werde ich das die Tage auch noch anpassen.

    Apple macht das mit den Grafiken aber auch nur auf der Startseite. Die Unterseiten sind auf dem iPad3 schwammig. Ehrlich gesagt ist es aber auch nicht sooo schlimm aber natürlich ist es geiler in x2.

    Wo wir zum Punkt Datenmengen kommen wo jeder sagt fürs mobile Web optimieren und genau die Geräte sind es jetzt, die das Doppelt auf Auflösung verlangen. Eigentlich recht lustig das ganze.

    Aber sollte Apple bald mit den Retina Macs derherkommen gehts richtig los. Dann bin ich gespannt was da für techniken zum Vorschein kommen um das Problem zu lösen.

    Denke Apple macht es so, dass man erst die normalen Grafiken bekommt und im Hintergrund dann die guten geladen werden und dann per JS einfach getauscht werden (x2 an den Dateinamen oder so). Somit lädt man erstmal die normalen und bekommt die Seite schneller zu sehen.

    Aber immer mehr mit CSS zu machen wird es wohl sein.

  5. Anatol Broder am 17. März 2012 #

    Das Problem der mitgehenden Bilder beschäftigt mich gerade auch sehr. Es gibt eine entsprechende Arbeitsgruppe bei W3C. Die Stimmung ist im Allgemeinen so, dass das Element img durch etwas anderes ersetzt werden soll.

    Es gibt auch schon einen Vorschlag von Apple. Man soll zu einem Bild eine Liste von Ressourcen hinterlegen, wobei neben jeder Adresse der Faktor ihrer Auflösung steht. Das Anzeigegerät entscheidet dann selbst, welches Bild das richtige ist.

    So wie es aussieht, müssen wir uns noch etwas gedulden, bis eine saubere Lösung kommt. Egal wie sie sein wird, unsere Freunde aus Redmond werden uns sicherlich mit ihrer Sicht der Dinge überraschen.

    Als Entwickler sollte man sich schon mal mit mindestens einem hoch auflösenden Anzeigegerät ausrüsten. Ich werde es sehr bald tun.

  6. M G Berberich am 17. März 2012 #

    CSS vs. Gerätepixeln

    Ich will mal nicht hoffen, daß noch andere Herstellen diesen Schwachsinn mitmachen.

    Das ganze ist eine Notlösung von Apple, weil sie beim (Software-) Design der iOS-GUI alles Wissen was man in den letzten Jahrzehnten über GUIs erworben hatte, einfach ignoriert haben. Wenn man so dumm ist GUIs nicht mit automatischen Layout zu implementieren, wie es seit Anfang der 90er Jahren Stand der Technik ist, sondern pixelweise von Hand layoutet, kann man halt die Auflösung des Gerätes nicht ändern, deswegen mußte Apple die Auflösung bei iPad und iPhone auch verdoppeln und diesen Unfug mit den logischenPixeln einführen.

    Aus Softwaresicht hat Apple die GUI völlig in den Sand gesetzt – dafür könnte man ganze Jahrgänge Informatiker durch den Bachelor fallen lassen.

  7. Gerrit am 17. März 2012 #

    @M G Berberich: Der Unterschied zwischen Geräte- und CSS-Pixeln steht in der offiziellen CSS2-Spezifikation des W3C, hat also mit Apple nicht sehr viel zu tun:
    http://www.w3.org/TR/CSS2/syndata.html#length-units

  8. Fabian Michael am 17. März 2012 #

    Ich besitze zwar auch nur Apple-Geräte und würde den Rest des Marktes auch manchmal ganz gerne einfach bewusst ausblenden, aber mit Bildern in der doppelten Auflösung ist es in Zukunft wohl nicht mehr getan. Denkt mal an die ganzen Android-Geräte, die haben nicht nur ein Pixelverhältnis von 2:1, sondern auch noch einige Werte dazwischen, bei denen es dann bei automatischer Skalierung sicher auch gerne einmal zu Unschärfen kommen kann.

    Für meinen zukünftigen Blog habe ich anfangs SVG-Bilder für sämtliche Icons verwendet, um dieses Problem zu umgehen. Leider wirkte sich die konsequente Verwendung von SVG-Grafiken negativ auf die Performance und Größe der Website aus. Darüber hinaus kam es im Opera zu Grafikfehlern und einige Browser wollten die SVG-Grafiken nicht als Vektoren drucken. iOS-Geräte hatten Probleme mit der Darstellung von Hintergrundtexturen in den Bildern. Bin dann letztendlich wieder zu PNG-Grafiken zurückgekehrt.

    Zum Thema Schriften: Wen wundert es, dass Schriften für Bildschirme so überoptimiert wurden? Microsoft hat seine »Brückentechnologie« ClearType für kleine Schriftgrade unter Windows quasi zu einem Muss gemacht, während Apple die Ausgabe dem Gerät selbst überließ. Natürlich hat die Methode von Microsoft auch Vorteile im Bezug auf Lesbarkeit, ist aber viel zu sehr an heutige Technologien gebunden. Schriften, die mit viel Arbeit für ClearType gehinted wurden, werden in den kommenden Jahren womöglich durch High-DPI Displays obsolet.

    @M G Berberich: Der Wunsch nach flexiblen Interfaces ist verständlich und nachvollziehbar, teilweise wohl auch zwingend notwendig. Aber mal ehrlich: Wo bleibt dort die Persönlichkeit der Gestaltung? Ich bin zwar auch kein Freund von dem Kitsch, den Apple in letzter Zeit bei seiner Software betreibt, aber E-Books sind ein schönes Beispiel dafür, wie es technisch leider sinnvoll, emotional, haptisch und optisch aber schlecht gelöst ist. Im Vergleich zu einem gedruckten Buch oder selbst einer PDF sehen E-Books aufgrund der mangelnden Kontrolle über das Layout völlig persönlichkeitslos und langweilig aus. Der Leser kann sich sogar die Schriftart selbst aussuchen. Das ist zwar eine nette Geste, aber letztendlich leugnet es viele Dinge, die ein Buch eigentlich ausmachen und nimmt viele Möglichkeiten, vor allem im Bezug auf Satzspiegel und Typografie.

    Aber Inhalte funktionieren so nicht (oder nicht so gut). Die Daten, die sich informationstechnisch erfassen lassen (also der Text selbst). Das gilt sowohl für Bücher, als auch für Software. Eine Skalierbarkeit ist immer innerhalb eines gewissen Rahmens möglich, aber auch nur innerhalb dieses Rahmens. Auf einem 24-Zoll Bildschirm ist für ein einfaches Adressbuch zuviel Platz. Warum sollte man es also nicht wie Apple auf eine gewisse, sinnvolle Größe festsetzen, genauso wie es beim gedruckten Buch der Fall ist? Zumindest für ihre Betriebssysteme finde ich diese Lösung in Ordnung, bei Websites haben wir ja (leider?) nicht die Wahl …

  9. José Stiller am 17. März 2012 #

    Wie bereits erwähnt wurde, arbeitet die Arbeitsgruppe des W3Cs bereits an einer Lösung. Weiterhin denke ich, dass man sonst vielleicht auch vermehrt auf Vektorgrafiken setzen sollte, denn diese sind frei skalierbar. Ansonsten scheint mir die vorgeschlagene Lösung noch am besten. Es ist zwar ein gewisser Mehraufwand diese Bilder in den verschiedenen Auflösung anzubieten aber bisher sind mir keine Techniken bekannt die Fotoqualität haben und obendrein frei skalierbar sind. Daher denke ich, dass Vektorgrafiker eine neue blüte erleben werden. Dazu gibt es derzeit auch ein recht schönes Beispiel von Phenomic, einem Studio von EA. Diese haben vor kurzen ein Browserspiel herausgebracht, dass komplett auf Canvas und damit auf Vektorgrafiken setzt.

  10. Don am 17. März 2012 #

    hä? Verstehe das mit den »CSS«-Pixeln nicht, kann das jemand erklären? :)

    Anyhow, ich hatte mir das iPad 2 nicht gekauft, weil ich es wirklich zu pixelig fand. Das Neue werde ich mir jetzt wohl besorgen.. ist doch wunderbar, entlich sieht die Schrift schon knackig scharf aus.

  11. Peter Glaab am 18. März 2012 #

    Wie sind Eure Eindrücke der Schriftdarstellung auf dem neuen iPad? Ich bekomme meins morgen und bin total gespannt, wie das Schriftrendering auf dem Retina-Dsiplay wirkt.

    Wer weiß, vielleicht führt die große Datenmenge bei hochauflösenden Bildern in Zukunft zu eher typolastigeren Layouts?

  12. iupuioui am 18. März 2012 #

    José Stiller: Blöd bloß, dass Canvas nichts mit Vektorgrafiken zu tun hat. Schon allein weil ein Canvas ein Bild mit definierter Pixelgröße ist. Das hätte dir als Webentwickler (Frontend) eigentlich klar sein müssen.

  13. Paolo am 20. März 2012 #

    Das mit der W3C-Arbeitsgrupp ist wirklich ironie der Geschichte. Wie schreibt Scott Hanselman so treffend? »I really wish that LowSrc still worked.«

  14. ThL am 20. März 2012 #

    Es gibt doch jetzt schon Monitor mit WQXGA-Auflösung. Wieso ist das mit dem iPad 3 auf ein Mal ein Thema?

  15. Da Stefan am 20. März 2012 #

    Spannend ist das alles auf jeden Fall. Ich frage mich nur: WER ZUM TEUFEL ZAHLT UNS DEN GANZEN MEHRAUFWAND? Ich mein: alleine mit Mediaqueries hat man für eine sturznormale Website schon fast doppelten Aufwand. Nun auch noch doppelt hinterlegte Grafiken? Ich habe da so meine Zweifel, dass dies von den Kunden überhaupt honoriert wird. Klar, der User erwartet solche Technologien. Aber es muss halt auch bezahlbar sein und auch bezahlt werden. Ansonsten ist alles hübsche Kunst…

  16. payday loans am 20. März 2012 #

    Sorry link oben übersehen. ;-)
    (How Apple.com will serve retina images to new iPads)

  17. Carolina Koehn am 30. März 2012 #

    Das absolut ärgerliche am Beispiel Apple ist, dass es anscheinend keine ordentliche Identifizierung der Geräte über den UserAgent gibt. Dann wäre das ja beherrschbar.

    Apple selbst macht das ja auch auf der eigenen Seite mit einen kleinen JS-Schnipsel, der auf die Pixelratio zielt. Bulletproof sieht anders aus, ich würde das einen dreckigen kleinen Hack nennen. Ansonsten könnte man ja die Skalierung brav den Server machen lassen, auch und gerade in einem CMS. Mir persönlich ist das ja egal, ob ich Bilder aus Photoshop nun in 960 Px oder einer anderen Größe exportiere.

    Ich bin mal gespannt, wie andere Hersteller das handhaben werden. Und ich sehe da auch Handlungsbedarf in unserer Kommunikation. Danke für diesen Artikel.

  18. Jo am 30. März 2012 #

    Ist das nicht ein kleiner Widerspruch, dass ausgerechnet mobile Geräte Grafiken mit höheren Auflösungen benötigen sollen? Ich denke mal Webseiten werden nicht schlanker und somit der Seitenaufbau nicht schneller, wenn man schöne Grafiken in hohen Auflösungen verwendet. Bitte nicht falsch verstehen. Ich denke sehr wohl, dass man technische Möglichkeiten ausnutzen sollte, nur warum das ausgerechnet auf mobilen Geräten (iPhones)? Habt Ihr denn alle schon LTE? Ich bin ganz froh wenn ich mal ein schönes »H« (HSDPA) im Handy-Display sehe. Wenn mir dann irgendein Server monströse Grafiken unterschiebt, werde ich tendenziell grumpig, weil meine Flatrate irgendwann auf GPRS gedrosselt wird. Wenn das erst passiert ist, haben solche Webseiten keine Chance mehr.

    Trotzdem: Schöner Artikel. Danke auch an Stefan Münz fürs posten bei Google+ :-)

  19. Gerald Schittenhelm am 20. September 2012 #

    Mein Tipp ist ganz klar SVG, von allen aktuellen Browsern bereits nativ unterstützt:
    http://caniuse.com/svg-img

    Echte Bilder (im Sinne von fotografischen Abbildungen) sind wie schon im Artikel dargelegt ziemlich unabhängig von der verwendeten Auflösung. Bewährt hat sich laut eigener Erfahrung eine Überdimensionierung vom Faktor x1,5; das ist ein Kompromiss zwischen höherer Datenübertragung und schärferen Konturen.

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.