模糊化網頁用圖片會讓圖片中一個或多個區域變得柔和，讓處理後的成果能更自然地融入周圍的文字、控制項和其他視覺元素。Blur Image 工具能在單一瀏覽器分頁中完成這項任務：上傳 JPG、PNG 或 WebP，選擇模糊範圍要涵蓋整張圖片或單一精確矩形、設定半徑，然後下載一張以原始圖片自然像素尺寸輸出的 PNG。原始檔案永遠不會離開裝置，下載的圖片則是在另一個 canvas 上以原始圖片的自然寬度與高度產生，因此頁面上的小型預覽不會變成低解析度的匯出檔。
網頁使用模糊的方式與社群貼文截然不同。登陸頁面上的主視覺照片經常需要柔和的對焦，才能讓段落文字保持清晰易讀。儀表板區塊的背景圖應該平靜而不喧賓奪主。用於說明文件中的螢幕截圖，有時在上線前需要柔化地址、電子郵件或帳號等資訊。無論哪種情況，實際要回答的問題都一樣：哪個區域需要柔化、模糊強度要多強，以及如何取得可用的檔案，而不必在龐大的設計應用程式之間來回轉檔。
為什麼網頁圖片經常需要一層模糊
原始照片帶有會與文字和控制項爭搶注意力的細節。銳利的邊緣、雜亂的圖樣、高對比的人臉，以及可辨識的文字，全都會與頁面內容競爭。柔化圖片能把這些細節推往背景，讓標題、按鈕和表單欄位有喘息的空間。當設計師需要保留照片的氛圍卻不想保留細節時，就會借助模糊圖層。
三種常見的網頁觸發情境一再出現。第一種是置中標題後方的主視覺或橫幅照片，這時中等程度的模糊能在不讓圖片明顯失焦的情況下降低視覺雜訊。第二種是卡片、區塊或側邊欄背景，應該暗示內容而非直接顯示內容。第三種是包含敏感資訊的螢幕截圖或文件圖片，例如電子郵件地址、授權號碼或客戶姓名，必須在上線前先行柔化。
一個有用的思考模型是：模糊半徑控制工具取樣鄰近像素的範圍。較小的半徑會產生適合背景與疊加層的輕度柔化。較大的半徑則會產生強烈得多的效果，看起來開始像磨砂玻璃。挑選合適的半徑，基本上取決於周圍區域需要多少脈絡才能讀成一個連貫的場景。
如何使用 Blur Image 為網頁模糊化圖片
工作流程刻意設計得很短。每一步都在當下的瀏覽器中進行，原始圖片也絕不會上傳到伺服器。
- 選擇一張 JPG、PNG 或 WebP 圖片，並確認其顯示的像素尺寸。工具中顯示的寬度與高度就是原始檔案的自然像素尺寸，這也是矩形模式用於 X、Y、寬度與高度的同一個座標系統。
- 決定模糊要涵蓋整張圖片或單一矩形區域。若是主視覺背景，請選擇整張圖片模式。若是精確的局部，例如螢幕截圖中的一張臉或一塊文字，請選擇矩形模式，並以像素為單位輸入左上角的 X 與 Y 座標，加上寬度與高度。
- 設定模糊半徑。較小的數值會產生柔和的霧化效果；較大的數值則會產生強烈得多的平滑效果。請對照預計嵌入圖片的設計來預覽結果，並調整半徑，直到周圍的文字與控制項保持清晰易讀。
- 選擇 Blur image，檢查預覽與顯示的輸出尺寸，然後下載 PNG。下載檔案是在另一個 canvas 上以原始圖片的自然像素寬度與高度產生，因此儲存的檔案並非只是較小的頁面預覽之螢幕截圖。
- 以 100% 縮放開啟下載的 PNG，檢查選取範圍邊界、輸出大小，以及任何你原本打算隱藏的細節。如果矩形稍有偏差或半徑太強，請變更輸入並產生新檔案。每一次新產生都會取代前一次的瀏覽器下載物件。
整張圖片模式與矩形模式：用於網頁素材的比較
這兩種模式在網頁中負責截然不同的工作。整張圖片模式會將模糊結果套用到整張圖片，當目標是均勻柔和的背景、橫幅或卡片圖片時，這是較簡單的選擇。矩形模式則會先繪製原始圖片，再將經過濾鏡繪製的結果裁剪到一個被限制的區域，因此矩形外的像素保持不變。這讓矩形模式成為只須柔化圖片某個部分的正確工具，例如一張臉、一塊車牌或螢幕截圖中的一塊文字。
| 模式 | 最適合的網頁情境 | 哪些部分保持不變 |
|---|---|---|
| 整張圖片 | 主視覺照片、橫幅背景、卡片背景、裝飾性區塊 | 無；整張圖片都會被柔化 |
| 矩形 | 需要隱藏單一地址的螢幕截圖、柔化單張人臉、遮蔽產品細節 | 被限制矩形之外的所有像素 |
矩形模式使用原始圖片本身的像素座標系統。如果矩形超出邊界，工具會將其限制在可用的圖片範圍內，而不會擴大輸出或執行失敗。座標也可以在尺寸相同的圖片之間重複使用，讓同一個區域能在一批類似的螢幕截圖中重複套用。
模糊核心會對鄰近像素進行取樣，這代表靠近矩形邊界的顏色與形狀可能會融入選取區域。當轉場需要更多周圍脈絡來取樣時，請加大矩形範圍或半徑。請務必以完整尺寸檢視下載的檔案，而非僅依賴頁面上的預覽。
網頁用的輸出格式、尺寸與檔案大小
下載的檔案一律為 PNG。使用 PNG 是因為瀏覽器能在本地端直接產生，無需安裝特定格式的編碼器，也不必請伺服器轉檔。PNG 同時支援無失真像素，因此匯出的圖片能忠實記錄原始圖片自然尺寸下的模糊 canvas。
匯出的 PNG 是在另一個離屏 canvas 上以原始圖片的自然寬度與高度進行繪製。頁面上的預覽 canvas 可能會縮小以便檢視，但它並不是實際下載的內容。這樣的分離避免了「方便的 900 像素預覽在不知情的情況下變成低解析度匯出」的常見錯誤。結果文字中顯示的輸出尺寸，描述的是你實際會儲存的檔案。
如果網站在意檔案大小，有兩個數字值得參考。匯出的 PNG 保留了原始圖片的每一個像素，因此比相同圖片的 JPEG 更重，也明顯比 WebP 更重。如果網站提供許多模糊背景，建議在上線前將匯出的 PNG 轉換為壓縮格式，例如 WebP 或 PNG To JPG。模糊本身並不會改變像素數量，因此壓縮所節省的成本來自格式的轉換，而非來自效果本身。
本地瀏覽器處理，以及為何它對網站素材很重要
解碼、繪製、模糊化與 PNG 產生，全部都在當下的瀏覽器分頁中完成。沒有上傳步驟、沒有遠端處理佇列、沒有帳號儲存，也沒有伺服器端的原始檔案副本。對於網站素材來說，這項特性在以下三種情境中特別有用：不應離開工作站的草稿 mockup、含有內部資訊的螢幕截圖，以及首次被柔化、尚未發布的主視覺照片。
同樣的工作流程也能保護原始素材。如果未模糊化的圖片副本需要保留供其他用途，請將原始檔案放在工具外部，只上傳工作副本。每一次新的模糊產生都會取代前一次的瀏覽器下載物件，而關閉分頁則會釋出暫時性的物件 URL。這讓你能在座標或半徑需要變更時，隨時從原始檔案重新開始。
常見的網頁模糊模式與小幅調整
有幾種模式經常出現，值得記住。長版登陸頁面上的主視覺照片，通常適合中等程度的半徑，讓圖片仍讀起來像真實場景；把數值拉得過高會讓圖片顯得不自然。儀表板側邊欄背景通常適合較強的半徑，避免細節搶走控制項的注意力。需要隱藏電子郵件地址或授權號碼的說明文件截圖，則通常適合小範圍矩形搭配中等半徑；過硬的矩形搭配過強的半徑，會把周圍像素模糊得比目標像素還嚴重。
如果人像照片裁切在一張臉上，最好將矩形放在臉部周圍並使用較小的半徑，其餘圖片則保持不動。如果目標是一次柔化團體照中的每張臉，通常整張圖片模式搭配中等半徑會比較簡單，成果也會比逐一在每張臉上手動繪製矩形來得更均勻。
每次匯出後一個有用的健全性檢查，是在網站實際使用的同一個視窗中以 100% 縮放檢視 PNG，將其放在一段代表性的內文後方，確認文字仍然清晰可讀。如果不夠清楚，請調高半徑、在後續編輯中降低圖片對比，或在圖片上疊加一層半透明覆蓋。如果模糊區域看起來像圍繞銳利邊緣的柔和光暈，通常代表半徑太小，稍微調大會讓邊界感覺不那麼生硬。
最後，請記得它的限制。模糊是一種視覺效果，並非安全的遮蔽。被柔化的臉部、地址、帳號、車牌、文件欄位或私人訊息，仍有可能從內容脈絡中辨識、還原或推敲出來。對於必須安全顯示敏感內容的網站，請使用適當的遮蔽工作流程移除或覆蓋原始像素，並驗證匯出檔案、其詮釋資料與周圍的脈絡。模糊圖層適合用於設計；它無法作為「資訊已永久移除」的證明。