Retina-Bilder! Wenn die Retina optimierten Bilder automatisch durch ein CMS oder durch ein Serverscript erstellt werden, hat man es leicht. In WordPress z.B. werden Retina-Bilder automatisch seit der Version 4.4 erzeugt. Vorher gab es einige Plugins dafür. Doch wenn man mal die Bilder von Hand erstellen muss, wird man mal wieder daran erinnert, wie viel Arbeit dies machen kann. Insbesondere mit Photoshop, wie ich kürzlich feststellen musste.
Was war nochmal Retina?
Kleine Wiederholung. Als Retina-Displays bezeichnet man die Bildschirme, die eine höhere Pixeldichte in einer gewissen Größe aufweisen im Vergleich zu regulären Displays mit derselben Größe. Beispiel: Hat z.B. ein normaler Bildschirm eine Pixeldichte von 50 Pixel pro 1 cm. Dann hat ein Retina-Display eine Pixeldichte von 100 Pixel oder mittlerweile sogar 150 Pixel pro 1 cm. Hier nochmal die Erklärung von Steve Jobs als noch keiner wusste was Retina ist:
Um Retina-Bilder in einem E-Book oder einer Website darzustellen, werden normalerweise 2-3 Versionen eines Bildes aus der hoch aufgelösten Fassung heraus generiert und z.B. bild.jpg, bild@2x.jpg und bild@3x.jpg genannt. Durch das Picture-Element und die srcset-Eigenschaft kann man dann die Darstellung im HTML steuern. Ein Beispiel kannst du dir unter der Adresse »https://labs.yves-apel.eu/demo-retina-bilder/« anschauen. Wenn dir ein Bild mit 800 x 400 (Querformat) oder 400 x 400 (Hochformat) angezeigt wird, ist es ein normaler Bildschirm. Bei 1.600 x 800 oder 800 x 800 ist es ein Retina-Bildschirm mit doppelter Pixeldichte. Bei 2.400 x 1.200 oder 1.200 x 1.200 sogar ein Retina-Display mit dreifacher Pixeldichte.
Erste Schritte mit Photoshop
Es gibt kleine Programme die nur die Aufgabe haben, Retina-Bilder zu erstellen. Allerdings sind dies meist Online-Services oder kostenpflichtige Programme. Doch warum so Eines nutzen, bekommt man doch in nahezu jeder Photoshop-Präsentation gezeigt, dass dies problemlos und unkompliziert in Photoshop CC möglich ist. Doch ehe man mit Photoshop anfängt, sollte man seine Bilder zuerst prüfen. Bei Retina-Bildern ist es zwingend notwendig, dass man noch die hoch aufgelöste Fassung besitzt. Hat man nur das Bild aus dem aktuellen E-Book oder von der nicht Retina-Optimierten-Website, bringt es absolut gar nichts, daraus Retina-Bilder zu erstellen. Denn wie auch die Retina-Displays, müssen die Retina-Bilder die doppelte oder dreifache Pixeldichte aufweisen. Hat man nur die niedrig aufgelöste Fassung, würde man das Bild einfach nur hoch skalieren. Auch wenn dies mittlerweile zu einem gewissen Prozentsatz ohne Qualitätsverlust möglich ist, sind es hier doch 200% und 300%, was sichtbar wäre. Zudem macht der Browser dies automatisch, wenn keine optimierte Version angegeben wird. Man hätte dann nur unnütze Bilder hinzugefügt, die sich negativ auf die Performance der Website oder des E-Books auswirken würden, ohne einen Vorteil davon zu haben.
Und hier sind wir auch schon beim Kernproblem von Photoshop. Um zum Export zu gelangen, wählt man zuerst das Menü Datei > Export > Exportieren als … aus.
Im weiteren Schritt öffnet sich ein Fenster mit allerlei Einstellmöglichkeiten. Hauptpunkt in diesem Exportfenster ist die linke obere Ecke, wo man die verschiedenen zu erstellenden Versionen, einstellen kann. Praktischer weise sind auch schon Presets für die Retina-Bilder mit automatischer Benennung vorhanden. Und genau hier ist der Fehler, denn diese Presets sind einfach nur komplett Falsch und machen das Gegenteil von dem was sie machen sollten. Denn Photoshop skaliert bei diesen Presets die Bilder immer hoch. Und wie schon vorher erwähnt bringt dies absolut keinen Nutzen oder sogar eine Verschlechterung. Dieses falsche Feature ist Adobe schon länger bekannt, doch noch immer nicht gebannt, liest man sich mal durchs Photoshop-Forum. Da sollte sich Adobe doch mal schämen!
Und wie geht es jetzt Richtig?
Glücklicherweise lässt sich dieser Dialog so bearbeiten, dass man doch noch seine richtigen Retina-Bilder daraus erzeugen kann. Allerdings gibt es noch einen gewaltigen Nachteil. Denn diese nachgestellten Einstellungen kann man nicht in einem eigenen Preset abspeichern, weshalb man bei jedem Bild von vorne anfangen muss.
Diese manuellen Einstellungen habe ich mal in drei Schritte aufgeteilt:
- Man muss das Original oder die beste zur Verfügung stehende Fassung des Bildes besitzen. Ich persönlich setze normalerweise ein Minimum von 3.000 Pixel auf der längsten Seite voraus was in etwa einem 8 Megapixel Foto entspricht.
- Im zweiten Schritt stellt man die Pixeldichte für die beste Bildvariante (ist hier @3x) ein. Da die längste Seite von meinem normalen Bild 800 px beträgt, ist dies hier der 3-fache Wert. Also 2.400 px.
- Im dritten und letzten Schritt werden die Bildvariationen selber definiert. Dafür legt man sich zuerst die 1x Größe an und hier dann der @3x Version entspricht (1 x 2.400 px = @3x). Beim Suffix gibt man dann auch @3x an. Die @2x-Variante entspricht 2/3 der @3x-Version. Man gibt also den Faktor 0,666666x an und benennt den Suffix mit @2x. Die kleinste Variante ist das normale Bild was 1/3 der @3x-Version entspricht und somit mit dem Faktor 0,333333x angegeben wird. Einen Suffix gibt es hier nicht. Hierbei gilt es auch 6 Nachkommastellen zu benutzen, da man sonst erhebliche Rundungsfehler bekommt.
Zusatz Tipp: Wenn du nur die normale und @2x-Fassung erstellen willst. Dann gib unter Schritt zwei nur die doppelte Pixelanzahl des normalen Bildes an (hier 1.600 px). Bei den Variationen würde die 1x-Fassung dann den Suffix @2x tragen. Das normale Bild würde in dem Fall mit dem Faktor 0,5x gerechnet und würde keinen Suffix haben.
Alles in allem ist dieser Weg aber beschwerlich und es ist ein Ausnahmeworkaround und nicht so eine tolle und ausgereifte Funktion wie gerne beworben. Ich hoffe inständig, dass Adobe diese sogar schlichtweg falschen Presets in der kommenden Version, richtig umsetzt und auch User-Presets in diesen Dialog einfügt. Ich für meinen Teil habe mir eine 1 EUR App im Appstore besorgt, welche diese Aufgabe voll und ganz ohne Workaround oder Zicken und in Stapelverarbeitung meistert.
Übrigens ist derselbe Fehler auch in Affinity Photo enthalten. Dort sind die Einstellungen aber einfacher und schneller umzuändern da man nicht mit dem x-Faktor rechnen muss und eigene Presets anlegen kann. Also nur das erste mal wirklich ein Hindernis. Von den professionellen Programmen gefällt mir mittlerweile Capture One am besten, was seit einigen Monaten mein Lightroom/Photoshop abgelöst hat. Hier sind Retina-Bilder durch entsprechend angelegte Verarbeitungsvorgaben überhaupt kein Problem und entsprechend Stress frei.