Können Sie Retina- und Nicht-Retina-Bilder in dasselbe Sprite einfügen?

Beim Erstellen einer Webseite habe ich immer 2 verschiedene Sprites für meine Symbole erstellt. Ein Sprite für normale Bilder und ein Sprite für Retina-Bilder. Die Netzhautbilder werden in doppelter Größe und doppelter DPI gespeichert.

Beispiel:

Normales Symbol – 50 x 50 bei 72 dpi Retina-Symbol – 100 x 100 bei 144 dpi

Unter Verwendung einer Retina-Display-Medienabfrage in meinem CSS würde ich auf das Symbol abzielen und das Hintergrundbild durch ein Retina-Bild ersetzen und auch die entsprechende Eigenschaft für die Hintergrundgröße anwenden. (zB wenn das Bild 100x100 ist, Hintergrundgröße: 50px 50px).

Anstatt 2 separate Bild-Sprites zu haben, habe ich mich entschieden, meine Bilder in 1 Sprite zu kombinieren. Mit 72 DPI habe ich ein normales Symbol und darunter ein doppelt so großes Symbol (für Retina). Dies scheint auf einer Webseite gut zu funktionieren.

Gibt es neben der Leistung beim Herunterladen einer größeren Bilddatei einen Grund, warum ich getrennte Bilder für Retina und Nicht-Retina haben sollte? Spielt DPI beim Sparen für Retina wirklich eine Rolle oder muss es nur doppelt so groß sein?

Antworten (1)

Dieses Thema ist ziemlich komplex, aber ich werde versuchen, die wichtigsten Dinge zusammenzufassen.

DPI spielt keine Rolle

Der Browser passt die Größe des Bildes entsprechend den erforderlichen Pixelmaßen an. DPI-Werte werden ignoriert.

Verwenden Sie nicht mehrere Bildgrößen in einem Spritesheet

Die Verwendung von Bildern mit niedrigerer Auflösung spart Bandbreite und führt zu einem schnelleren Download. Die Verwendung beider Größen in derselben Datei spart kein einziges Byte, sondern fügt Bytes hinzu und ist daher eine schlechte Idee.

Empfehlungen

  1. Verwenden Sie nur hochauflösende aka Retina-Bilder und lassen Sie den Browser die Größe ändern.

  2. Optimieren Sie alle Bilddateien. Übrigens: Ein sehr gutes Tool zur Optimierung der Dateigröße von PNG-Bildern ist ImageAlpha .

Technisch gesehen wird ein Sprite-Sheet mit Versionen in progressiver Größe Mipmap genannt . ( en.wikipedia.org/wiki/File:MipMap_Example_STS101.jpg ) veranschaulicht, was Mario über verschwendete Bandbreite sagt. Der Vorschlag, nur eine große Größe zu verwenden und zu dehnen/verkleinern, ist jedoch auch ein Problem mit verschwendeter Bandbreite.
@Yorik du hast recht, es ist keine perfekte Lösung, aber besser als beide Auflösungen einzubeziehen. :-)
Ich stimme natürlich zu!
Kann CSS anhand der Medienabfrage nicht entscheiden, welche Bildgröße heruntergeladen werden soll? Oder werden in jedem Fall beide Bilder heruntergeladen?
@posfan12 Wenn Sie für jede Auflösung unterschiedliche Dateien bereitstellen, dann ja. Wenn es sich, wie in der Frage erwähnt, in einer einzigen Datei befindet, dann nein.
Können Sie Retina- und Nicht-Retina-Bilder in dasselbe Sprite einfügen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v