Bilder mit Hilfe von CSS-Media Queries für das iPhone 4 Retina-Display optimieren

Das iPhone 4 hat ein spezielles Retina-Display. Auf diesem hochauflösendem Bildschirm können Bilder besonders scharf dargestellt werden. Um auch alle verwendeten Bilder in einem Webdesign oder WordPress-Theme (z.B. das Logo oder ein Hintergrund-Musterbild) für das Retina-Display des iPhones zu optimieren, kannst du CSS Media Queries in deinem Stylesheet nutzen.

Und so funktioniert’s

Als erstes musst du von allen, in deinem Stylesheet verwendeten Bildern, eine zweite, doppelt so große Version erstellen.

Hast du z.B. ein Logobild (logo.png) mit den Maßen 300 x 80 Pixel für die normale Smartphone-Version deiner Webseite angelegt, musst du eine zweite Version deines Logos in der Größe 600 x 160px erstellen. Dieses Bild kannst du dann z.B. logo2x.png nennen.

iPhone 4 Retina Display Optimierung

Lade alle für das Retina-Display optimierten Bilder zu den anderen Bildnern deines Webdesigns (z.B. in den images-Ordner) hoch.

Jetzt kannst du die extra vorbereiteten, vergrößerten Bilder mit Hilfe von CSS Media Queries unterhalb deiner Standard-Styles aufrufen:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

}

Um z.B. ein Retina-Display optimiertes Logo logo.png mit den Maßen 600 x 160 Pixel (als h1 mit der Klasse .logo) einzubinden, benötigst du folgende CSS-Werte innerhalb der geschwungenen Klammern der Media Queries:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
h1.logo a {
background-image: url(images/logo2x.png);
-webkit-background-size: 300px 80px;
}

Indem du die Breite und Höhe der CSS-Klasse mit der “-webkit-background-size” in der eigentlich benötigten, originalen Größe angibst, wird das Retina-Display Logo wieder auf 50 Prozent der Größe reduziert. Mit diesem Trick erhältst du auch auf dem iPhone 4 eine gestochen scharfe Ansicht aller Bilder deines Webdesigns.

Ich hoffe dieser Tipp ist hilfreich für dich. Wenn du Fragen, Ergänzungs- oder Optimierungsvorschläge zu diesem Beitrag hast, schreibe mir doch einfach einen Kommentar. Ich freue mich schon auf dein Feedback.

21 Kommentare

  1. vorher stand da aber weight: 300px und height: 80px; – da wollte ich noch kommentieren, dass dass über background-size zu machen ist, aber jetzt ist es ja richtig…

    • Ja, hatte den Artikel noch einmal korrigiert, jetzt funktioniert’s und das Elmastudio-Logo ist inzwischen übrigens auch für das Retina-Dislpay optimiert :)

  2. Hey Ellen, schöner Artikel und einfach erklärt. Hast du Erfahrungen mit solch optimierten Bildern für Android-Smartphones mit Displays die eine ähnliche, hohe Pixeldichte besitzen gemacht? Funktioniert das dort genau so oder muss man dabei etwas anderes beachten?

    • Die Anleitung im Artikel gilt meines Wissens nur für das iPhone 4. Es gibt aber auch Möglichkeiten, über “device-pixel-ratio” weitere Optimierungen auch für Android-Phones vorzunehmen. Ich werde das Thema auf jeden Fall noch weiter ergänzen.

  3. Vielen Dank für den kurz aber gut erklärten Artikel! Praktisch, besonders wenn man ein Perfektionist ist :-)… werde das für mein nächstes CSS3 “Responsive” Theme umsetzten :-)

    Grüße
    Vincent

  4. Pefektes Timing, genau nach so etwas habe ich eben gerade gesucht :)
    Gleich mal testen, ob es den Effekt hat, den ich mir erhofft habe.

  5. Hallo,

    klingt ja erst mal super, aber woher weiß ich jetzt ob ich auf einem iPhone 3 mit iOS 3, einem iPhone 3 mit iOS4 oder auf einem iPhone 4??? anhand des UserAgents lässt sich das jedenfalls nicht bestimmen…

  6. @Fischfix das kann der Browser aus dem Device lesen, das wird nicht aus dem UserAgentString gelesen und hat nix mit dem OS zu tun. Das gilt für alle hochauflösenden Displays und könnte auch zum Testen auf @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {} herabgesetzt werden.

  7. Ich habe bei mir das Logo als svg eingebunden mit einem JS-Fallback auf eine PNG-Version, wenn der Browser das SVG nicht laden kann.

  8. Funktioniert das ganze auch mit einer Sprite-Grafik? Ich fasse all meine Hintergrundgrafigek unter sprite.png zusammen und binde diese dann mit background-position richtig ein.

    Werde dies wohl gleich einmal testen ;-)
    Besten Dank für den Input

  9. Funktioniert ;-)

    background-size: 83px 80px;
    -webkit-background-size: 83px 80px;

    einfach nicht vergessen
    Gruss Kerim

  10. Sebastian 6. Juni 2012

    Guude,

    danke für die Informationen. Was ich nicht ganz verstanden habe ist, wie gebe ich in meinem HTML Code an, an welcher Stelle das Bild angezeigt werden soll?

    Gruß,
    Sebastian

  11. Hallo Ellen,

    für fix mit einem Template verbundene Bilder ist das eine tolle Sache, die ich so zukünftig auch verwenden werde.

    Wie jedoch steht es um Bilder, die in Artikeln und Seiten eingebunden werden? Gibt es hier die Möglichkeit Device-Width abhängig ein Content-Bild zu liefern? Also bspw. für Device-Width > 480 ein Bild mit 960 Pixeln, für Device-Width <= 480 das gleiche Bild mit 480 Pixeln Breite auszuliefern?

    Gruß,
    Thomas

  12. hej Ellen,

    zuallererst, vielen Dank für deinen Artikel. Ich habe noch mal zwei ganz praxisnahe Fragen.

    1) Für das Logo hast du das Beispiel mit der doppelten Größe gebracht, d.h. von 300 x 80 px auf 600 x 160 px2. Frage: Bleibt dabei die dpi (Auflösung) dieselbe, d.h. bei beiden Grafiken 72 dpi?

    2) Wie gehe ich bei einem Foto vor, das eine Größe von 400 x 600 px und eine Auflösung von 72dpi hat. Gehe ich dann so vor wie bei dem obenstehenden Beispiel, d.h. 800 x 1200 px und welche Auflösung, 72 dpi?

    Besten Dank im Voraus für deine/ eure Antworten.

  13. Hallo zusammen,

    ich setze mich auch gerade damit auseinander und mich beschäftigt dabei auch die Frage:
    Wenn eine Grafik wie z. B. das Logo auf die doppelte Größe gebracht wird, bleibt dann die Auflösung bei 72 dpi oder nicht? Ich habe es zumindest einmal so kennengelernt, was ja noch lange nicht heißt, dass das der beste Weg ist. Würde mich sehr über eine Antwort freuen.

    Danke und beste Grüße,
    Julia

  14. @Steph @Julia

    Für digitale Bilder gibt es keinen dpi-Wert. dpi bezieht sich auf die Feinheit, mit der ein Drucker drucken kann. Auch ppi ist hier nicht relevant.

    Wenn ihr Euer Logo doppelt so groß bereitstellen wollt, müsst Ihr es natürlich in der entsprechenden Größe anfertigen und nicht einfach die kleine Version vergrößern – aber da erzähle ich Euch sicher nichts neues…

    ppi und dpi sind nur für den Druck relevant.

Hinterlasse eine Antwort

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