使用 佔位圖產生器 來產生佔位圖片——這是一個完全在您的裝置上運作的瀏覽器工具，可建立具備自訂顏色與標籤的精確尺寸 PNG 檔案。檔案會在本機繪製、編碼並下載，因此不會上傳任何內容，也沒有任何第三方主機參與其產生過程。這使得該工具成為遠端佔位服務的實用替代方案，因為那些服務會回傳 URL，而這些 URL 可能會變更行為、回傳 404、記錄每次頁面曝光，並中斷您希望持續離線運作的原型。本機產生的 PNG 可讓 mockup、版面測試與螢幕擷圖固定資料在沒有網路的情況下仍可重現，且輸出位元組不依賴任何外部服務是否維持上線。每個佔位圖都是真實的 PNG，能在任何編輯器中開啟、在原型與簡報中乾淨地縮放，且因為編碼器不依賴平台的 JPEG 品質行為，所以在不同瀏覽器間保持位元組穩定。螢幕上的結果列會顯示精確的尺寸、實際呈現的標籤以及大致的檔案大小，讓您在下載前可對輸出進行健全性檢查。
為什麼人們在尋找佔位圖產生器的替代方案
「placeholder image generator alternative」這個詞組通常代表對最受歡迎的遠端服務有三個具體的挫折。首先，每次對遠端佔位 URL 的載入都是對第三方伺服器的一個請求，這意味著設計師或開發人員可能在不知情的情況下，將頁面瀏覽數、草稿版面或測試環境內容洩漏給一個他們無法控制的主機。其次，遠端佔位 URL 可能會在沒有通知的情況下變更其行為：昨天回傳 300×250 灰色矩形的服務，明天可能會回傳帶有浮水印的 JPEG，甚至完全關閉，這會在不知不覺中破壞任何硬編碼這些 URL 的版面。第三，遠端服務傾向將尺寸與顏色鎖定在預設的 URL 參數後方，這使得難以對應真實的設計 token（例如 #e5e7eb），或在整個固定資料套件中重現相同的扁平背景。
一個完全在瀏覽器中運作的替代方案能一次同時迴避這三個問題。產生器會解析使用者輸入的尺寸、繪製背景、將文字置中、編碼 PNG，並撤銷先前的物件 URL——使用的是 MDN 文件中記載的 canvas fillRect 與 drawing text 基本功能。專案名稱、草稿內容或產生的圖片都不會離開分機，且每次輸入變更時都會產生全新的物件 URL，因此過期的預覽不會被誤認為目前設定。
本機佔位圖產生器實際做了什麼
本機佔位圖產生器會產生一個真實、可下載的 PNG 檔案，而非回傳一個您必須持續擷取的 URL。佔位圖產生器特別會以選定的顏色在整個 canvas 上繪製背景，接著以前景顏色繪製標籤——可以是經驗證的尺寸（例如 1200 × 630）或自訂字串——水平與垂直置中。PNG 會保留您輸入的確切寬度與高度；頁面上的預覽可能會以視覺方式縮放以符合版面，但該縮放永遠不會改變下載檔案的自然解析度。
輸出檔案會命名為 placeholder-WIDTHxHEIGHT.png，這讓您在專案中擁有多個檔案時，能一眼看出哪個固定資料是哪個。由於使用的是 PNG 而非 JPEG，扁平的顏色區域保持銳利、文字保持清晰，且相同輸入永遠會產生確定性的結果——沒有平台相依的 JPEG 品質行為需要反覆猜測，且檔案格式在不同瀏覽器間是穩定的。
如何在瀏覽器中建立佔位圖
- 以整數像素輸入確切的輸出寬度與高度。每邊接受介於 1 至 10,000 之間的整數，總 canvas 預算上限為 40 megapixel。
- 以六位數十六進位值選擇背景與文字顏色，接著可選擇性地將預設尺寸標籤替換為長度上限 80 個 Unicode 字元的簡短自訂字串。
- 選擇Create placeholder，確認回報的大小與呈現的標籤，接著下載產生的 placeholder-WIDTHxHEIGHT.png 檔案。
PNG 存到磁碟後，將其放入您的 mockup、簡報，或 HTML 版面測試 中，使用方式與任何其他本機資產相同。由於檔案位於您的檔案系統上，即使您在離線或防火牆後預覽，版面仍會持續呈現。
輸入限制、顏色與標籤一覽
產生器強制執行一組少量的嚴格限制，以避免一次意外按鍵配置出不安全的 canvas。下方的數字是該工具在每個步驟實際套用的確切規則。
| 設定 | 接受的值 | 超出範圍輸入時的行為 |
|---|---|---|
| 寬度 | 整數像素，1–10,000 | 不接受超出範圍的值 |
| 高度 | 整數像素，1–10,000 | 不接受超出範圍的值 |
| 總 canvas | 寬度 × 高度 ≤ 40 megapixel | 不接受超出預算的輸入 |
| 顏色 | 六位數十六進位值（例如 #e5e7eb） | 使用瀏覽器原生顏色控制項挑選 |
| 自訂標籤 | 修剪後最多 80 個 Unicode 字元 | 空白標籤會回退為經驗證的尺寸（例如 1200 × 630） |
| 標籤字型大小 | 依據較短的圖片尺寸縮放，限制在 12 至 96 像素之間 | 若標籤仍然過寬，會在呈現的圖片上以省略號縮短 |
| 透明度、漸層、對比調整 | 無——工具絕不會加入上述任何項目 | 輸出會精確使用您提供的顏色 |
這些限制是有意設定得保守：每邊 10,000 像素足以涵蓋常見的社群預覽、網站主視覺、簡報以及高解析度 mockup 尺寸，而 40 megapixel 上限則可防止一次意外的 10,000 × 10,000 輸入配置出會讓分機凍結的 canvas。
什麼時候本機 PNG 是正確的選擇
只要佔位圖屬於交付成果的一部分，而非暫時性的草稿，本機產生的佔位圖就是正確的選擇。
- 版面與螢幕擷圖測試。已知的尺寸與扁平的背景可為視覺回歸測試提供穩定的固定資料，而裝飾性的圖庫照片會增加雜訊。
- 離線 mockup。PNG 一旦儲存，簡報、原型與可列印的 PDF 在飛機上與在辦公桌前的呈現效果會完全相同。
- 設計 token 預覽。由於該工具不會調整對比或加入漸層，背景顏色會與您輸入的十六進位值相符，並對應到樣式指南中的設計 token。
- 隱私敏感的環境。測試環境頁面、內部儀表板與未發布的產品不必將草稿內容洩漏給遠端圖片主機。
該工具刻意不會擷取遠端圖片、加入圖庫照片、產生 AI 藝術作品、建立回應式的 srcset 變體，或為您挑選「建議的」社群媒體尺寸。它只會產生您所要求的精確像素；任何更豐富的內容——製作級照片、品牌藝術作品、向量檔案，或考量無障礙的文字編排——屬於負責交付最終資產的設計工作流程，並在圖片發布時提供具備意義的頁面層級替代文字。
挑選顏色、標籤與尺寸的訣竅
挑選佔位圖調色盤時，最大的實際錯誤是選擇對比過低的前景與背景組合。佔位圖產生器不會默默地調整對比，因此若您的標籤消失在背景中，那就是您實際做出的設計選擇——而修正方法就是在顏色控制項中輸入對比更佳的組合。常見的搭配是接近白色的背景（例如 #f3f4f6）配上較深的灰色標籤（例如 #374151）；兩者皆保持扁平、編碼乾淨，且符合典型的中性設計 token。
若您將標籤留空，產生器僅會根據經驗證的尺寸計算預設值——例如 800 × 450。當該固定資料代表的是尺寸以外的意義時（例如「Hero」、「OG Card」或「Logo slot」），請改為輸入簡短、具描述性的標籤。請將其控制在修剪後 80 個 Unicode 字元以內；較長的字串會在呈現的圖片上以省略號縮短，而非允許溢出 canvas 之外。
關於尺寸，請輸入您打算 mockup 的精確像素大小——而非您打算顯示的大小。在寬 600 像素的卡片中呈現的 1200 × 630 檔案仍然是 1200 × 630 的 PNG，這表示同一個檔案可作為主視覺、Open Graph 卡片與簡報投影片使用，無需重新編碼。若您發現自己經常重複輸入相同的數字，請將 PNG 儲存一次並重複使用該檔案，而非每次重新產生。