Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Gadgets & Lifestyle

Mehr Pixel fürs iPad: Was hochauflösende Displays für Webentwickler bedeuten

Das neue iPad 3 kommt mit einem hochauflösenden Display daher, welches mit 1.536 mal 2.048 Pixel eine vierrmal höhere Auflösung hat als sein Vorgänger. Die immer größer werdenden Unterschiede der Auflösungen zwischen einzelnen Geräten stellt Webentwickler vor neue Herausforderungen. In welcher Auflösung sollen Bilder für Websites und Webanwendungen bereitgestellt werden?

iPad 3 (Bild: Macworld)
Das neue iPad 3 (Bild: Macworld)

Mit der Einführung von CSS3 gibt es dank Media Queries die tolle Möglichkeit, Webdesigns für unterschiedliche Auflösungen zu entwickeln. Neben einem mehrspaltigen Design für Desktops lässt sich parallel dazu sehr schön ein einspaltiges Design für Mobilgeräte mit kleiner Auflösung bereitstellen. So kann jedes Gerät das für seine Auflösung optimierte Design darstellen. Auch Auflösungen für unterschiedliche Tablets wie dem iPad lassen sich berücksichtigen.

Grundsätzlich sind Media Queries so flexibel, dass theoretisch jede Auflösung berücksichtigt werden kann. Einzig die Darstellung von Bildern stellt hier ein Problem da, da diese mit Media Queries nicht berücksichtigt werden können.

Der Vorteil von Apps

Bei der Entwicklung mobiler Apps für iPhone, iPad und Android-Geräte lassen sich Bilder in unterschiedlicher Auflösung zur Verfügung stellen. Je nach Gerät wird dann das Bild in optimierter Auflösung gewählt. Wenngleich HTML5 und CSS3 viele Funktionen mitbringen, die es bislang ausschließlich für Apps gab, gibt es noch keine native HTML-Möglichkeit, Bilder in unterschiedlichen Auflösungen für verschiedene Geräte zur Verfügung zu stellen.

Es gibt lediglich einige Workarounds, mit denen sich Webentwickler behelfen können. Per CSS lässt sich beispielsweise die Breite von Bildern automatisch an die jeweilige Displaybreite skalieren. Auf diese Weise können Bilder immer so verkleinert dargestellt werden, dass sie maximal die Breite des Displays ausfüllen:

img {
  max-width: 100%;
}

Der Nachteil dieses Workarounds ist, dass Bilder immer in hoher Auflösung geladen werden müssen, selbst wenn sie auf dem Display nur mit gut 300 Pixeln Breite dargestellt werden. Gerade für eine mobile Internetnutzung ist diese Variante nicht optimal.

Ein weiterer Workaround setzt auf Data-Dashs und JavaScript. Dabei werden zunächst nur niedrigauflösende Bilder geladen. Ein Verweis zu einer hochauflösenden Alternative wird per Data-Dash bereitgestellt:

<img src="bild_mobil.jpg" data-fullsrc="bild_desktop.jpg" />

Per JavaScript wird bei entsprechend hoher Auflösung das niedrigauflösende Bild gegen die hochauflösende Variante ersetzt. Der Vorteil hierbei ist, dass die hochauflösende Variante immer nur dann geladen wird, wenn sie tatsächlich auch gebraucht wird.

Aber da dieser Workaround nur mit JavaScript funktioniert, ist auch dieser nicht optimal. Apple nutzt derzeit im Übrigen einen ähnlichen Ansatz, um Bilder in zwei unterschiedlichen Auflösungen anzubieten.

Anzeige

Neues PICTURE-Element als Lösung

Die Responsive Images Community Group des W3C arbeitet an einer Lösung, die solche Workarounds überflüssig machen würden. Mit einem neuem Element sollen Bilder in unterschiedlichen Auflösungen bereitgestellt werden:

<picture>
 <source src="bild_mobil.jpg" />
 <source src="bild_desktop.jpg" media="min-width: 800px" />
 <img src="bild_mobil.jpg" />
</picture>

Über das PICTUE-Element können mehrere Bildquellen per SOURCE-Element eingebunden werden. Neben einer Standardquelle lassen sich beliebige zusätzliche SOURCE-Elemente bereitstellen, die anstelle der Standardquelle geladen werden. Per Media Queries können die einzelnen Elemente für die entsprechende Auflösung definiert werden.

Ein IMG-Element als Fallback sorgt dafür, dass auch Browser, die das PICTURE-Element nicht kennen, ein Bild darstellen können.

Derzeit ist das PICTURE-Element nicht mehr als ein Vorschlag. Würde er jedoch in die Tat umgesetzt, ließen sich damit dis bisherigen Probleme mit unterschiedlichen Auflösungen lösen.

Fazit

Bis es eine zufriedenstellende Lösung gibt, wird man in den meisten Fällen nicht um einen Workaround herumkommen. Für Schatten und Verläufe, die bislang immer per Bilddatei realisiert werden mussten, lohnt sich ein Blick auf CSS3. Damit lassen sich einige schöne Effekte realisieren, die ohne Bilder auskommen. Auch der Einsatz vektorbasierender Formate wie SVG umgeht die genannte Auflösungsproblematik.

Wie berücksichtigt ihr unterschiedliche Auflösungen von Geräten? Nutzt ihr ebenfalls Workarounds?

Weiterführende Links zum Thema mobile Webdesign:

Finde einen Job, den du liebst

7 Reaktionen
Oliver

Php IM, GM in Kombination mit Javascript.

Nobody
Nobody

Ein Grund mehr, endlich SVG zu benutzen !?

Sebastian Apprecht

Besten Dank Dir Dennis für den Artikel. Derzeit kommen bei neuen Projekten Media Queries und Data-Dash/jQuery zum Einsatz. Es ist jedoch aus 2 Gründen ein Kompromiss (und schließe mich der Meinung von Thomas an): 1. Die Verbindungsgeschwindigkeit sowie die Pixeldichte wird nicht berücksichtigt und 2. Aus Gründen der Wartbarkeit und Nutzerfreundlichkeit kann es nicht sein, dass 2 Bilder und etwas mehr Code gepflegt werden muss.

Frank

"SAMSUNG ist schon geil....."

jepp!

Thiemo
Thiemo

Möglich aber umständlich ist, anstatt einem img ein div mit einer id zu versehen und dann per CSS auswählen lassen, ob das normale oder das 2x als div-bg geladen wird. Bei Theme-Elementen klappt das gut, bei Inhalten wird es auf Dauer jedoch zu komplizert

Thomas Quensen

Leider ist das nicht wirklich eine lösung, da neben der Auflösung in dem Beispiel z.B. nicht die Pixeldichte berücksichtigt wird.

<picture>
<source src="bild_mobil.jpg" />
<source src="bild_desktop.jpg" media="min-width: 800px, min-device-pixel-ratio: 2" />
<img src="bild_mobil.jpg" />
</picture>

Ist aber leider auch nicht so toll, weil dann auch das iPhone2 das hochauflösende Bild bekommt, aber evtl momentan nur über GPRS surft...

Viel Sinnvoller wäre es doch, wenn man den Browser die Entscheidung überlassen würde, welche Version aktuell die beste Wahl wäre, und das nicht über media-Queries oder ähnliches vorschreibt.

Evtl sowas wie
<picture>
<source src="bild_mobil.jpg" type="image/jpeg" width="400" height="200" size="120kb" />
<source src="bild_desktop.jpg" type="image/jpeg" width="800" height="400" size="350kb" />
<source src="bild_full.tif" type="image/tif" width="4000" height="2000" size="3.5mb" />
<img src="bild_mobil.jpg" />
</picture>

je nach Anbindung, Pixeldichte oder auch breite der Spalte, in der das Bild dargestellt wird, sucht sich der Browser dann die passende Quelle..

naja, nur so eine Idee. Für die von dir gepostete Picture-Version gibt es übrigens schon einen Polyfill:
http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/

Christian Baer

Die Lösung für das Problem liegt doch auf der Hand: Einfach immer ASCII-Art benutzen, sieht auf jedem Gerät gut aus :)

http://www.chip.de/ii/248104854_fba3925ccb.jpg

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot