Grafiken für hochauflösende Displays produzieren

Geschrieben am von Daniel Koch
Dieser Beitrag ist als alt markiert. Dies bedeutet, dass der Inhalt alte Informationen beinhaltet. Es gibt mittlerweile aktuellere und bessere Lösungen für die behandelten Themen.

Für hochauflösende, meist mobile (Touch-)Endgeräte kommen immer häufiger hochauflösende Displays zum Einsatz. Diese besitzen eine höhere Pixeldichte und sind damit in der Lage wesentlich mehr Pixel auf gleicher Fläche darzustellen. „Normale“ 72 ppi-Grafiken werden auf solchen Displays „verpixelt“ und fransig dargestellt. Abhilfe schaffen hier entsprechend aufbereitete „Alternativgrafiken“. In diesem Artikel geht es um die Produktion solcher Grafiken mit Hilfe von Adobe Photoshop (Version CS4/11). Andere Programme wie z.B. GIMP bieten mit hoher Wahrscheinlichkeit auch die benötigten Funktionalitäten an, werden hier aber nicht beschrieben.

Ausgangslage ist eine Photoshop-Datei in „normaler“ Auflösung, im Beispiel hier: ein Sprite mit unterschiedlichen Icons:

  • 31×1300 Pixel (BxH)
  • Aufösung: 72 Pixel/Zoll
  • Die Icons/Symbole sind und müssen als sog. „Smart Objects“ angelegt sein, dadurch lassen sich Grafiken verlustfrei skalieren

Die nötigen Schritte:

  1. Datei für „normale“ Displays speichern (Ausgabedatei: z.B. icons.png)
  2. In Photoshop über die Funktion „Bild“ >; „Bildgröße…“ die Dokumentengröße auf 200% erhöhen. Wichtig: Folgende Optionen müssen angehänkt sein: „Stile skalieren“, „Proportionen beibehalten“, „Bild neu berechnen mit: Pixelwiederholung (Harte Kanten beibehalten)“
  3. Nach der Skalierung kann nun eine weitere Datei erzeugt werden, Vorschlag zur Benamung: identischer Name mit einem angehängten @2x

Als letzter Schritt müssen nun noch die beiden Sprite-Dateien referenziert werden.

Angaben für „normale“ Displays:

.icons {
    background: url(/img/icons.png) 0 0 no-repeat;
}

Angaben für hochauflösende Displays:

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .icons {
        background: url(/img/icons@2x.png) 0 0 no-repeat;
        background-size: 31px 1300px;
    }
}

Wichtig ist hier die Angabe der „backgroud-size“, die der Dateiabmessung der „normalen“ Version entsprechend muss.

Alternativ zu der Deklaration mehrerer Zielauflösungen innerhalb einer Datei, können die nötigen Angaben auch in einer separaten Datei ausgelagert sein und dann mittels einer Bedingungen innerhalb des „media“-Attributs kontextabhängig eingebunden werden:

<link rel="stylesheet" href="retina.css" media="screen and (-webkit-min-device-pixel-ratio:2)">