2016-06-10 13 views
3

Das Logo, mit dem ich arbeite, wird in den verschiedenen Browsern unterschiedlich dargestellt. Das spezifische Bild ist verfügbar here und this Twitter page.JPEG-Farbdarstellung in verschiedenen Browsern inkonsistent

Unten ist ein Screenshot des Bildes auf Chrome, Firefox und Safari auf meinem Mac OS X 10.11.5, Grafikkarte Intel HD Graphics 6000 1536 MB. Beachten Sie, dass Chrome und Firefox das Logo fälschlicherweise rot anzeigen.

Wie kann ich sicherstellen, dass meine JPEGs in allen Browsern einheitlich angezeigt werden?

enter image description here

+0

Enthält die JPEG-Datei Farbprofilinformationen? –

+0

Wie haben Sie es gespeichert und in welcher Software? Normalerweise kann dies in Adobe Photoshop vermieden werden, indem das Bild für das Web gespeichert wird. –

+0

Das Farbprofil ist sRGB. – Randomblue

Antwort

1

Ich glaube, das zum Teil durch ein langjähriges Problem mit Chrom (https://bugs.chromium.org/p/chromium/issues/detail?id=44872) verursacht werden kann. Nur eine Möglichkeit.

Mein Rat wäre, sicherzustellen, dass alle Bilder identische Farbprofile haben. Safari unterstützt standardmäßig die v2 und v4 ICC-Profile. Firefox unterstützt ICC v4 Farbprofile, aber ich glaube, die Option ist standardmäßig ausgeschaltet (kann in ca: config aktiviert werden). Chrome unterstützt keine Farbprofile. Am Ende wird jeder dieser Browser Farben anders anzeigen, es ist nicht Ihr Fehler, dass sie merklich anders aussehen.

Stellen Sie sicher, dass die von Ihnen verwendeten Bilder alle dasselbe Farbprofil verwenden und der Rest den Browsern entspricht.

1

Ihr Problem scheint mit dem zugehörigen sRGB-Farbprofil in Zusammenhang zu stehen. Es scheint, dass Sie entweder das Gamma korrigieren oder ein anderes Farbprofil wählen müssen.

Die article Ich zitiere von bezieht sich auf PNGs und sRGB, sondern insgesamt Adressen die sRGB Probleme (und erwähnt auch JPS früher im Artikel). Dies ist, was ist, sagt

Vornehmen der Farbräume Spiel Theoretisch könnte man versuchen, die Farbmanagement-Funktionen von PNG zu verwenden, um die Farben mit CSS Farben machen lassen. In der Praxis funktioniert dies jedoch nicht und kann sogar Dinge verschlimmern, da das, was über Farben in den Spezifikationen gesagt wird, nicht allgemein implementiert ist. sRGB Wenn Sie das Problem der Farbe Werte in einer formalen Spezifikation berühren, sollen Sie irgendwie die Bedeutung der Werte definieren . Die einfache Art, die Bedeutung von Farbwerten zu beschreiben, wäre wie folgt: "Die Farbwerte werden an die Windows-Grafik-API übergeben. Autoren sollten die Farbwerte in einem solchen Weg auswählen, dass das beabsichtigte Aussehen auf einem durchschnittlichen PC erreicht wird. "Von Natürlich würde diese Definition in einer Spezifikation, die genau und plattformneutral ist, nicht gut aussehen. Es würde viel besser aussehen , wenn es einen normativen Verweis auf einen formalen Farbraum Definition gäbe. Einige Leute, die mit Farbproblemen arbeiten, stellten fest, dass es nicht realistisch ist, Windows-PCs zu zwingen, Farbmanagement zu betreiben. sRGB ist ein Farbraum, der einen durchschnittlichen Büro-PC mit einer üblichen mittelmäßigen CRT modelliert. Wenn ein Windows-PC oder eine Linux-Box als "sRGB System" bezeichnet wird, ist es wichtig zu wissen, dass diese Geräte-/Software-Kombinationen nicht explizit für die Spezifikation namens sRGB entwickelt wurden. Stattdessen ist die Spezifikation auf konform zu den Systemen ausgelegt! Allerdings sind nicht alle PCs gleich, also ist es nicht wie alle PCs einen exakt gemeinsamen Farbraum haben.sRGB ist nur eine Approximation eines Durchschnittsfalls. Auch wenn es heißt, dass ein Mac kein sRGB-System ist, ist es wichtig zu erkennen, dass ein Mac konfiguriert werden kann. Es könnte einfach sein, dass ein Mac-Besitzer mit einem schicken Apple Flachbildschirm nicht unbedingt seine Anzeige auf emulieren eine mittelmäßige Büro-CRT. sRGB in den CSS- und PNG-Spezifikationen Gemäß der CSS2-Spezifikation beziehen sich die CSS-Farbwerte auf den sRGB-Farbraum. In der Praxis scheinen jedoch alle Browser außer Mac IE 5 mit aktiviertem ColorSync (standardmäßig deaktiviert) nur die CSS-Farbwerte als Werte in einem beliebigen Farbraum zu behandeln, in dem die Systemfarbe Platz ist. Dennoch wäre es vernünftig zu erwarten, dass die Farben eines sRGB-markierten PNG-Bildes konsistent mit CSS-Farben behandelt werden. Auch das funktioniert in der Praxis einfach nicht. Die PNG 1.0-Spezifikation, die eine W3C-Empfehlung ist, hatte keine eindeutige Möglichkeit, anzugeben, dass der Farbraum eines Bildes genau sRGB ist. Theoretisch sollte das Ergebnis schließen, wenn der Gamma-Wert von das Bild auf 1/2,2 eingestellt ist. In der Praxis stimmen die Farben von Bildern, die auf diese Weise mit gekennzeichnet sind, nicht mit CSS-Farben überein, z. Windows IE. Die PNG 1.1-Spezifikation, die keine W3C-Empfehlung ist, fügte eine eindeutige Möglichkeit hinzu, dass der Farbraum eines Bildes sRGB ist - der sRGB-Chunk. Es gibt jedoch Probleme. In Mac IE 5 entsprechen die Farben von sRGB-gekennzeichneten PNGs nicht den CSS-Farben, wenn die ColorSync -Unterstützung standardmäßig deaktiviert ist. Safari wendet einen Gamma-Wechsel auf sRGB-gekennzeichnete PNGs an, aber nicht auf CSS-Farben, die die Farben nicht übereinstimmen lassen. Die CSS2-Spezifikation legt nicht fest, welches ICC-Rendering Intent verwendet werden soll, wenn sRGB-Farben der Systemfarbe zugeordnet werden. In PNG 1.2 hingegen kann der Rendering Intent für die Farbraumkonvertierung definiert werden. Wenn ein Browser die Farbraum Konvertierung mit ICC-Profilen verwendet und der Rendering Intent für die CSS-Farben sich von dem in einer PNG -Datei definierten Rendering Intent unterscheidet, können die resultierenden Farben abweichen, auch wenn die Originalfarben identisch und identisch sind im selben Farbraum.

1

Das Logo ist recht einfach in Färbung und Pfad, haben Sie versucht, ein Scalable Vector Graphics (. Svg) -Format? Ich würde versuchen, SVG-Dateien mit ähnlichen Farben zu finden und versuchen sie Browser zu überqueren.

+0

Denken Sie auch, SVG wird eine bessere Lösung sein, und es führt wahrscheinlich zu noch kleinerer Stellfläche. – Peter

0

Ich würde empfehlen, anstatt jpg zu verwenden, png, wie es speziell für die Übertragung von Bildern im Internet entwickelt wurde. Ich habe das spezifische Problem, das Sie haben, noch nie kennengelernt, aber png wird das Problem beheben.

Verwandte Themen