digtools
🖼️
dummy image generator,

假圖產生器

在瀏覽器中瞬間產生用於排版的佔位圖片 (Placeholder)。支援自訂尺寸、顏色、文字,並可下載為 PNG、WebP、SVG 等格式。

🎨
完全客製
自由調整尺寸與色彩
🖼️
四種格式
PNG / JPEG / WebP / SVG
🔒
純前端執行
安全隱私,無伺服器追蹤
600 × 400
px
×
px
24px
about,

關於本工具

「假圖產生器」是一款專為網頁設計師與前端開發者打造的免費工具。在專案開發初期、真實圖片素材尚未備妥時,您可以透過本工具即時產生出特定尺寸的「佔位圖片 (Placeholder)」,用於測試版面配置與響應式排版。

除了能自由輸入任意寬高尺寸外,工具內建了多款實用的預設尺寸 (如 FB/IG/X 社群發文、各種標準橫幅廣告等),讓您一鍵帶入。您還能自訂背景顏色、文字顏色、字體大小,甚至在圖片中壓上自訂文字,並支援匯出為 PNG、JPEG、WebP 及 SVG 等四種常見的圖片格式。

所有的圖像生成作業都在您的瀏覽器端完成,不會有任何資料傳送至伺服器。即使在圖上輸入專案的機密名稱,也能確保絕對的安全性。

how to,

使用方法

STEP 1

設定圖片尺寸

輸入您需要的圖片「寬度」與「高度」(單位為像素 px)。若想維持固定的長寬比,請勾選「鎖定比例」。您也可以從「預設尺寸」頁籤中一鍵套用常用的社群或廣告尺寸。

STEP 2

自訂樣式與文字

利用選色器或輸入 HEX 色碼來更改「背景顏色」與「文字顏色」。文字部分預設會顯示圖片尺寸,您也可以切換成「自訂」並輸入您想要的說明文字,並拖拉滑桿調整字體大小。

STEP 3

下載匯出

從下拉選單選擇您需要的圖片格式 (PNG / JPEG / WebP / SVG),接著點擊「下載圖片」按鈕,產生的圖片就會自動儲存到您的裝置中。

glossary,

名詞解釋

佔位圖片 (Placeholder Image)
在網頁或 App 尚未取得正式圖片素材前,用來暫時代替顯示的假圖片。它的作用是撐開版面空間,幫助開發者確認圖文比例、排版是否跑版,是前端切版不可或缺的輔助工具。
OGP (Open Graph Protocol)
決定網頁在社群平台 (如 Facebook、X、Line) 被分享時,所呈現的標題、描述及預覽縮圖的規範。一般建議的 OGP 圖片尺寸為 1200×630 像素,本工具已將此標準加入預設清單中。
WebP
由 Google 開發的現代化圖片格式。與傳統的 JPEG 或 PNG 相比,它能在維持相同畫質的前提下,大幅縮減檔案體積,有利於提升網頁載入速度及 SEO 表現。
SVG (Scalable Vector Graphics)
一種基於 XML 的向量圖片格式。最大的優點是不論放大幾倍,邊緣都不會模糊產生馬賽克。如果您需要大量放置假圖且非常在意網頁效能,匯出成只有幾 KB 大小的 SVG 是最推薦的選擇。
faq,

常見問題

Q.最大可以產生多大尺寸的圖片?
這取決於您瀏覽器的記憶體限制。在一般環境下,產生「4000×4000 像素」左右的高解析度圖片都不成問題。但請注意,如果指定極端龐大的尺寸 (例如 10000 像素以上),可能會導致瀏覽器崩潰。
Q.可以製作透明背景 (去背) 的假圖嗎?
可以的。請在背景色的選色器中將透明度 (Alpha) 調為 0,然後選擇「PNG」、「WebP」或「SVG」格式進行下載。請注意,JPEG 格式先天不支援透明度,若選擇 JPEG,透明背景會被填滿為白色或黑色。
Q.可以一次批次產生多張假圖嗎?
本工具專注於讓您逐一客製化並產生單張圖片,因此未內建批次產生功能。如果您需要大量隨機假圖,建議使用能透過 API 取得圖片的外部 Placeholder 服務 (例如 Lorem Picsum)。
Q.可以使用手機或平板操作嗎?
可以。本工具完全支援在智慧型手機或平板的瀏覽器上運行。網頁採響應式設計,產生出的圖片也能直接儲存到裝置的相簿或下載資料夾中,方便作為行動 App 開發的測試素材。
use cases,

使用場景

💻

網頁切版與 Mockup 製作

在前端工程師進行切版時,若真實圖片尚未到位,可先產生對應尺寸的假圖置入 HTML/CSS 中,以確保版面結構正確且不會跑版。

📱

社群素材與廣告橫幅預覽

產生 Facebook OGP、YouTube 縮圖或是 GDN 廣告等標準尺寸的圖片,用來測試在各個平台上的安全顯示範圍或字體辨識度。

📝

部落格與 CMS 佈景主題開發

在開發 WordPress 佈景主題時,為測試用的文章清單配上不同尺寸與顏色的假圖,以檢驗縮圖裁切邏輯與響應式顯示效果。

📊

簡報排版規劃

在製作企劃書或提案簡報時,先放上標有文字說明的佔位圖片 (如「此處放產品圖」),能讓團隊更聚焦於整體大綱架構的討論。

所有工具分類

Send Feedback

Please let us know your thoughts to help us improve the tool.

免責聲明

本網站提供的所有工具均可免費使用,但請用戶自行承擔使用風險。本網站對各種工具的計算結果、轉換結果及生成數據的準確性、完整性和安全性不作任何保證。因使用本工具而產生的任何損害或糾紛,運營者概不負責,敬請見諒。此外,檔案處理與計算等操作原則上均在您的瀏覽器內完成,您輸入的數據不會傳送或保存在本網站的伺服器上。