Retina-Images – nur eine Frage der Auflösung?

Die Einführung von Retina Displays hat viele positive Effekte – wer sich heute ein altes iPhone 3 ohne Retina aus dem Schrank holt, erschrickt regelrecht ab der geringen Pixeldichte.
Doch wie alles hat auch diese höhere „Pixel-Density“ ihre Nachteile. Durch die Verdopplung der Auflösung vergrössert sich die Dateigrösse eines entsprechenden Bilds um ungefähr das 4-fache. Dies ist gerade auf Mobiltelefonen ein Problem – man stelle sich nur die Situation eines Online-Shops vor, welcher beispielsweise 30 Produktbilder auf einer Seite anzeigen möchte.

Machen wir ein Rechenbeispiel:

30 Produkte * 5kB pro Bild = 150kB für alle Produktbilder.
In Retina wird daraus: 30 Produkte * 5kB * 4 = 600kB.

Nun kann aber momentan leider zwar auf verschiedene Auflösungen / Pixeldichten mit media-queries reagiert werden, leider aber noch nicht auf Verbindungsgeschwindigkeit. Und selbst wenn – wäre das wirklich die Lösung? Immer noch gibt es viele Menschen, die zwar ein Smartphone, aber nicht eine Flatrate haben – alle aktuellen Lösungen würden aber im Falle von „retina“ und „schneller Verbindung“ auch Retina-Images ausliefern. Das kann, fehlende Flatrate vorausgesetzt, ganz schön ins Geld gehen.

Da zudem sämtliche Lösungen momentan noch wenig Unterstützung oder zusätzlichen Overhead bedeuten, ist übergangsweise eine pragmatische Lösung zu suchen. In vielen Fällen kann es hilfreich sein, kleine Bilder ausschliesslich in Retina-Auflösung auszuliefern und diese dafür stärker zu komprimieren. Trotz der stärkeren Kompression werden immer noch bessere Resultate erreicht als mit Standard-Pixeldichten und niedrigerer Kompressionsrate.

Sehr grosse Bilder, z.B. Banner über die gesamte Seitenbreite, können auch mit erstaunlich guten Resultaten mit 1,5-facher Auflösung ausgeliefert werden – die Dateigrösse ändert sich so „nur“ um das 2,25-fache (was einer fast 50% Reduktion gegenüber Full-Retina entspricht), trotzdem wird eine deutlich bessere Qualität erreicht.

Hier ein Beispiel anhand eines aktuellen Projekts, bei dem wir von raffiniert media gmbh Consulting im Bereich Qualitätssicherung machen dürfen (bitte auf einem Retina-fähigen Gerät betrachten!):

1-fache Auflösung (non-retina), jpeg 100 Komprimierung – 15.5kB

1-fache Auflösung (non-retina), jpeg 100 Komprimierung

1,5-fache Auflösung, jpeg 100 Komprimierung – 30.5kB

1,5-fache Auflösung, jpeg 100 Komprimierung

2-fache Auflösung (full retina), jpeg 100 Komprimierung – 51.2kB

2-fache Auflösung (full retina), jpeg 100 Komprimierung

2-fache Auflösung (full retina), jpeg 60 Komprimierung – 16.8kB

2-fache Auflösung (full retina), jpeg 60 Komprimierung

2-fache Auflösung (full retina), jpeg 30 Komprimierung – 9.7kB

2-fache Auflösung (full retina), jpeg 30 Komprimierung

Sie sehen – die letzte Datei ist trotz der kleinsten Dateigrösse (9.7kB und somit ca. 35% kleiner als das erste Non-Retina-Bild) wesentlich detailreicher aufgelöst als die beiden obersten Varianten. Mit dieser Lösung können Sie Ihren Kunden Retina-Bilder liefern, ohne Benutzer mit langsamer Verbindung mit langen Wartezeiten zu verärgern.

Im Vergleich mit einem non-retina-Bild mit akzeptabler Kompression (jpeg 60):

wein_60

Fazit
Das „picture“-Element steht zwar vor der Einführung, ein breiter Support ist aber für die nächsten 2-3 Jahre nicht gesichert. Die Verwendung o.g. Technik bringt viele Vorteile mit sich:

  • Einfaches Standard-HTML (kein Overhead)
  • Kein JS notwendig (spart Download- und v.a. Ausführungszeit auf dem Client)
  • Eine einzige Auflösung pro Bildgrösse

Unsere Empfehlung lautet daher: Setzen Sie aus Performancegründen keine komplizierte, langsame Lösung ein, die zudem bei der Implementation und Wartung viel Aufwand benötigt. Nutzen Sie eine Responsive-Image-Lösung nur dort, wo einzelne, grosse Bilder (Banner, Produktdetail) angezeigt werden sollen. Bei repetitiven Darstellungen wie Produktlisten ist unsere Lösung im Vorteil.

Für weitere Beratung bei der Planung & Umsetzung Ihrer Responsive-Images-Lösung kontaktieren Sie uns, wir helfen gerne.