瀏覽器式轉換器使用的 W3C 灰階權重為紅色 0.2126、綠色 0.7152、藍色 0.0722，套用至每一個解碼後的像素，並四捨五入到最接近的 8 位元整數。對網站擁有者來說，這個公式之所以重要，是因為它能產生可預期、中性的單色結果，適合用於主視覺橫幅、部落格文章插圖、圖示以及點綴用的圖形。放入媒體資料庫的彩色照片會變成一張一致的灰階 PNG，卻不會改變其版面尺寸，而且你可以在提交到頁面之前先確認結果是否符合預期。黑白照片轉換器在本機執行這項轉換：檔案會在你的瀏覽器內解碼、繪製到畫布上一次、逐像素進行轉換，再重新編碼為可直接儲存到專案資料夾的 PNG。由於完全不上傳，原圖絕不會離開你的電腦，而且你在設計版面配置時可以快速反覆調整。輸出是全解析度的灰階，而不是一位元閾值、半色調、雙色調或底片模擬效果。它的設計目的是為了快速的網頁圖形、文件參考資料以及簡單的單色素材，而非用於色彩管理的印刷流程、RAW 檔開發或非破壞性的圖層編輯。
為什麼灰階在網頁圖形上表現良好
灰階影像在網路上有著悠久的歷史，因為它能去除視覺雜訊，讓前景文字與版面配置說話。現代網站在主視覺區、產品卡片、部落格標頭與編輯版面中運用單色攝影，因為這些位置上的文字疊加需要最高的對比。灰階 PNG 也能在所有瀏覽器中呈現完全相同的結果，無論是否支援色彩描述檔，因為每個像素在紅、綠、藍通道上帶有相同的數值。
在效能方面，單色 PNG 的壓縮效果良好：相鄰通道的數值相同降低了變化，而 PNG 的列濾波器在平滑漸層上能產生更短的游長編碼輸出。實際節省的位元組數取決於影像本身，但網頁發佈者經常使用封面照片的單色版本，讓頁面保持精簡，並確保在行動網路下快速載入。
當頁面同時混合攝影與品牌色時，灰階處理也很有幫助。一張色調低沉的灰階照片能讓品牌重點色——按鈕顏色、連結底線、提示框——脫穎而出，而不會與之爭奪視覺焦點。編輯型網站、雜誌版面與說明文件頁面經常使用這個技巧，而文件化的通道矩陣所帶來的一致性意味著同一張來源圖片在各種瀏覽器與裝置上都能呈現相同的效果。
如何將網站圖片轉換為黑白
大多數網站素材只需要一個具確定性的、瀏覽器式的處理流程，而非完整的創意工作流程。下列步驟會將單一來源檔案轉成可直接放入媒體資料夾的灰階 PNG。
- 從電腦中選擇一個本機的 JPG、PNG 或 WebP 檔案，大小需低於 25 MiB，並落在支援的解碼像素預算範圍內。可用於網站的圖片通常都遠低於這兩項限制。
- 開啟黑白照片轉換器並選取檔案。覽器會在本機解碼後繪製到等大的畫布上，因此輸出尺寸與來源相同。
- 點擊轉換為黑白。工具會讀取每個 RGBA 像素，計算 round(0.2126R + 0.7152G + 0.0722B)，將四捨五入後的數值寫回紅、綠、藍通道，並保留 alpha 通道不變。
- 在下載前確認尺寸與視覺結果。如果透明去背仍然完整，且色調符合你的版面需求，就繼續下一步。
- 下載灰階 PNG 並放入網站的媒體資料夾。由於輸出是全解析度 PNG，寬高與原始檔案解碼後相同，發布前不需要額外的縮放步驟。
轉換器實際上對像素做了什麼
對於瀏覽器工具，常見的擔憂是透明度：你花了數小時製作的去背在轉換後是否還在？答案是肯定的。實作方式會讀取完整的 RGBA 像素緩衝區，從三個色彩通道計算灰階值，並將這個單一數值寫回紅、綠、藍通道，同時將原本的 alpha 位元組原封不動地複製過去。70% 不透明的像素轉換後仍是 70% 不透明；完全透明的像素仍維持透明。這讓該工具可安全地用於作為標誌、徽章或貼紙風格疊加層的透明 PNG。
灰階公式本身就是 W3C 鏡效果的灰階等效，已記載於 W3C Filter Effects Module Level 1 規格中。它與 MDN 的 filter grayscale() 參考文件中所描述的 CSS 預覽濾鏡使用相同的權重，但這裡以確定性的像素數學方式套用，而非視覺疊加層。這對網頁圖形很重要，因為每次以相同的輸入檔案執行時，位元組層級的輸出會完全一致，這在需要在多個頁面重現相同視覺效果或日後重建素材時至關重要。
以一個實際例子來說明，取一個位於 (255, 0, 0) 的純紅像素。計算過程為 round(0.2126 × 255 + 0.7152 × 0 + 0.0722 × 0) = round(54.213) = 54。純綠 (0, 255, 0) 會變成 round(0 + 0.7152 × 255 + 0) = round(182.376) = 182。純藍 (0, 0, 255) 會變成 round(0 + 0 + 0.0722 × 255) = round(18.411) = 18。中性中灰 (128, 128, 128) 會變成 round(128 × 1) = 128。同樣的矩陣與四捨五入方式產生了介於其間的所有色階，這正是讓網站素材的輸出具備穩定、可重複特性的原因。
| 通道 | W3C 權重 | 純通道數值 (255) | 灰階輸出 |
|---|---|---|---|
| 紅 | 0.2126 | 255 | 54 |
| 綠 | 0.7152 | 255 | 182 |
| 藍 | 0.0722 | 255 | 18 |
| 總和 | 1.0000 | — | — |
什麼時候瀏覽器轉換器是正確的選擇
就網站工作而言，多數時候本機轉換器就是正確的選擇。你通常處理的是已經從相機、圖庫或設計工具匯出的 8 位元解碼圖片。輸出會直接送進 HTML、CSS 或內容管理系統，因此一張確定性的灰階 PNG 正好就是你所需要的。轉換速度很快、檔案絕不離開你的瀏覽器，結果在發布前也容易檢視。
在以下情況使用黑白照片轉換器：
- 為文章或登陸頁轉換一張主視覺圖、部落格封面或產品照片
- 去除與周圍文字競爭的圖示組或插圖的色彩
- 產生 JPG 螢幕圖或文件圖形的單色版本
- 將透明 PNG 去背圖（標誌、徽章、貼紙）轉為灰階，同時保留其 alpha 通道
- 在確定最終設計之前，快速以單色測試版面配置
上述每一項任務都符合瀏覽器轉換器確定性、像素精確的行為，而本機處理的隱私優勢在素材包含尚未發布的產品、私密螢幕擷圖，或任何你不想交給第三方伺服器的圖片時尤為顯著。
| 任務 | 覽器灰階轉換器 | 完整影像編輯器 |
|---|---|---|
| 網頁主視覺或封面圖片灰階化 | 理想 | 可行，但較繁重 |
| 保留透明去背的 alpha | 可以 | 可以 |
| ICC 色彩描述檔處理 | 不保留 | 支援 |
| RAW 檔開發 | 不支援 | 支援 |
| 選擇性保留色彩、雙色調、半色調 | 不支援 | 支援 |
| 非破壞性調整圖層 | 不支援 | 支援 |
| 大量檔案的批次轉換 | 一次一個 | 支援 |
| 印刷專用的黑版產生 | 未套用 | 支援 |
瀏覽器轉換器並非設計用於哪些情境
單色轉換只是專業色彩工作流程中的一個小步驟，值得清楚說明黑白照片轉換器不會做哪些事。它不會套用一位元黑白閾值、半色調圖樣、雙色調、底片模擬或選擇性保留色彩的編輯。它不管理 ICC 色彩描述檔、HDR 中繼資料、廣色域精度或印刷專用的黑版產生。它也不提供局部對比控制、加亮、壓暗或非破壞性的調整圖層。
這些功能屬於完整影像編輯器的範疇。對於需要色彩管理的印刷輸出、RAW 開發、數十個檔案的批次編輯，或是日後可能需要回頭調整單色分級的圖層組合，請在專門的工具中開啟原始檔。這個轉換器的存在，是為了讓網頁發佈者能用快速、可預期且本機的方式產生灰階網站素材，而不需要為單張圖片特地啟動編輯器。
它同樣不會保留來源檔案的每一個位元組。色彩描述檔中繼資料、EXIF 相機欄位與 HDR 轉換資訊都不會帶入 PNG 輸出。對於需要移除中繼資料以保護隱私的圖片，請先執行轉換，再將結果透過 EXIF 移除工具 處理後發布，或直接從中繼資料已清除的來源開始。灰階 PNG 一旦進入媒體資料庫，就可以像其他任何點陣圖素材一樣提供給訪客，在不同瀏覽器間擁有可預期的檔案大小與穩定的視覺表現。
延伸閱讀：變更照片中繼資料：新增創作者與版權。
延伸閱讀：如何逐步為照片添加陰影。