在將圖片上傳到 WordPress 之前,先在本地為圖片加上浮水印,代表在自己的電腦上把文字標籤燒錄到檔案中,使用的是一套在瀏覽器中運作、絕不會把圖片傳送到遠端伺服器的工具,接著再透過一般媒體庫流程把加上浮水印的 PNG 上傳。你在工具中預覽到的結果,就是 WordPress 最終會提供的檔案,因此位置、大小、不透明度與色彩的表現都可以預期,避免圖片最後出現在文章或頁面時出現意外。這種以本地優先的做法,也能讓你尚未發布的照片、客戶作品與打樣草稿圖,不會進入第三方伺服器;當你處理的內容包含授權攝影、未公開產品,或不想分享給浮水印 SaaS 的私人活動相簿時,這點格外重要。為圖片加上浮水印 處理的是最常見的情境:單一可見標籤、五種位置之一、以粗體無襯線字型繪製,字級可由你在 12 到 200 像素之間選擇,不透明度從 10 到 100 percent,並使用六位數 HEX 色碼。輸出檔會保留來源影像的像素尺寸、以 PNG 格式匯出,且絕不會更動原始檔案。

為什麼要在 WordPress 看到檔案之前,先在本地準備好浮水印
WordPress 本身並不具備浮水印功能。網站經營者通常仰賴上傳時執行的外掛,或事先編輯好圖片,再把完成檔放進媒體庫。外掛路線雖然方便,卻把可見的決策從你手中移走:標籤是在 WordPress 已將影像重新調整為佈景專屬縮圖之後才出現,位置往往也是全站設定而非針對單張圖片的選擇,若要回復浮水印就得重新產生每一張衍生圖。在本地準備檔案則反轉了這套工作流程。你可以在預覽中看到實際渲染出來的標籤、確認位置與色彩,最後送進 WordPress 的影像,就是你核准過的那一張。
這也涉及隱私層面。預載影像最佳化外掛、頁面編輯器與資源 CDN 的 WordPress 主機商,有時會透過第三方服務重新編碼上傳的影像。在本地加上浮水印的步驟完全在瀏覽器的 canvas 中執行,因此在發布之前,無論照片或標籤都不會送到遠端浮水印伺服器。對於分享打樣相簿的攝影師、審閱未公開產品圖的代理商,以及傳閱草稿版面的編輯而言,這條界線至關重要。
浮水印控制項涵蓋哪些範圍
這套工具公開了一小組明確的選項。每個選項在你按下建立按鈕時都會再次驗證,而不是只依賴瀏覽器的表單元件,因此過長的標籤或會超出畫布的字級,會在實際匯出前被拒絕或自動縮小。
| 控制項 | 範圍或值 | 行為 |
|---|---|---|
| 來源格式 | JPG、PNG 或 WebP | 在本地解碼;上限 25 MiB 與 40 megapixels,邊長低於 20,000 像素 |
| 浮水印文字 | 最多 120 個字元 | 會自動去除空白、拒絕空白輸入、阻擋過長輸入 |
| 位置 | 置中、左上、右上、左下、右下 | 置中以中點對齊;邊角以依尺寸調整的邊距內縮,避免標籤緊貼邊緣 |
| 字級 | 整數,12-200 px | 以畫布為基準測量;若文字超出可用寬度或高度,會自動縮小 |
| 不透明度 | 10-100 percent | 數值越低,照片越能從字母後方透出;100 為完全不透明文字 |
| 色彩 | 六位數 HEX | 繪製時無外框、無陰影、無平鋪圖樣、無標誌影像、無旋轉 |
| 輸出 | PNG | 與來源相同的像素尺寸;檔名以「-watermarked」結尾 |
文字以粗體系統無襯線字型、以中線為基準繪製,在不同作業系統之間都能維持一致的視覺權重。繪製使用的是標準的 canvas fillText API,因此預覽中看到的與匯出時執行的繪製流程完全相同。沒有外框、投影、平鋪圖樣、影像式標誌、旋轉或自動對比分析,因為在較簡單的工具中,這些功能常產生令人意外的結果,所以刻意省略,以維持工作流程的透明。
為即將上傳到 WordPress 的圖片加上浮水印
- 在瀏覽器中開啟「為圖片加上浮水印」,選擇你預計發布的 JPG、PNG 或 WebP 檔案。整個過程中,檔案都停留在你的裝置上。
- 把標籤輸入到浮水印文字欄位,字數控制在 120 個字元以內。簡短的署名,例如「© Studio Name 2026」,或清楚的狀態標記,例如「PROOF – Do Not Share」,都能輕鬆容納。
- 從五個選項中選擇一個位置。對部落格與作品集圖片來說,邊角通常是最安全的選擇,因為標籤會落在內縮邊距內;當浮水印需要一眼可見時,置中更合適,例如打樣相簿與編輯草稿。
- 將字級設為 12 到 200 像素之間的整數。選擇你想要的尺寸;若標籤會超出畫布,瀏覽器會先測量並在繪製前自動縮小字級,讓完整文字仍可顯示。
- 選擇介於 10 到 100 percent 的不透明度。裝飾性的品牌標籤通常在 50-80 percent 左右看起來最合適;署名與打樣戳記則通常需要 80-100 percent,才能在繁雜的照片中保持可讀。
- 挑選與底圖形成對比的六位數 HEX 色彩。若浮水印融入天空或顏色相近的區域,請改用具對比效果的色彩,或調整位置後重新渲染。
- 點擊建立按鈕以產生結果。在預覽中檢視渲染出的文字;若有任何不妥,請調整控制項後再次建立,而不必重新選取檔案。
- 下載 PNG。新檔名以「-watermarked」結尾,磁碟上的原始檔案不會被更動。
- 把加上浮水印的 PNG 上傳到 WordPress 媒體庫,就像一般影像一樣,再照慣例插入文章、頁面或產品中。
WordPress 使用情境與合適的標籤
不同的 WordPress 情境需要不同風格的浮水印。下表將常見情境與在已發布頁面上通常閱讀效果不錯的標籤做法配對。確切的字級與色彩仍由你決定,但位置與不透明度範圍提供了一個起點,你可以再透過預覽微調。
| WordPress 情境 | 標籤範例 | 位置 | 不透明度範圍 |
|---|---|---|---|
| 攝影作品集 | 「© Studio Name 2026」 | 右下 | 70-100% |
| 部落格特色圖 | 網站名稱或文章代稱 | 右下 | 50-80% |
| 客戶打樣相簿 | 「PROOF – Do Not Share」 | 置中 | 80-100% |
| WooCommerce 商品圖 | SKU 或品牌識別碼 | 左上 | 30-60% |
| 編輯草稿圖 | 「DRAFT – Internal」 | 置中 | 80-100% |
| 活動相簿 | 活動名稱與日期 | 左下 | 70-90% |
攝影作品集與活動相簿適合使用邊角位置搭配高不透明度,因為標籤同時扮演永久署名的角色。WooCommerce 商品頁通常偏好較輕的處理,避免畫面過於雜亂,這也是左上位置搭配較低不透明度在這類情境中效果較好的原因。編輯草稿與客戶打樣則相反:浮水印必須一目了然,因此置中搭配完全或接近完全的不透明度才是正確的選擇。
輸出格式、檔案大小與後續步驟
加上浮水印的檔案永遠是 PNG,且與來源影像的像素尺寸一致。由於 PNG 為無失真格式,輸出可能比 JPEG 來源更大,因為 PNG 會以完整精度儲存浮水印像素,且沒有品質滑桿。匯出本身使用的是標準的 canvas toBlob API,因此你下載的檔案是由預覽中看到的同一套繪製流程所產生。若你需要更小的檔案以便在網路上傳遞,可以使用獨立的轉檔工具開啟加上浮水印的 PNG,再以你能親眼確認的品質重新匯出為 JPEG 或 WebP,而不是交由最佳化外掛替你決定。
磁碟上的原始檔案永遠不會被修改,新檔的檔名以「-watermarked」結尾,方便你在資料夾中區分。若你準備的影像會交付給客戶,或出現在法律敏感的場景中,上傳前可以考慮再移除 PNG 的 EXIF 中繼資料;浮水印工具並不會更動 EXIF,若這屬於你的工作流程之一,可使用另一套本地工具,從解碼後的像素重建檔案。
可見浮水印無法做到的事
可見的文字圖層能勸阻隨意的再使用,但它並非加密式保護、數位版權管理或作者身分證明。決意要處理的人可以裁切掉標籤、用影像編輯軟體塗掉,或在截圖中貼上貼紙覆蓋。若涉及法律上的所有權、授權、證據保存或專業圖庫交付,請使用該工作流程所要求的文件與控制機制,而非僅僅依賴可見標籤。這套工具的定位更為聚焦:它以明確的設定與可在檔案送達 WordPress 之前檢視的預覽,把可讀文字燒錄到本地影像中,這正好符合大多數部落格、作品集與打樣相簿的實際需求。
想進一步了解,請參閱 如何在不上傳的情況下,為電子郵件最佳化 GIF。
想進一步了解,請參閱 在不上傳的情況下,為圖片加上文字浮水印。