---
title: "Bilder mit Hilfe von CSS-Media Queries für das iPhone 4 Retina-Display optimieren"
author: "Ellen Bauer"
date: 2012-01-03
lang: de
source: https://elmastudio.de/bilder-mit-hilfe-von-css-media-queries-fur-das-iphone-4-retina-display-optimieren/
---

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

Das iPhone 4 hat ein spezielles [Retina-Display](https://www.apple.com/de/iphone/). 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](https://elmastudio.de/wp-content/uploads/2012/01/retina-display-image.jpg)

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.