佔位圖片產生器
新以你自訂的顏色與標籤製作自訂尺寸的佔位圖片。
600 × 400 px · SVG stays sharp at any size; PNG & WebP keep transparency, JPG does not.
Runs entirely in your browser. Nothing is uploaded.
數秒內產生佔位圖片
這款佔位圖片產生器可在瀏覽器中直接建立自訂假圖，適用於線框圖、原型設計、mockup 與前端開發。設定寬度與高度、選擇背景色與文字顏色、加入自訂標籤，即可下載乾淨的佔位圖或直接貼入程式碼中使用。
不同於 placehold.co、dummyimage.com、via.placeholder.com 等需要伺服器渲染的服務，這裡的每張圖片都透過 SVG 與 HTML Canvas API 在本機即時生成。因此速度快、保護隱私、完全免費，且離線也能正常運作——無需任何請求、無速率限制，也不會將任何資料上傳至伺服器。
逐步教學：如何建立自訂佔位圖片
建立佔位圖只需不到 10 秒：1) 輸入寬度與高度（像素），或選擇尺寸預設（OG 圖片 1200×630、Instagram 貼文 1080×1080、影片縮圖 1280×720、頭像 256×256）。2) 使用色彩選擇器選取背景顏色，或選擇「灰色」調色盤預設，呈現經典佔位圖外觀。3) 選擇性輸入自訂文字——若留空，圖片會自動顯示其尺寸。4) 選擇匯出格式：SVG 適合網頁使用（最小且最清晰）、PNG 支援透明背景、JPG 或 WebP 適合需要照片格式的場合。5) 點擊下載儲存檔案，或切換至「程式碼」頁籤複製 data URI、<img> 標籤或 CSS 背景規則，直接貼入專案中使用。
SVG、PNG、JPG 還是 WebP——選擇正確格式
對於帶有標籤的純色矩形，SVG 通常是最佳選擇：檔案僅數百 bytes、在任何解析度下都保持清晰，且可以乾淨地嵌入為 data URI。這是本工具的預設格式，比大多數佔位圖工具只提供 PNG 更進一步。SVG data URI 也可在所有現代瀏覽器及電子郵件客戶端中正常顯示。
需要點陣圖檔案嗎？匯出PNG（完整透明度支援）、JPG（相容性最廣）或WebP（最小的點陣圖檔案）。無論選擇哪種格式，即時預覽都會在儲存前精確呈現最終效果，讓你不會有任何意外。
為何優於 placehold.co 及其他託管服務
placehold.co、dummyimage.com 和 via.placeholder.com 等服務提供的是連結到其伺服器的 URL。這會產生依賴性：若服務中斷、達到速率限制，或被內容安全政策（CSP）封鎖，你的 mockup 就會壞掉。這些服務也會追蹤哪些頁面請求了他們的圖片，對內部原型設計帶來隱私疑慮。
本工具提供更具可攜性的方案：自包含的data URI可直接嵌入 <img src> 或 CSS url()、原始 SVG 標記、附有對應尺寸的 <img> 程式碼片段，以及 CSS 背景規則。由於圖片已嵌入，無需額外上傳檔案、不會因服務中斷而失效，也沒有第三方使用追蹤。複製、貼上，完成。
社群媒體、廣告、頭像與縮圖的預設尺寸
正在設計需要大量圖片位置的版面嗎？預設尺寸涵蓋最常用到的格式——社群媒體與 OG 圖片（1200×630）、廣告版位（728×90、300×250）、正方形貼文（1080×1080）、限時動態（1080×1920）、橫幅、商品圖、書籍封面和影片縮圖（1280×720）。讓佔位圖與真實位置的尺寸相符，可讓版面保持穩定，避免累積佈局位移（CLS）影響 Core Web Vitals 分數。
長寬比預設值（1:1、4:3、16:9、9:16 等）搭配選擇性的比例鎖定，讓你在縮放時保持正確比例。開啟鎖定後，修改一個維度，另一個會自動調整——非常適合設計響應式圖片格線，確保每張卡片在不同容器寬度下都維持相同比例。
私密、即時、免費——支援所有裝置
無需帳號、無浮水印，且不限制建立圖片的數量。每張佔位圖都在你自己的裝置上生成，是設計師和開發者處理機密設計或內部 mockup 時的快速且保護隱私的工具。支援 Windows、Mac、Linux、iPhone、iPad 和 Android——在任何現代瀏覽器中開啟即可立即使用。
頁面載入後即可離線使用。將其加入書籤，隨時在 mockup 需要時生成完美尺寸的佔位圖——不必搜尋佔位圖服務網址、不必擔心速率限制，也不需要登入任何帳號。你的設計完全屬於你。
Frequently asked questions
什麼是佔位圖片？
佔位圖片是一種在最終照片或圖稿尚未就緒時使用的暫時替代圖形。它通常是一個純色矩形，尺寸與所填充的位置完全相符，並標有其尺寸——例如一個灰色的 600×400 方框上顯示「600 × 400」。設計師和開發者將其放入 mockup、線框圖和原型設計中，使版面在真實圖片到位前看起來完整。也被稱為假圖、圖片佔位符或模擬圖片。
如何在 HTML 中加入佔位圖片？
將 <img> 標籤指向圖片。最自包含的方式是使用 data URI，這樣就不需要另外托管檔案：<img src="data:image/svg+xml,…" width="600" height="400" alt="Placeholder">。點擊這裡的「<img>」頁籤並複製，完整的標籤——包含 data URI 及已填入的對應寬度與高度——就會進入剪貼簿，可直接貼上使用。你也可以下載檔案後正常引用，例如 <img src="/img/placeholder-600x400.png">。
這是 placehold.co 的替代方案嗎？
是的——而且更注重隱私保護。Placehold.co、via.placeholder.com 和 dummyimage.com 都從其伺服器提供圖片，這會產生網路請求、可能觸及速率限制，並讓這些服務追蹤哪些頁面連結了他們的圖片。UtiloKit 完全在你的瀏覽器中生成佔位圖片，因此請求永遠不會離開你的裝置。你可以獲得可下載的檔案或自包含的 data URI，離線也能使用，且不會因外部服務中斷而失效。
佔位圖片有哪些用途？
佔位圖片用於網站和應用程式的 mockup、線框圖、電子郵件範本、設計交付，以及真實素材仍在製作中的前端開發。它們能精確保留版面空間（防止版面位移／CLS），協助測試響應式斷點，並在 CMS 範本和元件庫中填充示範內容。開發期間，一個 1280×720 的方框可以代替格線中的所有影片縮圖，讓整個團隊能在不等待正式素材的情況下審查版面。
佔位圖片應該使用什麼尺寸？
應與所填充位置的確切像素尺寸相符，這樣當真實圖片載入時版面就不會位移。常用尺寸：社群媒體／OG 分享圖片 1200×630、Instagram 正方形貼文 1080×1080、影片縮圖 1280×720、頭像 256×256、全寬主視覺橫幅 1920×1080、橫幅廣告 728×90。使用這裡的尺寸與長寬比預設值，一鍵設定這些尺寸，或輸入任意自訂寬度與高度（最大 4000 px）。
如何建立帶有自訂文字的佔位圖片？
在文字欄位中輸入標籤——例如「Hero」、「頭像」或「廣告位 300×250」。留空時，圖片會自動以其尺寸作為標籤（例如「600 × 400」）。你也可以設定文字顏色和字體大小，讓 mockup 中的每個位置清楚說明其用途。這在設計審查時特別有用——當客戶需要在看到正式素材之前了解每個圖片區域的用途時非常方便。
佔位圖片應該使用哪種格式——SVG、PNG、JPG 還是 WebP？
對於帶有文字的純色方框，SVG 通常是最佳選擇：僅數百 bytes、在任何尺寸下都保持極致清晰，且可乾淨地嵌入為 data URI——非常適合網頁使用。若工具需要點陣圖檔案或需要透明背景則使用 PNG，若需要照片格式則使用 JPG，若需要最小的點陣圖檔案則使用 WebP。本工具支援匯出這四種格式，預設為 SVG，因為它在網頁開發工作流程中最為實用。
這與 Lorem Picsum 有什麼不同？
Lorem Picsum（picsum.photos）提供隨機的真實照片，適合需要逼真圖像效果的場合，但每次載入的圖片都不同，且都從第三方伺服器拉取。本工具生成的是具有你指定確切尺寸、顏色和標籤的確定性純色方框——可預測、體積小，且在瀏覽器中離線生成，不會上傳任何內容，且每次載入結果都相同。需要逼真照片 mockup 時使用 Picsum；需要整潔、可控的版面佔位圖時使用本工具。
如何取得佔位圖片的 URL？
placehold.co 等託管服務提供類似 placehold.co/600x400 的 URL，因為伺服器會在每次請求時渲染圖片。本工具完全在瀏覽器中執行，沒有伺服器，因此不提供熱鏈 URL，而是給你一個自包含的 data URI，可貼入任何接受 URL 的地方（<img> 的 src 屬性、CSS url()），以及可下載的 SVG、PNG、JPG 或 WebP 檔案。無網路請求、無速率限制，且離線也能正常使用。
如何製作灰色佔位方框？
將背景設為淺灰色（如 #e2e8f0），文字設為中灰色（如 #475569）——這就是熟悉的中性佔位圖外觀。選擇「灰色」調色盤預設，一次套用兩種顏色，選好尺寸後下載即可。灰色傳達「刻意留空」的感覺，因此在審查過程中，佔位圖不會在視覺上與周圍設計產生競爭。這是 Figma、Sketch 和大多數設計系統中用於佔位位置的標準慣例。
可以在手機上使用嗎——iPhone 或 Android？
可以，完全支援。本工具可在任何現代瀏覽器中執行，包括 iPhone 上的 Safari 和 Android 上的 Chrome。設定尺寸、選擇顏色、加入文字，然後直接在手機上下載或複製 data URI。在裝置上審查響應式版面時，需要快速為截圖或設計交付填充圖片位置，特別方便。不需要安裝任何應用程式——只需在手機瀏覽器中開啟頁面即可。
如何為特定長寬比製作佔位圖？
選擇長寬比預設值（1:1、4:3、3:2、16:9、2:1 或 9:16），高度會根據你的寬度自動更新——輸入寬度 1280、選擇 16:9，就會得到 1280×720。開啟「鎖定長寬比」，在縮放任一維度時保持比例。這對於必須在所有斷點下保持固定比例的響應式圖片位置非常有用，或者在設計卡片格線時確保每張圖片縮圖都維持相同比例。
佔位圖片完全免費且無使用限制嗎？
是的——每張圖片都免費，無需註冊、無浮水印、無帳號、無使用限制。不像一些線上圖片工具會限制免費使用者每天的下載次數或要求電子郵件驗證，本工具完全沒有任何限制。它是 placehold.co、dummyimage.com 和 via.placeholder.com 的隱私友善替代方案：你不是連結到他們的伺服器，而是在本機生成圖片，完全擁有檔案或 data URI，不依賴任何第三方服務的可用性。
