Image Filter Effects 工具會套用六種有明確記載的像素轉換（Grayscale、Sepia、Invert、Warm、Cool 和 Original）到本機的 JPG、PNG 或 WebP 檔案，並匯出同尺寸的 PNG，因此網站素材在濾鏡處理後仍能維持精確的尺寸、透明度和頁面上的版面配置。由於來源在瀏覽器中解碼，結果則渲染到記憶體內的 canvas，因此不會有任何檔案上傳到伺服器，這對於尚未發佈的螢幕擷圖、產品 mockup 以及進行中的客戶專案來說非常重要。輸出的 PNG 會保留每個像素的 alpha 值，因此透明 logo、圖示和 UI 元素在經過 grayscale、sepia 或 invert 處理後仍會保持透明。尺寸會被保留下來，這代表 1200×630 的 Open Graph 圖片、512×512 的 favicon 來源檔，或 48×48 的導覽圖示，都可以在不重新測量或裁切的情況下進行濾鏡處理。頁面在下載前也會顯示所選的效果、強度、尺寸、檔案大小以及預覽，讓視覺方向能在素材替換到正式網站前先確認完成。
為什麼網站圖片需要不同的濾鏡處理方式
網站素材和印刷素材或社群媒體貼文並不相同。有三個限制讓大多數通用的線上濾鏡工具都不適合。首先，尺寸是與頁面之間契約的一部分：為 16:9 容器調整過的主視覺圖、1200×630 的 Open Graph 卡片、180×180 的 Apple touch icon，以及 32×32 的 favicon，全都位於已經測量好的版位中，而一個以不同尺寸重新匯出的工具會破壞該版位。其次，透明度是一項功能，而非副作用：導覽圖示、徽章和產品去背圖會以 PNG 形式發布，好讓頁面背景能夠透出來，而一個會壓平或填滿 alpha 的濾鏡會在無聲無息中毀掉這個素材。第三，色彩輸出必須是可預期的：品牌色在經過調色的狀態下必須保持可讀性，而一張變成 Instagram 風格預設的主視覺照片，六個月後無法僅憑名稱重現。
Image Filter Effects 是圍繞著這些限制所打造的。這個工具只會更動 RGB 色頻，絕不會調整尺寸、裁切、旋轉、銳化、模糊或降噪。每個像素的 alpha 都會被保留，包括完全透明像素背後那些隱藏的 RGB 值。輸出會是同寬同高的 PNG，因此經過濾鏡處理的圖片可以直接放回原本的 HTML、CSS 或框架版位。轉換本身是由頁面所描述的程式碼所定義，因此六個月後重新造訪時，相同的輸入會產生相同的結果。
適合用在網站素材的濾鏡
這個工具提供六種效果選項，每一種都有明確的 RGB 行為。在它們之間做選擇是視覺意圖的問題，而不是預設效果新穎與否的問題。
| 濾鏡 | 對 RGB 色頻的效果 | 常見的網站用途 |
|---|---|---|
| Grayscale | 逐像素加權總和，使用 0.2126 R、0.7152 G、0.0722 B（W3C Filter Effects 規格） | 裝飾性照片、部落格主視覺圖、單色點綴 |
| Sepia | W3C Filter Effects 規格中的三乘三色彩矩陣 | 復古風格的部落格封面、行銷橫幅、故事風格頁面 |
| Invert | 每個色頻以 255 減去自身值來取代 | 深色模式的裝飾圖形、hover 狀態預覽 |
| Warm | 在全強度下增加最多 30 紅、10 綠，減少最多 20 藍 | 美食、生活風格、黃金時段風格攝影、品牌暖度 |
| Cool | 在全強度下減少最多 20 紅，增加 5 綠、30 藍 | 科技、水、冬日或冷調品牌意象、冷色調點綴區塊 |
| Original | 不更動 RGB | 在套用真正的效果之前，先驗證本機解碼與匯出流程 |
其中有兩個名稱在被用於正式網站之前，值得更仔細地檢視。Warm 和 Cool 並不是經過測量的色溫校正，而 Sepia 也無法驗證照片的年代。頁面上將它們描述為創意性的 RGB 色頻偏移，並明確點出這個限制，以免創意預設被誤認為是經過校正的色彩科學。
為網站圖片套用濾鏡
在任何現代的桌面瀏覽器中開啟 Image Filter Effects，然後依照下列步驟進行。整個流程都停留在當前的分頁：來源檔案會在記憶體中解碼，RGBA 緩衝區會被轉換，新的 PNG 會直接提供下載，無需任何網路往返。
- 從本機磁碟選擇一個不超過 25 MiB 的 JPG、PNG 或 WebP，然後從清單中選擇想要的效果（Grayscale、Sepia、Invert、Warm、Cool 或 Original）。
- 將強度從 0%（原始色頻）設定到 100%（完全轉換），然後選擇 Apply filter。強度控制讓同一個效果可以當作微妙的色調，也可以作為完整的風格替換。
- 檢視同尺寸的 PNG 預覽，確認重要的顏色和透明度，然後下載結果。檔名會包含所選的效果，因此變體的目錄本身就是一目瞭然的文件。
如果濾鏡後的結果不夠理想，請更換效果或強度，然後重新套用。更換檔案或設定會讓任何先前的匯出失效，因此下載的永遠會是最新一次的轉換。處理程序只在選擇 Apply filter 後才會啟動，並透過一個零延遲的工作讓忙碌狀態能夠在像素迴圈開始前先渲染，使 UI 在處理大圖時仍能保持回應。
Grayscale 和 Sepia 轉換的定義方式
對網站經營者來說，實際的問題是這個濾鏡之後能否重現。這個工具中的 Grayscale 並不是「以某個量來移除飽和度」。它是一組定義明確的色頻加權：每個輸出色頻等於輸入紅色的 0.2126 倍，加上輸入綠色的 0.7152 倍，再加上輸入藍色的 0.0722 倍，依據 W3C Filter Effects Module Level 1 規格。綠色的貢獻大於紅色，紅色的貢獻又大於藍色，這就是為什麼同樣亮度的草地照片會比紅磚牆呈現更亮的灰色。
在部分強度下，這個工具不會在混合前先把全強度的 grayscale 目標值四捨五入。它會將矩陣結果計算為浮點數，根據所選百分比與來源進行混合，然後只做一次的四捨五入與限制。這個順序更貼近以量為基礎的矩陣建構方式，並能避免在中間強度出現單一色階的偏移。下方範例會以 50% 強度走過一個像素，展示整個來回過程的樣貌。
針對 RGB 為 (100, 150, 200) 的來源像素，以及強度 50% 的 Grayscale 濾鏡：
- 全強度 grayscale 目標值：(0.2126 × 100) + (0.7152 × 150) + (0.0722 × 200) = 21.26 + 107.28 + 14.44 = 142.98，三個色頻皆同。
- 紅色的 50% 混合：100 + 0.5 × (142.98 − 100) = 100 + 21.49 = 121.49，四捨五入並限制後為 121。
- 綠色的 50% 混合：150 + 0.5 × (142.98 − 150) = 150 − 3.51 = 146.49，四捨五入後為 146。
- 藍色的 50% 混合：200 + 0.5 × (142.98 − 200) = 200 − 28.51 = 171.49，四捨五入後為 171。
濾鏡後的最終像素：(121, 146, 171)。Sepia 套用的是同一份規格中類似的三乘三矩陣，並採用相同的強度內插規則，因此 30% 的部分 sepia 真的是全矩陣狀態的 30%，而不是不同的曲線。任何一種這三種轉換在強度 I 下的一般公式為：output = round(clamp(source + I × (fullTarget − source)))，四捨五入只會在最後進行一次。
Warm 和 Cool：創意方向，而非 Kelvin 校正
Warm 和 Cool 是兩個名稱讓人聯想到色溫的效果，頁面對於它們是什麼、不是什麼有明確的說明。在全強度下，Warm 增加最多 30 個紅色階和 10 個綠色階，同時減少最多 20 個藍色階。Cool 減少最多 20 個紅色階，增加最多 5 個綠色階，並增加最多 30 個藍色階。同樣的強度內插規則也適用：50% 的 Warm 大約會增加 15 個紅色階、5 個綠色階，並減少 10 個藍色階。Alpha 在每個步驟中都會被保留，而色頻值會被限制在有效的 0–255 範圍內，因此在已經飽和的像素上以全強度套用時不會產生溢位（wrap-around）的瑕疵。
這些名稱不代表的意義，對網站來說更為關鍵。Warm 並不是 6500 K 到 3200 K 的轉換。Cool 也不是 D65 到 D50 的調整。兩者都不使用 Kelvin 值、ICC 設定檔、色適應或相機白平衡。在校準過的螢幕上對同一個來源進行測試的使用者，無法得到與測量色溫刻度對齊的結果。頁面刻意指出這一點，以免創意預設被誤認為是經過校正的色彩科學。如果網站的色彩故事依賴於特定的品牌橘或特定的品牌藍，請在實際的瀏覽器和裝置上檢視濾鏡後的結果，再進行發佈。
這個濾鏡處理得很好的常見網站工作
有六個類別涵蓋了大多數網站經營者、設計師和前端開發人員會使用濾鏡工具的工作。
- 主視覺和部落格特色圖片。對攝影感強的主視覺照片套用 grayscale 或 warm，可以在一系列文章之間建立一致的視覺基調，而同尺寸的 PNG 可以直接放進既有的響應式容器，不需要重做 CSS。
- 產品照片和分類磁磚。低強度（約 20 到 40 個百分比）的 Sepia 或 Warm，可以為平淡的產品照片增添暖度，卻又不會掩蓋產品細節，而同尺寸的輸出可以直接放入已經排好的格狀版面中。
- Logo、徽章和導覽圖示。對透明 PNG 套用 grayscale 或 invert，可以保持 alpha 色頻完整，因此單色徽章或深色模式的導覽圖示，可以從與彩色版本相同的來源檔案產出。
- 裝飾插圖和區塊分隔線。中等強度（約 60 個百分比）的 Invert，可以將彩色分隔線翻轉為深色模式版本，而相同的尺寸能讓它保持在同一條格線上。
- Open Graph 和社群預覽卡片。1200×630、套用 sepia 或 grayscale 處理的 PNG，可以從全彩的原圖產出，而相同的寬高代表社群卡片預覽不會在頁面上產生位移。
- 與網站呼應的電子郵件附件圖片。產品照片的彩色版本可以匯出為 PNG，並附加到訂單電子郵件中，其尺寸和透明度與產品頁面上使用的圖片相符。
Limits to keep in mind before you publish
The tool is intentionally narrow. It does not crop, resize, rotate, sharpen, blur, denoise, detect faces, isolate subjects, or choose a filter automatically, so a website image that needs any of those steps should go through a different tool first. The hard limits protect the browser tab: images are capped at 25 MiB before decoding, 16 megapixels after decoding, and 12,000 pixels on either edge. Decoded pixel buffers are far larger than compressed files, so a 24-megapixel camera original that decodes to 24 megapixels sits right under the post-decode ceiling while a 60-megapixel original does not. A file that the browser cannot decode produces a clear error rather than a blank result.
Two review points matter before any filtered image replaces a live asset. First, filters can change readability, skin tones, brand colors, and the meaning of scientific or documentary images; a grayscale hero does not automatically have good text contrast, and a sepia treatment does not authenticate age. Second, for color-critical print, medical, scientific, archival, or professional photographic work, the page recommends a color-managed application with the required profiles and calibration instead of a creative filter. The output is a PNG so transparency is preserved and no hidden JPEG quality choice is made; convert the reviewed output separately if a smaller delivery format is required, for example through a browser-based image compressor after the filter step.