Webseiten und insbesondere Shops ohne Bilder sind wie ein Strandurlaub ohne Meer, beides verkauft sich eher schlecht. Denn gerade Bilder tragen viel zu einer (positiven) Kaufentscheidung bei. Wobei bisher die Regel galt, Bilder auf eine möglichst kleine Dateigröße zu optimieren – Stichwort Ladegeschwindigkeit und Google.
Doch Smartphones und Tablets werden mehr und mehr mit hochauflösenden Bildschirmen ausgestattet, auf denen Rasterbilder verpixelt und somit unscharf aussehen. Verkaufsfördernd ist das ebenfalls nicht, weswegen die Bilder den neuen Technologien angepasst werden sollten. Retina Ready wird das in der Branche genannt.
Wie also können wir solche hochauflösenden Bilder in WordPress schaffen? Ganz einfach: mittels Plugin. Das heißt WP Retina 2x und ist im Adminbereich unter Plugins flott installiert und aktiviert.
Retina Ready: WP Retina 2x Konfiguration
Unter „Grundlagen“ können wir bestimmte Größen aussperren, wodurch einige Bilddateien wie Thumbnails nicht automatisch erstellt werden. Das spart Speicherplatz. „Automatisch erstellen“ ist hingegen eine gute Idee, hier also bitte das Häkchen setzen. Ab sofort werden neue Bilder automatisch hochaufgelöst bereitgestellt.
Unter dem Reiter „Erweitert“ sind weitere Konfigurationen für das WP Retina 2x Plugin möglich. Hier bestimmen wir, welche Bilder auf welchen Geräten angezeigt werden. Außerdem können wir die Bildqualität beeinflussen. Zuerst „Methode“: Die einfachste Einstellung wäre „Retina.js“, bei welcher ein Script die Bilder abstimmt.
Kleines Aber: Jetzt werden zwei Bilder – erst das „normale“, dann die hochauflösende Retina-Version – geladen, was eine Verzögerung bedeutet. „Retina-Images“ setzt hingegen auf Cookies, es wird nur eine Bilddatei geladen. Permanente Anfragen an den Server werden ebenfalls unterbunden. Welche Methode die Beste ist, muss jeder selbst ausprobieren.
Via „Ignore Mobile“ können wir hochauflösende Bilder für Smartphone und Tablets sperren, was auf entsprechenden Geräten die Ladezeit verbessert. Die Qualität sollten Sie bei 90 Prozent lassen.
Mediathek auf hochauflösend umstellen
Nach der Konfiguration können wir auch bestehende Bilder – also diejenigen in der Mediathek – auf hochauflösend umstellen. Unter „Medien“ > „Retina“ erledigen wir das gleich für alle oder für einzelne Bilder mit nur einem Klick. Neue Bilder werden wie schon erwähnt automatisch auf Retina umgestellt.
Jetzt geht es ans Testen. Rufen Sie hierzu Ihre Seite auf einem Retina-Gerät (z. B. einem iPad) auf. Die Bilder müssten nun in neuer Schärfe erstrahlen. Sind manche Bilder noch unscharf, liegt das an Ihrem WordPress-Theme. Hier hilft nur der manuelle Austausch entsprechender Bilder. Wichtig: Hängen Sie der hochauflösenden Bilddatei ein „@2x“ – also bildname@2x.jpg – an. Alles weitere übernimmt das Retina 2x Plugin.
