JPEG色彩在瀏覽器中呈現不一致

Question

我正在使用的徽標在不同瀏覽器中呈現不同。具體圖片可用here和this Twitter page。

下面是我的Mac OS X 10.11.5，圖形卡Intel HD Graphics 6000 1536 MB上的Chrome，Firefox和Safari上圖像的屏幕截圖。注意Chrome和Firefox如何以更亮的紅色錯誤地顯示徽標。

如何確保我的JPEG在瀏覽器中一致顯示？

Answer 1

我認爲這可能與鉻（https://bugs.chromium.org/p/chromium/issues/detail?id=44872）一個長期存在的問題，部分地造成的。只有一種可能性。

我的建議是確保所有圖像具有相同的顏色配置文件。 Safari支持v2和v4 ICC配置文件。 Firefox支持ICC v4顏色配置文件，但是我相信該選項默認是關閉的（可以在about：config中打開）。 Chrome根本不支持顏色配置文件。所以最後，這些瀏覽器中的每一個都會以不同的方式顯示顏色，它們看起來明顯不同並不是你的錯。

只要確保您使用的圖像全部使用相同的顏色配置文件，其餘部分由瀏覽器決定。

Answer 2

您的問題似乎與相關的sRGB顏色配置文件有關。看來你需要糾正伽馬或選擇另一種顏色配置文件

article我引用關係到pngs和sRGB，但總體上解決了sRGB問題（也提到了文章中的jpgs）。這是什麼，是說

使色彩空間匹配理論，一個可以嘗試使用PNG的 色彩管理功能，使色彩與CSS 的顏色相匹配。然而，實際上這不起作用，甚至可能使事情變得更糟，因爲關於規格 中的顏色所述的內容通常未被實施。 sRGB當您在正式規範中觸及顏色值 的問題時，應該以某種方式定義值的含義。描述 顏色值的含義的簡單方法是：「將顏色值傳遞給 Windows圖形API。作者應該以這樣的方式選取顏色值，以便在一般的PC上達到預期的外觀。「當然，這個定義在 應該是精確的和平臺中立的規範中看起來不太好。如果存在對正式色彩空間 定義的規範性引用，那麼它看起來會好得多 。一些處理色彩問題的人意識到，嘗試強制Windows PC進行色彩管理是不現實的。 sRGB是一款顏色空間，可用普通的 平均辦公室電腦模擬普通CRT。當Windows PC或Linux機器被稱爲「sRGB 系統」時，重要的是要認識到這些設備/軟件的組合沒有明確設計以符合稱爲sRGB的 規範。相反，該規範旨在符合系統 ！但是，並非所有的PC都是相同的，所以它不是像所有PC都具有精確的通用色彩空間那樣的 。sRGB只是一個平均情況的近似值 。 此外，當它說Mac是 而不是sRGB系統時，重要的是要認識到Mac可以配置成一個爲 。這可能只是一個蘋果平板顯示器的花式 Mac擁有者不一定希望他/她的顯示器 效仿一個平庸的辦公室CRT。 sRGB在CSS和PNG規範中 根據CSS2規範，CSS顏色值是指sRGB顏色空間 。然而，在實踐中，除了啓用了ColorSync的Mac IE 5 （默認禁用）之外的所有瀏覽器似乎只將 CSS顏色值視爲系統顏色 空間發生的任何顏色空間中的值。儘管如此，將srgb標記的PNG圖像的 顏色與 CSS顏色一致處理是合理的。再一次，它在實踐中並不這樣。作爲W3C推薦標準的PNG 1.0規範並沒有明確的方式表明圖像的色彩空間準確地爲sRGB 。理論上，如果圖像的伽瑪值設置爲1/2.2，結果應該接近。然而，在實踐中，圖像 的顏色標記爲不符合例如CSS中的CSS顏色。 Windows IE。不是W3C推薦標準的PNG 1.1規範增加了一種明確的方式，指明圖像的色彩空間爲sRGB（即sRGB塊）的 。但是，有問題。在Mac IE 5中，默認情況下禁用ColorSync 支持時，sRGB標記的PNG的 顏色與CSS顏色不匹配。 Safari將s伽瑪變化 應用於sRGB標記的PNG，但不會使CSS顏色與顏色不匹配 匹配。將sRGB顏色映射到系統顏色 空間時，CSS2規範未指定應使用哪個ICC渲染 意圖。另一方面，PNG 1.2允許定義顏色空間轉換的渲染意圖。如果瀏覽器使用ICC配置文件，它使用了 CSS顏色是從一個PNG 文件中定義的渲染目的的不同渲染意向做色彩空間 轉換，所產生的顏色可能會有所不同，即使原來的顏色 是相同的，在相同的顏色空間。

Answer 3

該標誌是相當簡單的着色和路徑，你有沒有嘗試過可縮放矢量圖形（.svg）格式？我會嘗試找到類似着色的SVG文件，並嘗試跨瀏覽器。

Answer 4

我會建議，而不是使用JPG來使用PNG，因爲它是專門爲在網絡上傳輸圖像而設計的。我從來沒有遇到過你的具體問題，但是懷疑png會解決問題。