Bilder für Retina Displays @2x optimieren

Wissen Sie, was Retina Displays sind oder was Retina Ready bedeutet?  Wissen Sie, was daran so erstaunlich ist, was es kann oder was es zum Albtraum für Designer und Entwickler macht? Nach dem Lesen dieses Artikels werden Sie die Technologie verstehen und verschiedenen Möglichkeiten kennen, wie Sie Bilder für Retina Bildschirme optimieren können.

Was ist Retina?

Als Retina Displays bezeichnet man High Definition Displays, also hochauflösende Bildschirme. Aber bevor wir in die Details gehen, wie man Retina Ready Bilder erstellt, müssen Sie die Technologie verstehen, die dahinter steht.

Zuerst einmal sehen wir uns die Begriffe an. Hier kommen wir nicht um englische Ausdrücke herum.

  • Device Pixel ist die kleinste physikalische Einheit, die angezeigt wird.
  • Pixel Density (Pixeldichte) ist die Pixelanzahl in einem bestimmten Bereich.
  • Resolution (Auflösung) ist die Pixelanzahl über die gesamte Höhe oder Breite.
  • Pixels per Inch (Pixel pro Zoll) ppi oder dpi, berechnet man, indem man die Breite eines Bildes oder Bildschirms von cm in Zoll umrechnet und durch die Anzahl Pixel teilt, die horizontal angezeigt werden. 1 Inch/Zoll beträgt 2,54 cm.
  • High DPI bezeichnet eine Anzeigendichte von 200 Pixels per Inch oder mehr.

Ein iPad und ein alter PC-Monitor mit denselben Abmessungen haben eine unterschiedliche Pixeldichte. Der iPad zeigt auf derselben Fläche viel mehr Pixel an. Die Bildanzeige ist von höherer Qualität und Detailgenauigkeit auf Grund der hohen Anzeigendichte (DPI). Retina folgt diesem Konzept: dieselbe Displaygrösse, aber mehr Pixel bedeutet High DPI.

Die meisten Bilder werden mit 72 DPI für Standardbildschirme erstellt. Die DPI von Retina Displays ist 4 x höher. Deshalb ist ein solches Bild auf einem Retina Display verschwommen. Darum muss man nun Bilder für High DPI Geräte, für Geräte mit Retina Display, optimieren.

Standard Display

Standard Display

Retina Display

Retina Display

 

 

 

 

Zusammenfassung

Je kleiner und näher zusammen die Pixel, umso schärfer und qualitativ besser ist das Bild. Im Vergleich zum Standard Display zeigt ein Retina Display vier Mal so viele Pixel eines Bildes an (sofern sie denn vorhanden sind). Auch wenn iPad 2 und iPad 3 den gleich grossen Bildschirm haben, hat iPad 2 eine Auflösung von 1024 x 768 px, während das iPad 3 sogar eine Auflösung von 2048 x 1536 px hat.

Jetzt, wo Sie verstanden haben, dass Bilder für Retina Displays optimiert werden müssen, kommen wir zu den verschiedenen Möglichkeiten, wie man das macht.


Calvin Hollywood hat ein neues Videotraining veröffentlicht

Lightroom like a Boss von Calvin Hollywood


Raster Bilder

Pixelzeichnung

Eine Bitmap-Grafik basiert auf einem Raster. Deshalb wird sie auch Raster-Grafik genannt. Die bekanntesten Formate sind JPG, PNG und GIF. Rasterbilder müssen Pixel für Pixel gerendert werden. Dabei entspricht jedes Pixel einem bestimmten Farbton, Sättigung, Helligkeit, Opazität und Position innerhalb des gesamten Bildes.

Im Zusammenhang mit Bitmaps muss man wissen, dass sie abhängig sind von der Auflösung. Das heisst, sie lassen sich nicht nach oben (grösser) skalieren, ohne stark an Qualität einzubüssen. Aber sie können verkleinert werden. Und nur so erhält man grossartige Retina Ready Raster Bilder.

Bei Standard Displays entspricht 1 Bitmap-Pixel 1 Pixel auf dem Bildschirm. Bei Retina Ready Displays entspricht 1 Bitmap-Pixel 4 Pixel auf dem Display. Was macht nun das Retina Display, wenn ein Bild zu wenig Pixel hat? Es vervierfacht (multipliziert mit 4) die vorhandenen Bildpunkte. Auch wenn das Bild in den Originalabmessungen angezeigt wird, wird es unscharf.

Was kann man dagegen tun? Zuerst einmal benötigen wir ein Bild, das doppelt so gross ist wie die gewünschte Anzeigegrösse. Beim Einbau des Bildes wird es dann mit Code wieder verkleinert. Es gibt drei Vorgehensweisen.

HTML und CSS

Man kann mit HTML oder CSS die Bildgrösse auf die Hälfte der Originalgrösse reduzieren. Wir machen das anhand eines Beispiels mit einer Bildgrösse von 600 x 800 px, das wir in einer Grösse von 300 x 400 px einbinden wollen.

<img src="meinBild@2x.png" width="300" height="400" />

Dasselbe Resultat bekommt man auch mit CSS.

.image{
     background: url (meinBild@2x.png);
     background-size: 300px 400px;
     width: 300px;
     height: 400px;
}

Beachten Sie, dass der Hintergrundbereich definiert wird mit background-size. Damit wird auch der Hintergrundbereich für die Bildgrösse reserviert. Diese Syntax wird noch nicht von allen Browsern umgesetzt, aber das wird kommen.

Mit CSS kann man die Bildgrösse auch in Prozent definieren. Über Klassen spricht man einzelne oder alle Bilder an.

.image{
     background: url (meinBild@2x.png);
     background-size: 300px 400px;
     height: 50%;
     width: 50%;
}

img{
     height: 50%;
     width: 50%;
}

JavaScript

Mit jQuery kann man ebenfalls die Bildgrösse halbieren. Das funktioniert genau gleich wie mit CSS.

$(window).load(function() {
     var images = $('img');
     images.each(function() {
          $(this).width($(this).width() / 2);
          $(this).height($(this).height() / 2);
     )};
)};

 Media Queries

Hier ist es möglich, jeweils das passende Bild auszugeben, je nach dem, ob ein Standard Bildschirm oder ein Retina Display verwendet wird. Dazu benötigt man zwei Bildversionen, das normale Bild und eines, das doppelt so gross ist, also die Seiten müssen doppelt so lang sein.

@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) {

.image{
     background: url (meinBild@2x.png);
}
}

Skalierbare Vektorgrafiken

Zeichnen mit Vektoren

Im Gegensatz zu Bitmaps wären Vektorgrafiken für Retina Displays geeignet, denn sie lassen sich in alle Richtungen skalieren, ohne an Qualität zu verlieren. Leider sind sie nicht sicher. In einer SVG lässt sich leicht Schadcode transportieren. Das ist auch der Grund, weshalb WordPress von Haus aus den Upload von SVG Bildern nicht erlaubt. Belassen wir es also dabei. Ich rate vom Einsatz von SVG Grafiken ab, denn sie sind ein Risikofaktor. Dafür empfehle ich, die Technik mit den aufgeblasenen JPGs und PNGs zu nutzen.

Fazit

Retina Displays bieten einen hohen visuellen Genuss. Die Bilder sind scharf, haben Kontrast und sind einfach brilliant. Deshalb sollten Sie sich überlegen, ob Sie Ihre Seite nicht Retina Ready gestalten wollen. Die Internetwelt wird immer portabler, Ihre Webseite muss auf allen Geräten toll aussehen.

In die Zukunft arbeiten

Retina Displays können für Webmaster zum Albtraum werden, denn es bedeutet sehr viel Arbeit, alle vorhandenen Bilder zu überarbeiten, falls das überhaupt möglich ist. WordPress Anwendern kann ich das Plugin WP Retina 2x empfehlen. Ansonsten rate ich, nach vorne zu denken und zu arbeiten und Bilder ab jetzt mindestens doppelt so gross hoch zu laden, als die gewünschte Grösse. Man kann natürlich auch schon vor dem Hochladen @2x Bilder zu erstellen. Wie man das in Photoshop macht, zeige ich im nächsten Beitrag.

Retina Bilder erhalten den Zusatz @2x

Jetzt endlich habe ich auch verraten, wie Retina Ready Bilder benannt werden, nämlich mit dem Zusatz @2x hinter dem Namen, also meinBild@2x.jpg.

Dieser Artikel ist eine sinngemässe Übersetzung des Originalbeitrags von Paula Borowska auf designmodo und wurde mit schriftlicher Genehmigung erstellt.


Lightroom like a Boss von Calvin HollywoodDas neue Videotraining von Calvin Hollywood ist da:

Lightroom like a Boss

Jetzt erhältlich hier.


 

Ein Gedanke zu „Bilder für Retina Displays @2x optimieren

  1. Pingback: App Icon automatisch erstellen lassen – App Generator | Tutorial

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.