假圖產生器
在瀏覽器中瞬間產生用於排版的佔位圖片 (Placeholder)。
支援自訂尺寸、顏色、文字,並可下載為 PNG、WebP、SVG 等格式。
關於本工具
「假圖產生器」是一款專為網頁設計師與前端開發者打造的免費工具。在專案開發初期、真實圖片素材尚未備妥時,您可以透過本工具即時產生出特定尺寸的「佔位圖片 (Placeholder)」,用於測試版面配置與響應式排版。
除了能自由輸入任意寬高尺寸外,工具內建了多款實用的預設尺寸 (如 FB/IG/X 社群發文、各種標準橫幅廣告等),讓您一鍵帶入。您還能自訂背景顏色、文字顏色、字體大小,甚至在圖片中壓上自訂文字,並支援匯出為 PNG、JPEG、WebP 及 SVG 等四種常見的圖片格式。
所有的圖像生成作業都在您的瀏覽器端完成,不會有任何資料傳送至伺服器。即使在圖上輸入專案的機密名稱,也能確保絕對的安全性。
使用方法
設定圖片尺寸
輸入您需要的圖片「寬度」與「高度」(單位為像素 px)。若想維持固定的長寬比,請勾選「鎖定比例」。您也可以從「預設尺寸」頁籤中一鍵套用常用的社群或廣告尺寸。
自訂樣式與文字
利用選色器或輸入 HEX 色碼來更改「背景顏色」與「文字顏色」。文字部分預設會顯示圖片尺寸,您也可以切換成「自訂」並輸入您想要的說明文字,並拖拉滑桿調整字體大小。
下載匯出
從下拉選單選擇您需要的圖片格式 (PNG / JPEG / WebP / SVG),接著點擊「下載圖片」按鈕,產生的圖片就會自動儲存到您的裝置中。
名詞解釋
- 佔位圖片 (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 是最推薦的選擇。
常見問題
- Q.最大可以產生多大尺寸的圖片?
- 這取決於您瀏覽器的記憶體限制。在一般環境下,產生「4000×4000 像素」左右的高解析度圖片都不成問題。但請注意,如果指定極端龐大的尺寸 (例如 10000 像素以上),可能會導致瀏覽器崩潰。
- Q.可以製作透明背景 (去背) 的假圖嗎?
- 可以的。請在背景色的選色器中將透明度 (Alpha) 調為 0,然後選擇「PNG」、「WebP」或「SVG」格式進行下載。請注意,JPEG 格式先天不支援透明度,若選擇 JPEG,透明背景會被填滿為白色或黑色。
- Q.可以一次批次產生多張假圖嗎?
- 本工具專注於讓您逐一客製化並產生單張圖片,因此未內建批次產生功能。如果您需要大量隨機假圖,建議使用能透過 API 取得圖片的外部 Placeholder 服務 (例如 Lorem Picsum)。
- Q.可以使用手機或平板操作嗎?
- 可以。本工具完全支援在智慧型手機或平板的瀏覽器上運行。網頁採響應式設計,產生出的圖片也能直接儲存到裝置的相簿或下載資料夾中,方便作為行動 App 開發的測試素材。
使用場景
網站線框圖與模型
\n當前端工程師根據設計師的排版提案進行編碼時,在正式圖片交付之前,他們會使用指定尺寸的假圖片來驗證排版是否會跑版。
\n社群媒體與廣告橫幅預覽
\n產生符合各種平台規定尺寸的假圖片,例如 X(原 Twitter)的 OGP 圖片、YouTube 縮圖以及 GDN 橫幅廣告,作為檢查文字可見度與安全區域的範本。
\n部落格與 CMS 佈景主題開發
\n在開發 WordPress 等 CMS 佈景主題時,會在測試文章中設定多張假精選圖片,以檢查圖片在列表頁面上的裁切情況及其在響應式排版中的顯示尺寸。
\n簡報排版調整
\n在製作企劃書或提案書等簡報資料時,將設定好尺寸的假圖片放置在預計放入圖片的空間中,有助於順利進行整體的排版規劃。
\n發送反饋
請告訴我們您的想法,以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.