Das iPhone 7 Plus hat eine Auflösung von 1920x1080px, was der Auflösung eines Full HD Fernsehers oder Flachbildschirms entspricht. Durch die enorm hohe Pixeldichte von 401 ppi (pixel per inch) passen die vielen Pixel beim iPhone aber auf ein viel kleineres Gerät und sorgen dadurch für ein gestochen scharfes Bild. Damit das Bild nun auf einem HiDPI (High Dots Per Inch) Bildschirm, bekannter unter Apples Marketingnamen „Retina Display“, scharf dargestellt wird, muss es mit mindestens 2-facher Breite und Höhe zur Verfügung gestellt werden. Für die iPhones 6 und 7 Plus genau genommen sogar mit 3-facher Breite und Höhe. Will man allerdings auf seiner Website Bilder in ausreichender Qualität und Schärfe anzeigen, geht das natürlich auf Kosten der Ladezeit und sollte daher gut durchdacht und auf das nötigste beschränkt werden. Das heißt, hoch aufgelöste Bilder sollten nur für Geräte ausgeliefert werden, welche diese auch wirklich benötigen. Wie also müssen Bilder für die Website optimiert sein, damit zum einen die Qualität auf hochaufgelösten Displays stimmt und gleichzeitig nicht alle anderen unter langen Ladezeiten leiden müssen? Schließlich verzögern Bilder das vollständige Laden der Website und umso größer sie sind, umso länger dauert es bis man etwas von der aufgerufenen Seite sieht. Das wiederum kann nicht im Sinne des Website-Betreibers sein denn obwohl Nutzer natürlich qualitativ hochwertige Fotos bevorzugen, sind sie sehr flüchtige Wesen. Bereits nach drei Sekunden Ladezeit brechen ein Drittel der Besucher und potentiellen Kunden genervt ab.

Cleveres Retina-Handling mit dem WordPress Plugin WP Retina 2x

Wer seine Website mit WordPress baut, kann mit dem Plugin WP Retina 2x bereits erste Ziele erreichen. WP Retina 2x zeigt automatisch für HiDPI Bildschirme das doppelt so breite Bild an wie für alle anderen Geräte. Dafür stehen vier verschiedene Methoden zur Auswahl.
  • Die PictureFill-Methode  ist dabei die empfohlene.Bei dieser Methode wird das HTML-Attribut srcset verwendet. Darüber können mehrere Bildquellen für die unterschiedlichen Displays angegeben werden.
    <img src=“bild.jpg“ srcset=“bild.jpg 1x, bild@2x.jpg 2x“ />
    Da einige Browser dieses neue HTML-Attribut noch nicht unterstützen, kommt dort das JavaScript Polyfill PictureFill zum Einsatz.
  • Retina.js ist eine JavaScript-Lösung, die zunächst das kleinere Bild lädt und dann wenn ein Retina-Gerät erkannt wird, das hochaufgelöste Bild lädt.
  • IMG Rewrite überschreibt das src-Attribut des <img> Tags sobald ein Retina-Gerät erkannt wird. Dadurch funktioniert es allerdings in Kombination mit einigen Caching-Lösung nicht besonders gut.
  • Retina-Images ändert die .htaccess Datei des Servers so ab, dass serverseitig immer das passende Bild ausgeliefert wird. Der Besucher der Seite bekommt davon nichts mit. Der Nachteil ist allerdings, dass diese Methode nicht in Verbindung mit einem CDN verwendet werden kann.
Für eine detaillierte Beschreibung des Plugins WP Retina 2x empfehlen wir die Webseite des Entwicklers. Der Einsatz von WP Retina 2x reicht allerdings nicht aus. Zusätzlich sollte man sich noch um eingebundene Hintergrundbilder und Icons kümmern. Außerdem ist es wichtig die vorgesehenen Bildgrößen festzulegen, die beim Upload eines Bildes erstellt werden sollen.

Bildgrößen festlegen

Im WordPress Backend kann man unter Einstellungen / Medien die zwei Standardbildgrößen „Vorschaubilder“, „Mittelgroß“, und „Groß“ festlegen. Wem diese nicht reichen, der kann per Code in der funtions.php noch weitere Größen erzeugen, z.B.
add_image_size('custom-size', 320, 9999);
In diesem Beispiel werden Bilder mit einer Breite von 320px erzeugt. Die Höhe ist entsprechend dem Bildverhältniss angepasst. Achtung: Die Breite eines Bildes sollte maximal so groß sein, wie es auf der Seite angezeigt werden kann. Hat man z.B. mehrere Content-Spalten nebeneinander, in denen der Inhalt maximal 320px breit werden kann, dann sollte dort genau diese Bildgröße verwendet werden. Kann hingegen beispielsweise in einem Bild-Slider eine Breite von 1024px angezeigt werden, sollte diese Bildgröße auch angelegt werden und an der entsprechenden Stelle zum Einsatz kommen. Das WP Retina 2x Plugin sorgt dann entsprechend dafür, dass HiDPI Bildschirme das doppelt so breite Bild angezeigt bekommen. 

Hintergrundbilder

Wenn im verwendeten WordPress Theme Hintergrundbilder vorgesehen sind und eingebunden werden, muss über eine Media Query dafür gesorgt werden, dass bei hochauflösenden Displays das doppelt so große Bild ausgeliefert wird. Das responsive Front-End Framework Foundation (http://foundation.zurb.com/docs/media-queries.html ) von Zurb verwendet dafür folgende Media Queries:
.bgr {
      background-image: url(example.png);
      background-size: 200px 300px;
      height: 300px;
      width: 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
      .bgr {
            background-image: url(example@2x.png);
      }
}

Icons

Es gibt verschiedene Ansätze, um scharfe Icons für hochauflösende Displays auszuspielen. Aktuell wird eifrig diskutiert über Icon Fonts und SVG-Sprites. Ein Icon Font ist eine Schriftart, die Icons statt Buchstaben enthält. Die Grafiken können dadurch wie eine Schrift einfach per CSS modifiziert werden. SVG steht für Scalable Vector Graphics. Wie der Name bereits verrät, handelt es sich um Vektor-Grafiken, die in XML erzeugt werden. Um die Browseranfragen beim Laden der Seite zu reduzieren, können die einzelnen SVG-Dateien zu einem SVG-Sprite zusammengefasst werden. Diese Datei muss ein <svg> Tag und darin einen <defs> Tag enthalten. Innerhalb des <defs> Tags werden dann alle SVG-Pfade der einzelnen Icons in <g> Tags mit eindeutiger ID hintereinander gehängt.
<svg>
     <defs>
          <g id=“icon-x“> ... </g>
          <g id=“icon-y“> ... </g>
          <g id=“icon-z“> ... </g>
    </defs>
</svg>
Das kann manuell erledigt werden oder mit einem Tool wie z.B. grunt-svgstore automatisiert werden. SVGs haben gegenüber den Icon Fonts mehrere Vorteile.
  • Sie sind schärfer als Icon Fonts, da es sich um Vektor-Dateien handelt, welche ohne Qualitätsverluste skalierbar sind.
  • Icon Fonts werden von den Browsern wie Schrift behandelt und können daher Anti-Aliasing aufweisen. Dieser Effekt entsteht dadurch, dass die Kanten der Schrift standardmäßig mit der „subpixel antialiasing“ Methode geglättet werden, wodurch die Ladezeit enorm reduziert wird.
  • Bei SVGs kann man einzelne Teile einfärben oder Transparenz und Verläufe darstellen, während man bei Icon Fonts nur komplett die Farbe ändern kann.
Der einzige Nachteil von SVG ist die Browserkompatibilität. Internet Explorer ≤ 8 und Android 2.x unterstützen sie gar nicht und bei Internet Explorer 9 bis 11 gibt es Probleme mit der Skalierung. Da aber die „Feature Detection“ der Browser sehr zuverlässig ist, kann überprüft werden ob der aktuell verwendete Browser SVG unterstützt. Falls nein kann eine Fallback-Lösungen ausgeliefert werden. Dafür ist Grunticon (https://github.com/filamentgroup/grunticon) ein geeignetes Werkzeug. Es sorgt dafür, dass Browser ohne SVG-Support als Fallback PNGs anzeigen. Neben dem Grunt Task gibt es auch das Web-Tool Grumpicon, das für die Aufbereitung der SVGs verwendet werden kann. Eine ausführliche Anleitung gibt’s: https://www.filamentgroup.com/lab/grumpicon-workflow.html

Favicon  

Das Favicon sollte in mehreren Größen generiert werden um für jeden Browser und jede Platierung an der es angezeigt werden kann (Browser Tab, Lesezeichenliste, Favoriten, Browser History etc.) , die notwendige Qualität vorliegen zu haben. Als Format bietet sich .ico an, da es auch von älteren Browsern unterstützt wird und bei diesem Format in einer Datei mehrere Größen abgespeichert werden können. Bitte beachten: Die kleinen Icons nicht einfach herunterskalieren, sondern reduzieren bzw. abstrahieren! Ein geeignetes Tool zum Erstellen der .ico Datei ist x-icon editor (http://www.xiconeditor.com/). Dort kann man sein Icon in der Auflösung 64×64 hochladen, entsprechend für die kleineren Icons anpassen und daraus eine .ico Datei generieren.

Fazit

Der Aufwand, den Besuchern Ihrer Website scharfe Bilder mit schnellen Ladezeiten zu liefern, lohnt sich. Heute sind HiDPI bzw. Retina Bildschirme bereits weit verbreitet und pixelige Bilder hinterlassen einen unprofessionellen Eindruck. Gleichzeitig verscheuchen lange Ladezeiten schnell Ihre Besucher oder sogar potentielle Kunden. Mit den beschriebenen Tools und einem gut durchdachten Konzept lässt sich das jedoch relativ schnell und einfach vermeiden und sie erhalten das beste aus beiden Welten: Eine gestochen scharfe Anzeige Ihrer Bilder bei verträglichen Ladezeiten.

Quellen

http://themefuse.com/making-your-wordpress-blog-retina-compatible/ http://wplift.com/make-wordpress-themes-retina-display-ready http://apps.meow.fr/wp-retina-2x/retina-methods/ http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/ https://css-tricks.com/icon-fonts-vs-svg/ https://github.com/filamentgroup/grunticon https://www.filamentgroup.com/lab/grumpicon-workflow.html http://www.smashingmagazine.com/2012/08/towards-retina-web/ http://davidwalsh.name/retina-favicons https://premium.wpmudev.org/blog/favicons-wordpress/ https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/
hreviewfree personal money management softwareпоисковый аудит сайтаправильно растушевывать тени векахRecomcathedral in st petersburg russia