Muss ich meine Bilder auf einem Retina-Display mit der doppelten Pixelgröße erstellen?

Wenn Sie fragen:

„Ich habe mir gerade ein Retina-Display zugelegt und bemerkt, wie verschwommen einige Webgrafiken aussehen, selbst wenn sie in der tatsächlichen Größe gespeichert werden, in der sie verwendet werden. Sollte man Bilder für das Web doppelt so groß speichern, weil es Retina-Displays gibt?“

Dann ist das meine Antwort:

Du hast Recht. Sie sollten Ihre Bilder für das Internet doppelt so groß machen, wie Sie sie tatsächlich benötigen, aber nicht , weil Sie jetzt ein Retina-Display haben, sondern weil es Geräte mit Retina-Displays wie Ihrem gibt, die zum Durchsuchen der von Ihnen erstellten Website verwendet werden. Aber Sie sollten die Abmessungen Ihrer Bilder in CSS auf die tatsächliche Größe setzen (nicht auf die doppelte Größe). Zum Beispiel

• Sie benötigen ein 20x20-Symbol
• Gestalten Sie es und speichern Sie es als 40x40-Bild
• Wenn Sie es auf der Webseite verwenden, geben Sie mit CSS an, dass es sich um ein 20x20-Bild handelt

Das Bild wird als 20x20-Bild angezeigt, aber da die Netzhaut eine höhere Dichte hat, werden 4 "physikalische" Pixel (2x2) verwendet, um jedes der "konventionellen" Pixel anzuzeigen.

Wenn die Seite auf Bildschirmen mit normaler Dichte angezeigt wird, werden die Browser das Bild heruntersampeln, sodass sie jedes „herkömmliche“ Pixel mit nur einem „physischen“ Pixel anzeigen können. Das Bild wird immer noch 20 x 20 groß sein. Der Unterschied wird (meistens) nicht wahrnehmbar sein.

Wenn der Unterschied aufgrund des Downsamplings, das Artefakte einführt, bemerkbar ist, schlage ich vor, Medienabfragen in CSS zu verwenden, um je nach Auflösung des Displays unterschiedliche Bilder bereitzustellen.

Physisch und konventionell sind keine Standardbegriffe. Ich habe sie erfunden.

Ich denke, Sie fragen nach dem Design bei Verwendung eines Retina-Displays, anstatt nach dem Design für Retina-Displays. An den gewählten Abmessungen müssen Sie nichts ändern.

Wenn Sie auf Ihrem Retina-Display einen 120-Pixel-Header erstellen, wird er auf einem Nicht-Retina-Display mit einer Höhe von 120 Pixeln angezeigt. Sie müssen Ihr Verhalten nicht ändern, da Sie ein Retina-Display verwenden.

Mac OS X skaliert alles, was Sie hinter den Kulissen sehen. Wenn Sie also ein 100 x 100 Pixel großes Bild in Photoshop erstellen, belegt es tatsächlich 200 x 200 Pixel auf Ihrem Bildschirm. Wenn Sie die Pixel selbst verdoppeln, erhalten Sie ein 200 x 200 Pixel großes Bild, das mit 400 x 400 Pixel angezeigt wird – was nicht Ihr Ziel ist.

Wenn Sie einen Beweis dafür wollen, versuchen Sie, ein 100x100-Bild in Photoshop zu erstellen, und verwenden Sie dann, CtrlShiftCmd4um einen Screenshot davon zu machen. Jetzt CtrlVin einer neuen Ebene hat der Screenshot die doppelte Größe des Bildes.

Wenn Sie für Retina-Displays entwerfen möchten , haben alle Ratschläge zu Abmessungen nichts damit zu tun, welche Art von Display Sie verwenden.

Nur um zu versuchen, meinen Punkt zu verdeutlichen:

Ich frage mich, ob ich alles in Photoshop verdoppeln sollte, um zu bekommen, wie es auf einem Nicht-Retina-Display aussehen würde ?

Um etwas zu produzieren, das wie auf einer Nicht-Retina aussieht, produzieren Sie genau das, was Sie zuvor getan haben.

Um eine Grafik mit doppelter Auflösung zu erzeugen, die nur Retinas vollständig anzeigen können (obwohl sie natürlich von einem Browser auf einer Nicht-Retina skaliert werden können), würden Sie die Auflösung tatsächlich verdoppeln.

Aber mein Punkt ist, dass Sie das auch tun müssten, wenn Sie gerade kein Retina-Display verwenden würden.

Sie haben recht – derzeit führt kein einfacher Weg an Retina-Displays vorbei, als die Auflösung Ihrer PSDs zu verdoppeln und mit doppelt so vielen Pixeln zu arbeiten.

Es ist tatsächlich viel einfacher, als es sich anhört, und eignet sich gut für einen zerstörungsfreien Arbeitsprozess (z. B. Verwenden von Photoshop-Polygonen für Standardformen, Vektoren für solide Symbole und zusammengesetzte Formen, Implementieren von Ebeneneffekten und Mischmodi, Verwenden von Smart Objects für Rastergrafiken). etc). Ich bin ein großer Befürworter der Vermeidung von Rasterung, es sei denn, Sie haben keine andere Wahl, nur für Fälle wie diesen, in denen Ihre Arbeit skaliert oder in der Größe geändert werden muss - es ist immer gut, auf diese Dinge vorbereitet zu sein!

In Bezug auf die CSS-Implementierung finden Sie weitere Einzelheiten in der Antwort von cockypup.

Viel Glück, da ist nichts dran. :)

Vielleicht die gleiche Größe mit 150 dpi Auflösung, es wird fertig sein.