2025-12-29
瀏覽器看「相片」質素有分別 ?
網友︰Chrome 偏冷、Firefox 偏暖、Edge 偏暗
文: 編輯部 / 新聞中心
文章索引: IT快訊

【流言終結者 ... ㊙️】近日,HKEPC「DIY砌機 超頻散熱 機箱改裝 暨不正常文書機研究所」有一篇非常有趣的討論︰「哪個 Browser 看相片質素最好?Chrome?Firefox?Edge?」結果引來其他網友恥笑,留言幾乎一面倒,甚至有人用「Chrome 偏冷,Firefox 偏暖,Edge 偏暗」反串取笑樓主,認為質素取決於顯示器,瀏覽器本身根本無分別。究竟真相又如何?HKEPC 小編來當一日科技「流言終結者」。

 

在不同瀏覽器看同一張相片,真的有分別嗎?沒錯,真的有分別!因為在現代瀏覽器架構中,圖片的顯示品質不再僅取決於解碼,更多取決於「渲染後端(Rendering Backend)」如何處理像素。

 

🔴實測方法

 

TEST

測試圖片︰黑白間條背景 HKEPC 字樣

 

HKEPC 製作了一張測試圖片(請點擊 HKEPC 原文連結),你會發現使用 Firefox 瀏覽器只會看到一張灰色空白圖片,頂多是看到有一些奇怪的污點;但改用 Chrome 或 Edge 瀏覽器的話,你會隱約灰色背景內有斜體的「HKEPC」字樣;至於用 Apple Safari 瀏覽器的話,不但會看到完整的「HKEPC」字樣,還會看到背景是由一條條黑白相間的線條組成。

 

這代表,每個瀏覽器在處理相片時的做法都不一樣。

 

 

◾Chrome/Chromium 陣營:Skia 圖形庫

 

Skia 是一個歷史悠久、極其強大的 2D 向量圖形庫(以 C++ 編寫)。它不只驅動了 Chrome,也是 Android 與 Flutter 的核心。

 

運作原理:Skia 的傳統強項在於「繪圖(Drawing)」。它將網頁元素視為一系列繪圖指令(如畫圓、填色、貼圖)。

 

縮放哲學:效能與平滑並重。Skia 在進行圖片縮放時,優先考慮捲動時的流暢度。它傾向使用 Mitchell-Netravali 或 Bicubic(雙三次插值)演算法。為了減少縮放過程中產生的「環狀偽影(Ringing Artifacts)」,會進行適度的模糊處理,這就是為什麼 Chrome 的縮圖有時看起來較模糊。

 

子像素處理:依賴於作業系統的文字與像素對齊邏輯,在高頻圖片邊緣(如垂直線)容易觸發子像素色彩補償,產生彩邊。

 

 

◾Firefox 陣營:WebRender(Gecko)

 

WebRender 是由 Mozilla 用 Rust 語言從零打造的現代化渲染後端,是「Quantum」計劃的核心成果。

 

運作原理:像遊戲引擎一樣渲染。WebRender 徹底改變網頁渲染邏輯。它不只是繪圖,而是將整個網頁視為一個 3D 場景,利用 GPU 的 Shader(著色器)並行計算所有像素的顯示。

 

縮放哲學:精確度與高對比。由於基於 GPU Shader,WebRender 能更有效率地執行 Area-based Integration(面積積分)或 Lanczos 類型的濾波器。這種演算法在縮小時會精確計算每個原像素對顯示像素的亮度貢獻,因此能鎖住黑色線條的亮度,這就是你觀察到「黑實」的主因。

 

 

◾隱藏的王者:Safari(WebKit/Core Graphics)

 

當 Chrome 選擇「平滑」而 Firefox 選擇「對比」時,Safari 選擇了「物理還原」。

 

核心後端:Core Graphics/Metal

與 Chrome 和 Firefox 使用跨平台圖形庫(Skia/WebRender)不同,Safari 在 macOS 上直接調用 Apple 原生的 Core Graphics(Quartz 2D)框架。

 

系統級整合:Apple 擁有從硬件(Retina 顯示器)、作業系統(macOS)到瀏覽器(Safari)的完整控制權。這讓它能使用計算量極大、但畫質極高的縮放濾鏡,而不需要擔心跨平台效能問題。

 

縮放技術:Safari 傾向使用 High-order Lanczos 或 Sinc 濾波器。這類演算法在數學上最接近「重建原始訊號」,不會為了防鋸齒而隨意模糊,也不會為了對比度而犧牲空間細節。

 

為什麼 Safari 能「看到條紋」?這是由於 Safari 在信號處理中成功保留了高頻信號,且有效抑制了混疊(Aliasing),它具備更精密的 Sub-pixel Precision。它在處理 1px 垂直線時,能更精準地映射到物理像素的 RGB 子像素上,而不觸發大面積的像素平均化。然而 Chrome 會因為抗混疊機制(Anti-aliasing)產生摩爾紋;Firefox 則會因為積分平均變成灰色。

 

 

◾結論

 

樓主說得沒錯,不同瀏覽器因為渲染引擎的不同,輸出的相片效果會存在差異。但哪個瀏覽器質素最好?這等同玩音響,絕對是見仁見智。有人喜歡平滑感(Chrome/Chromium 陣營)、有人喜歡銳利度與高對比(Firefox 陣營),而 Safari 則傾向原汁原味。

 

 

 

資料來源: