HTML 中的佔位圖片是一種替代圖形，會在最終素材準備好之前，先佔據版面配置、模型或原型中的圖片位置。最簡單的製作方式是：依照設計所需的寬度與高度產生一個 PNG 檔，將它存到專案中，並用一個 img 標籤來引用它，而該標籤的 width 與 height 屬性需與圖片尺寸相符。因為檔案位於本機，所以載入時不需要網路往返、在截圖測試中行為可預測，而且不會因為第三方佔位服務改變回應而跟著變動。「Placeholder Image Generator」會使用 HTML5 Canvas API 直接在你的瀏覽器中繪製該 PNG：輸入整數像素的尺寸、選擇背景與前景顏色、可選擇性地取代預設的尺寸標籤，然後將結果下載為 placeholder-WIDTHxHEIGHT.png。你在頁面上看到的預覽只是視覺上的符合；下載下來的檔案會保留你輸入的自然像素解析度。沒有任何資料會被上傳、不需要帳號、也不涉及任何外部服務。
圖片佔位在 HTML 中扮演的角色
圖片佔位是一種替代用的圖形，在真正的照片、插圖或圖示仍在設計、蒐集或最佳化的階段時，先佔用網頁上的視覺空間。在 HTML 中它有三個實際用途：讓瀏覽器取得正確的固有尺寸，避免在最終素材抵達時版面跳動（Web Vitals 計畫將這種現象稱為 Cumulative Layout Shift）、讓開發人員在尚未決定真實媒體之前就能為格線、卡片、英雄區塊和大頭貼設計樣式，並為 QA 測試人員提供一個穩定的固定元件，讓像素在每次執行之間都不會改變。
這個詞涵蓋了各式各樣的產出物。線框稿可能使用中性的灰色矩形。截圖測試可能會釘住一個固定的紅色方塊。部落格模板可能會顯示一個淡化的漸層，中間蓋上一個「1200 × 630」的標籤，讓審閱者能清楚看出他們要填入哪個位置。其決定性的特質是：這個檔案刻意做得廉價、可預期、且可被取代——它並非真正的內容。
就 HTML 來說，最常見的插入佔位方式是使用帶有真實 PNG src 的 img 標籤。這能讓頁面在語意上保持誠實（它仍然是圖片，而不是樣式化的 div）、讓佔位能被輔助工具偵測到，並讓你在決定真正文案之前持續保有供螢幕閱讀器使用的 alt 屬性。
逐步製作佔位 PNG
取得本機 PNG 最快的路徑是使用 Placeholder Image Generator。它完全在瀏覽器中執行，所以你輸入的任何內容都不會離開你的電腦。
- 開啟工具，以整數像素輸入精確的輸出寬度與高度。頁面接受每邊 1 到 10,000 之間的任何整數，且畫布總像素數必須維持在 40 megapixels 以下。
- 使用瀏覽器內建的顏色選擇器，選擇背景色與文字顏色——可使用六位數十六進位值，例如背景用 #e5e7eb、標籤用 #111827。
- 可選擇性地取代預設標籤。如果留空，產生器會在中央繪製你的尺寸，格式類似 1200 × 630。自訂文字會被去除前後空白，最多 80 個 Unicode 字元，若超出範圍則會以省略號縮短。
- 選擇 Create placeholder。結果列會顯示驗證後的尺寸、實際繪製的標籤，以及 PNG 的大致檔案大小。
- 下載檔案。檔名為 placeholder-WIDTHxHEIGHT.png，會存放在瀏覽器的一般下載資料夾中。
一個好習慣是預先產生一小組佔位調色盤——例如 1600 × 900 的英雄區塊、600 × 600 的方形卡片，以及 96 × 96 的大頭貼——並把它們放在專案內的 /placeholders/ 資料夾。這樣之後就能替換成真實素材，而不必動到 HTML。
將佔位接到你的 HTML 中
PNG 放到磁碟後，就能像引用其他圖片一樣使用它。最乾淨的模式是讓 img 標籤上的 width 與 height 屬性與你產生的尺寸一致，這樣瀏覽器就能在檔案抵達前先保留正確的空間：
<img src="/placeholders/placeholder-1200x630.png" width="1200" height="630" alt="Hero placeholder — replace with final image">
這一對屬性正是避免版面位移的關鍵。如果你需要圖片隨視口縮放，可以把它包進一個容器，讓 CSS 處理視覺上的尺寸，而 width 與 height 屬性仍然回報自然像素尺寸。PNG 本身會保留完整解析度，不受 CSS 在螢幕上設定大小的影響。
若要進行回應式的美術方向指引，你可以在 srcset 中以不同尺寸列出同一個佔位。由於檔案位於本機，瀏覽器會挑選最小、仍能滿足視口寬度需求的項目，且不會發出任何跨來源請求：
<img src="/placeholders/placeholder-1200x630.png" srcset="/placeholders/placeholder-600x315.png 600w, /placeholders/placeholder-1200x630.png 1200w" sizes="(max-width: 600px) 100vw, 1200px" width="1200" height="630" alt="Hero placeholder">
當你最後把佔位換成真正的照片時，請替換 src（以及 alt 文字），但保留 width 與 height。瀏覽器仍會使用這些數字預留空間，所以新檔案載入時頁面不會跳動。
本機佔位 vs 遠端佔位 URL
許多開發人員最初會選擇像 placehold.co 或 dummyimage.com 這類的遠端服務，因為它不需要管理素材。不過一旦專案過了草稿階段，這個取捨就很值得注意。
| 考量 | 本機 PNG 佔位 | 遠端佔位 URL |
|---|---|---|
| 離線可用性 | 不需網路即可載入；在飛航模式與內部測試環境皆可使用 | 當主機被封鎖、限流或離線時會失敗 |
| 決定性 | 像素每次執行都完全相同，讓截圖測試保持穩定 | 服務可能在未通知的情況下變更呈現方式、顏色或回應格式 |
| 隱私 | 沒有任何請求會帶著專案結構，從使用者瀏覽器送到遠端 | 每次瀏覽頁面都可能以路徑中的佔位尺寸對主機發出請求 |
| 自訂標籤 | 可放入最多 80 個 Unicode 字元的自訂文字，並以受限的字型大小置中 | 通常僅限於尺寸文字或簡短的查詢參數 |
| 依賴範圍 | 零外部執行階段依賴 | 與主機的 CORS 政策、可用率與條款綁定 |
Placeholder Image Generator 依設計就承諾了第一欄的做法：它在 HTML5 canvas 上使用 fillRect 繪製背景，再透過 canvas 的文字繪製 API寫入標籤，將結果編碼為 PNG，並透過本機 object URL 提供檔案下載。沒有任何 canvas 像素資料會被傳送到任何地方。
影響你能產生內容的限制
事先了解這套工具的規範能省下大量反覆嘗試。這個產生器刻意維持精簡，以下每一項限制都會在畫布配置前先進行檢查。
| 輸入 | 接受的範圍或格式 |
|---|---|
| 寬度 | 整數像素，1 到 10,000 |
| 高度 | 整數像素，1 到 10,000 |
| 畫布總額度 | width × height 必須低於 40 megapixels |
| 顏色 | 透過瀏覽器顏色選擇器輸入六位數十六進位值 |
| 自訂標籤 | 可省略，會去除空白，最多 80 個 Unicode 字元 |
| 標籤字型大小 | 依圖片較短的邊長縮放，限制在 12 px 到 96 px 之間 |
| 輸出格式 | 僅 PNG，檔名為 placeholder-WIDTHxHEIGHT.png |
| 透明度 | 無——背景會在整個畫布上以實心顏色塗滿 |
有兩個結果值得記住。第一，因為背景是平坦的實心顏色，佔位無法在非均勻的頁面背景上無縫合成——若在意，請挑選與周圍區塊相符的背景顏色。第二，因為工具不會自動調整對比，避免在接近白色的背景上使用淺色標籤是你的責任；請挑選亮度差異足夠的前景與背景顏色。
HTML 佔位的實用版面尺寸
這套工具並未規定任何平台「正確」的尺寸——它會精準產生你所要求的像素。話雖如此，在專案初期就挑選一組可重複使用的尺寸，能讓你的模板保持整齊。一組合適的入門組合可涵蓋最常見的 HTML 版位：
- 1600 × 900：用於 16:9 比例的全幅英雄區塊或特色橫幅。
- 1200 × 600：用於 2:1 的行銷橫條，搭配一旁的文字區塊。
- 800 × 450：用於三欄格線中的卡片圖片，每張卡片約 320 CSS 像素寬。
- 600 × 600：用於 3 × 3 格線中的產品縮圖。
- 96 × 96：用於大頭貼與內行清單圖示。
這些寬度與高度之間的數字關係並沒有什麼神奇之處——它們是長寬比（16:9、2:1、16:9、1:1、1:1），與多數 CSS 格線模板的寫法一致。產出符合這些比例的佔位，代表日後替換為真實照片時，不需要重新調整周圍的標記樣式。
命名與整理佔位檔案的訣竅
預設檔名 placeholder-WIDTHxHEIGHT.png 已內含尺寸資訊，這在檔案選擇器中挑選合適大小時很方便。若你想要更豐富的命名——例如 placeholder-hero-1600x900.png 或 placeholder-avatar-96x96.png——只要在下載後重新命名即可。瀏覽器不在意檔名；它會從 HTML 屬性或 PNG 標頭讀取寬度與高度。
有兩個小習慣很值得養成。第一，把佔位集中在專用資料夾（/placeholders/ 或 /public/mock/），這樣在上線前於儲存庫搜尋「placeholder」時，就能一次抓出所有遺留的暫存檔。第二，當佔位被真實素材取代時，請在同一個 commit 中更新 alt 屬性——有意義的 alt 是工作的一部分，而不是之後才補上的最後修飾。
至於正式攝影、品牌美術或向量檔，請改用正規的設計工作流程。佔位的存在，是為了讓版面在藝術作品尚未就緒前保持誠實；而當真正圖片上線時，頁面仍應帶有有意義的替代文字。
如果你正在權衡選項，Convert SVG to PNG in Bulk Without Uploading 對此有詳細說明。
如果你正在權衡選項，How to Get a Favicon in HTML: Link Tags That Work 對此有詳細說明。