Was ist das beste Farbprofil für eine PNG-Datei für CSS-Sprites zu verwenden?

Question

Ich verwende eine PNG-Datei als CSS-Sprites, und das Farbprofil lässt die PNG-Farben in Firefox und Chrome (auf einem Macbook Pro) unterschiedlich aussehen

Welches ist das beste Farbprofil, das ich verwenden kann, bevor ich diese PhotoShop-Datei (.psd) als PNG-Datei speichere? (Oder wie kann ich es am besten vollständig entfernen?)

---

Einzelheiten:

Dies ist das Menü Bearbeiten -> Farbeinstellungen in PhotoShop CS5:

Wie sollten sie eingestellt werden, bevor die Datei als PNG gespeichert wird? (oder kann ich sie beim Speichern ändern?)

Außerdem ist es wirklich seltsam, dass in Chrome, wenn ich mir die Datei unter

http://foobar:9000/images/sprites.png

o

http://localhost:3000/images/sprites.png

die Farbe Orange sieht dunkel aus.

aber wenn ich das gleiche Bild auf

http://foobar.mycompany.com:9000/images/sprites.png

o

http://hello.mycompany.com:8080/images/sprites.png (mit ssh-Tunnel zu meinem localhost)

jetzt ist die Farbe Orange hell. Sie zeigen auf genau dieselbe Datei, und selbst wenn ich sie herunterlade und einen Vergleich durchführe, sind sie binär gleich. Jemand weiß, warum?

Answer 1

Update: In Photoshop CC können Sie die Option "Farbprofil einbetten" deaktivieren, um kein Profil einzubetten. Es ist stark Es wird empfohlen, dass Sie dies tun, es sei denn, Sie haben einen wirklich guten Grund, dies nicht zu tun.

---

Die kurze Antwort ist leider, dass Sie mit JEDEM Farbprofil aufgeschmissen sind. Am besten ist es, keins zu verwenden, aber man kann Photoshop nicht dazu bringen, Dateien auf diese Weise zu speichern. Zu diesem Thema gibt es Tausende von Diskussionen und Meinungen, aber das Löschen des Farbprofils ermöglicht es Browsern, die Farben von pngs auf die gleiche Weise zu interpretieren wie HTML-Hex-Farben.

Ich persönlich entferne alle meine Farbdaten mit einem benutzerdefinierten Skript, aber etwas wie TweakPNG sollte es Ihnen ermöglichen, dasselbe zu tun.

Answer 2

Die kurze Antwort lautet, dass Sie überhaupt kein Farbprofil verwenden und sicherstellen sollten, dass die Option "In sRGB konvertieren" deaktiviert ist.

Voir dieser Artikel für eine bessere Erklärung, warum und wie man das macht

Answer 3

Versuchen Sie, Ihre Farbmanagement-Richtlinien auf Aus zu stellen. Ich bin nicht sicher, ob das hilft, aber vielleicht hilft es.

Answer 4

Das ist ein heikles Thema, da die Unterstützung für Farbprofile von Browser zu Browser unterschiedlich ist.

Die Verwendung von sRGB-Gamma 2.2 ist ein guter Anfang.

Wenn die CSS-Farben mit den PNG-Farben übereinstimmen sollen, müssen Sie die Farbprofil- und Gamma-Informationen aus dem PNG entfernen, da die meisten Browser keine CSS-Farben verwalten (oder wenn sie dies tun, verarbeiten sie sie auf dieselbe Weise wie nicht beschriftete PNGs).

http://imageoptim.com/color-profiles.html

Answer 5

Ich glaube nicht, dass es darauf eine Antwort gibt. Safari und Chrome gehen davon aus, dass alle Bilder im sRGB-Farbraum gespeichert sind.

Safari berücksichtigt ein anderes Farbprofil, das in das Bild eingebettet ist, Chrome jedoch nicht.

Firefox berücksichtigt nichts, sondern verwendet einfach die nativen RGB-Werte.

Das bedeutet, dass die Farben in Firefox auf einem Breitbildschirm (P3) wie einem Macbook pro im Vergleich zu den in Chrome und Safari angezeigten sRGB-Farben extrem lebendig aussehen werden.

Alternativ können Sie das P3-Profil auf die Bilder anwenden. Dann werden sie in Safari und Firefox lebendig, in Chrome jedoch verwaschen dargestellt.

Es gibt keine einzige Einstellung, die für alle Browser gilt.