HiRes (Retina & Co.) schon zu Beginn berücksichtigen? Wie Bilder anlegen?

Diese Frage kann man kaum allgemein beantworten. Retina-Displays sind im Desktop Bereich bisher nur durch das MacBookPro mit Retina-Display vertreten, aber natürlich deutlich stärker durch Mobil-Geräte. Grundsätzlich macht es also durchaus Sinn ein Retina-Optimiertes Theme zu wählen, zumal der Anteil der Retina-Displays in Zukunft wohl eher steigen wird und gerade Blogs gerne und viel Mobil gelesen werden.

Worin unterscheiden sich die Bilder
Die Bilder haben die doppelte Auflösung. Das heißt konkret, wenn das Logo vorher 300x100 Pixel groß war, muss es für Retina 600x200 Pixel groß sein – wichtig hierbei ist die CSS Angabe für die Backgroundsize bei Layout-Grafiken, denn die bleibt auf 300x100 Pixel, damit ergibt sich die doppelte Auflösung.

Das bedeutet z.B. für Bilder die du im Blog selbst einsetzt, in den Artikeln z.B. dass diese auch doppelt so groß sein müssen um der Display-Auflösung gerecht zu werden. Das erschreckt zunächst, denn eine JPG die vorher 560x300 Pixel groß war müsstest du also in 1120x600 Pixeln hochladen - das würde die Dateigröße erheblich vergrößern. Daher ist eine Empfehlung, die JPG Komprimierung deutlich zu erhöhen. Bei "normalen nicht Retina" Bildern würde das dazu führen, dass man die JPG-Artefakte deutlich stärker wahr nehmen würde. Da das Bild jedoch doppelt so groß ist (Pixelmaße) aber dennoch auf der ursprunglichen Größe angezeigt wird erhöht sich die Auflösung, daher nimmt man diese Artefakte nicht mehr wahr. Im Endeffekt hat man sogar eine Datei die ggf. sogar einige KB kleiner ist als die nur halb so große normale Abbildung.

Nette Links dazu:

• http://blog.netvlies.nl/design-interactie/retina-revolution/
• http://www.conversionscouts.de/methoden-tipps…-fur-retina-co/

@formateins
Setzt du für die Medienbibliothek eine eigene Lösung ein oder ein Fremd-Plugin? Würde mich jedenfalls mal interessieren... :) Bezüglich over-the-edge stimme ich dir im Prinzip zu, jedoch sparst du sogar Datenmenge über diese Methode: http://www.conversionscouts.de/methoden-tipps…-fur-retina-co/

Umgesetzt habe ich es bisher so auch noch nicht, abgesehen von erwähnten Logos und Icons... Aber interessant finde ich den Ansatz. Die Anzahl der Retina-Fähigen Displays ist bei B2B Seiten natürlich noch sehr gering, im privaten Bereich verzeichnen einige Seite jedoch über 20-30% - was ich schon nicht wenig finde, aber das wird wohl bei jedem Projekt anders ausfallen (noch). ;)

Danke dir für die Antwort :)

Hehe, joa darauf freue ich mich schon auf die hochauflösenden TFTs... ;) Dann brauch ich wohl endgültig ne Brille um das genießen zu können ;) Denke auch, dass bei den meisten Abbildungen (Fotos) @1x völlig reicht, selbst auf Mobil-Geräten - bzw. der Aufwand in keinem guten Nutzen-Verhältnis steht. Abgesehen bei den von dir erwähnten Logos, Icons... da mag ich keinen Pixelmatsch auf meinem Phone sehen und da hilft auch kein PhotoShop im Griff haben da müssen @2x her :) Bin gespannt was uns die Zukunft bringt...