一個佔位圖產生器，只要輸入你指定的尺寸就能產生真正的 PNG 檔案，這是在不依賴外部主機的情況下，為 mockup、線框圖和版面配置位置產生多張佔位圖最可靠的方式。佔位圖產生器接受以整數像素表示的寬度和高度，繪製單色背景，將你控制的一段標籤置中，然後匯出可以儲存並重複使用的真正 PNG 檔。由於每一步都在瀏覽器中執行，批次產生佔位圖就是一個簡單的重複流程：更改輸入、點擊 Create placeholder，然後下載結果。下載的 PNG 會保留你輸入的精確原始解析度，即使頁面上的預覽為了配合版面而被視覺上縮放，每個檔案都會以經過驗證的尺寸命名（placeholder-WIDTHxHEIGHT.png），讓一整組檔案在你的下載資料夾中保持井然有序。尺寸在每邊接受 1 到 10,000 像素之間的數值，而畫布總量會將總像素數上限設為 40 megapixels，這涵蓋了常見的社群、網頁和簡報 mockup 尺寸，同時防止不小心配置出巨大的圖片。決定性的輸出、本機處理，以及慷慨但有界限的畫布三者結合，讓這個工具在設計師或開發人員需要在同一個工作階段中產生多張佔位圖時，成為一個實用的選擇。
如何在一個工作階段中產生多張佔位圖
使用佔位圖產生器建立一批佔位圖，是一個刻意且可重複的流程，而不是單一鍵的批次操作。每次執行會產生一個檔案，從第一張到第二十張佔位圖，控制項都完全相同，這代表在批次的開始與結束之間沒有學習曲線。相同的寬度、高度、顏色和標籤欄位驅動每一次輸出，因此只要重複相同的輸入並調整需要變動的部分，就能讓整組佔位圖保持一致的風格。
- 為第一個位置輸入以整數像素表示的輸出寬度和高度。兩個欄位都接受 1 到 10,000 之間的整數，而畫布總量為 40 megapixels，因此像 1200 × 630、1080 × 1080 和 1920 × 1080 這類組合都遠在上限之內。
- 使用瀏覽器原生的六位數十六進制控制項選擇背景顏色和文字顏色，接著如果想覆寫預設的尺寸文字，再輸入一個簡短標籤。
- 點擊 Create placeholder 並讀取結果說明，它會顯示精確的尺寸、實際渲染的標籤，以及下載連結所指 PNG 檔的大約檔案大小。
- 將命名為 placeholder-WIDTHxHEIGHT.png 的 PNG 儲存到你的下載資料夾，然後為這組中的下一張佔位圖更改寬度、高度、顏色或標籤。
- 為每個新的尺寸、顏色或標籤組合重複步驟 1 到 4。每次點擊都會產生一個全新的可下載 PNG，不會覆寫先前的檔案。
對批次友善的設定：尺寸、顏色與標籤
當你建立一組檔案時，徹底了解每個輸入的行為，能讓每張佔位圖都保持一致。寬度和高度會被解析為有範圍限制的整數；六位數的顏色值會照原樣標準化；標籤會經過修剪，且上限為 80 個 Unicode 字元；背景會先在整個畫布上繪製，然後以所選的前景顏色繪上標籤。這個工具不會默默地變更對比、新增漸層、加入透明度或修改所提供的顏色，因此對於像 #e5e7eb 這類設計 token 來說，輸出是決定性的。這也代表如果標籤顏色與背景顏色過於接近，在最終的 PNG 中會顯得模糊，因此每次批次都應該選擇一組可讀的前景與背景組合。
標籤本身也有自己的限制。自訂標籤會在畫布上水平和垂直置中，並使用瀏覽器的系統 sans-serif 字型繪製。字型大小會依據較短的圖片尺寸縮放，最小為 12 像素，最大為 96 像素，因此非常小的畫布仍然能獲得可讀的文字，而非常大的畫布也不會讓文字佔據整個佔位圖。如果自訂標籤在縮放後的字型大小下仍然太寬，渲染出的文字會在畫布上以刪節號縮短，而不是允許它超出邊緣。如果標籤欄位留空，就會以經過驗證的尺寸作為標籤，因此一張以 1200 × 630 產生的圖片會在自己的背景上顯示「1200 × 630」並置中。
實際範例：1200 × 630 社群預覽圖
假設你批次中的第一個位置是 1200 × 630 的社群預覽圖，也就是標準的 Open Graph 卡片尺寸。運算只是單純的乘法：1200 像素 × 630 像素 = 756,000 像素，也就是 0.756 megapixels。畫布總量為 40 megapixels，因此這單一張圖片大約使用了 1.89 percent 的可用總量，因為 0.756 ÷ 40 = 0.0189。這個上限主要用來防止像 10,000 × 10,000 這種不小心的輸入，它等於 100,000,000 像素或 100 megapixels，並且會在配置任何畫布之前就被拒絕。
本機處理以及它對批次的重要性
使用佔位圖產生器建立的每一批都會留在產生它的裝置上。畫布繪製、PNG 編碼、頁面上的預覽和下載連結全部都在瀏覽器中於本機執行，因此草稿 logo、尚未公開的產品名稱、內部代號，或標有客戶用詞的線框圖，絕對不會被傳送到遠端伺服器。當輸入變更時，可下載的物件 URL 會被替換並撤銷，這能防止過時的預覽被誤認為目前的設定，並避免殘留的 URL 滯留在記憶體中。選擇 PNG 作為輸出格式，是因為它支援廣泛、能乾淨地渲染單色和文字，並且讓檔案擁有一個獨立於瀏覽器 JPEG 品質行為的穩定格式。最終的結果是一組無論由哪個瀏覽器或作業系統產生，看起來都完全相同的檔案。
本機處理對離線工作流程也很有用。在沒有穩定網路連線的會議室中展示的原型，仍然能取得全新的佔位 PNG，而自動化測試套件中的螢幕擷取測試 fixture，也可以從已知的尺寸和單色背景重新產生，而不需依賴可能更改回應、離線或改變其回傳尺寸的第三方佔位圖主機。本機產生的 PNG 不會與專案的其餘部分失去同步，因為你上週儲存的檔案與你這週儲存的檔案是同一個檔案。
mockup 和預覽的常見佔位圖尺寸
下列尺寸是線框圖、行銷預覽和廣告版位 mock 的常用起點。它們列出供參考；這個工具不會挑選平台專屬的預設值，而會始終產生你所要求的精確像素。這些尺寸是設計社群中眾所周知的慣例，而不是計算出來的輸出。
| 像素尺寸 | 常見用途 | 約 megapixels |
|---|---|---|
| 1200 × 630 | Open Graph / 連結預覽卡片 | 0.76 MP |
| 1200 × 628 | Facebook 分享圖片 | 0.75 MP |
| 1080 × 1080 | 正方形社群貼文 | 1.17 MP |
| 1080 × 1920 | 直向限時動態 / 短影音封面 | 2.07 MP |
| 1500 × 500 | Twitter / X 頁首橫幅 | 0.75 MP |
| 1920 × 1080 | Full HD 主視覺圖片 | 2.07 MP |
| 2560 × 1440 | QHD 桌面螢幕擷圖 | 3.69 MP |
| 728 × 90 | 網頁橫幅廣告版位 | 0.07 MP |
| 300 × 250 | 中等矩形廣告版位 | 0.08 MP |
這些尺寸每一個單獨來看都遠低於 40 megapixels 的畫布總量。如果你的專案需要未列出的尺寸，同樣的五個步驟流程仍然適用：輸入寬度和高度、挑選顏色、視需要輸入標籤、點擊 Create placeholder，然後下載產生的 PNG。
多圖批次的實際限制與技巧
有幾個習慣能讓長批次保持可預測。命名的一致性是免費的，因為每次下載都命名為 placeholder-WIDTHxHEIGHT.png，所以一整個資料夾的產生檔案會自然依照尺寸排列，任何與名稱不符的檔案都會一目了然。當批次代表不同的內容類別時，顏色編碼非常有幫助，因為快速瀏覽線框圖展示就能告訴你哪個位置屬於哪個段落。一條對標籤有幫助的經驗法則是：在小畫布上將標籤保持在約 20 個字元以內，這樣字型大小縮放就不必用刪節號縮短文字；而在說明文件頁面上則使用空白標籤，讓每張佔位圖以純粹的數字顯示自己的尺寸。
需要記住的上限是每邊 1 到 10,000 像素的範圍，以及適用於每一張個別圖片的 40 megapixels 畫布總量。在這兩個範圍之外的輸入會在配置任何畫布之前就被拒絕，不會產生部分檔案。任何需要照片內容、品牌美術、向量來源或考量無障礙的文字編排，都應該移至適當的設計工作流程，而發佈的頁面在最終圖片上線時，仍然應該接收有意義的替代文字。佔位圖產生器的設計目的，就是產生你所要求的精確像素，不多也不少，而在這些限制下建立的批次，能在跨工作階段時保持乾淨、可預測且可重現。