佔位圖生成器

我什麼時候用得上它

當你需要一個800×600的圖片佔位來測試網頁佈局，但手頭沒有最終素材；或者寫產品文件時需要插入一張示意圖展示介面位置；又或者給前端同事提issue時想快速標註圖片尺寸——開啟這個工具，填幾個數字，幾秒鐘就能拿到一張符合尺寸和文字提示的佔位圖。

使用步驟 / 怎麼用這個工具

1. 設定尺寸：在“寬度”和“高度”輸入框分別填入畫素值，比如800和600。
2. 選擇顏色：點選“背景顏色”拾色器選擇底色，比如淺灰 #EEEEEE；點選“文字顏色”選擇字號顏色，比如深灰 #333333。
3. 填寫文字：在“顯示文字”框裡輸入你想在圖片上顯示的內容，比如“800×600 主圖區域”。
4. 選擇格式：在下拉選單選擇“SVG”（向量，無限縮放）或“PNG”（點陣圖，固定畫素）。
5. 生成並下載：點選“生成佔位圖”按鈕，右側預覽區會立刻顯示圖片；點選“下載”按鈕儲存到本地。

完整算例 / 實操步驟

我們做一個部落格文章列表頁的佔位圖。尺寸需求：寬768px，高320px（16:9左右）。背景用淡藍#E3F2FD，文字深藍#1565C0，顯示文字“部落格封面圖 768×320”。

• 輸入：寬=768，高=320，背景色=#E3F2FD，文字色=#1565C0，文字=“部落格封面圖 768×320”，格式=SVG。
• 點選生成後，預覽區出現一張藍底深藍文字的圖片。文字居中顯示，大小為自動適配。
• 下載到本地（檔名為 placeholder_768_320.svg）。

如果把這個佔位圖放到HTML的<img>標籤裡，它就會像最終圖片一樣佔位，但不會因為載入慢而破壞佈局。

更多算例 / 多場景對比

場景一：超大尺寸極限測試
假設你需要一張1920×1080的全屏佔位圖，背景黑（#000000）文字白（#FFFFFF），文字“1920×1080 Full HD”。生成後圖片清晰無鋸齒（SVG格式），文字大小會自動調整，不會溢位。

場景二：極小尺寸+無文字
一個16×16的 favicon 佔位，背景紅#FF0000，文字留空。生成後得到一塊紅色小方塊，適合在瀏覽器標籤佔位。

結果怎麼解讀 / 數值含義

生成的結果是一張圖片檔案，你可以直接嵌入到HTML、Markdown或設計軟體中。如果文字過長導致顯示不全，工具會自動縮小字號；如果尺寸輸入為0或負數，工具會提示“請輸入正數”。如果顏色程式碼格式錯誤（比如少寫#），工具會使用預設色（白底黑字）。

典型使用場景

• 網頁設計原型：設計師在Sketch/Figma之前先用佔位圖在瀏覽器裡快速搭建佈局，測試響應式斷點。
• 前端開發除錯：後端圖片介面還沒做好時，前端工程師用佔位圖替代，確保CSS佈局和載入效果正常。
• 技術文件/教程：寫API文件或部落格教程時，需要展示“此處插入圖片”的示例，用佔位圖比文字說明更直觀。

注意事項

• 佔位圖僅供臨時使用，不適用於生產環境（如正式使用者看到的介面）。
• SVG格式完美支援任意縮放，PNG格式輸出固定解析度（預設72dpi）。
• 顏色值請用6位十六進制（如#FF6600）或標準HTML顏色名（如red），工具不識別簡寫#F60。文字長度建議不超過20個漢字，否則可能被縮小到不易閱讀。
• 本工具生成的圖片不含任何版權資訊，可自由使用。

常見誤用 / 易踩的坑

1. 忘記加#號：顏色輸入“FF0000”會識別失敗，必須寫成“#FF0000”。
2. 尺寸單位寫錯：工具只接受純數字畫素，不要輸入“800px”或“10cm”，否則會解析錯誤。
3. 文字包含特殊符號：如引號、尖括號可能破壞SVG結構，工具會過濾或報錯，建議使用純中文/英文。
4. 下載後文件名不識別：部分瀏覽器下載的PNG檔案自動命名為“placeholder.png”，你可以重新命名為有意義的名稱。
5. 以為可以取代真實圖片：佔位圖不包含任何實際內容，僅用於佔位，請不要在正式頁面長期使用。

常見問題 FAQ

問：生成空白圖片，沒有文字？
答：檢查“顯示文字”輸入框是否為空。如果留空，圖片上只顯示背景色，無文字。

問：可以和別人的佔位圖工具如 placeholder.com 混用嗎？
答：可以。我們的工具生成的圖片格式（SVG/PNG）和標準佔位圖完全相容，可以直接替換現有程式碼中的圖片連結。

問：我可以在商業專案中使用嗎？
答：可以。佔位圖本身不包含任何受限制的素材，你可以自由使用到任何商業或非商業專案中。

問：為什麼下載的SVG檔案開啟是空白？
答：請用瀏覽器或圖片檢視器開啟，不要用文字編輯器。如果仍空白，可能是顏色程式碼錯誤導致SVG渲染失敗，重新生成一次。

問：支援透明背景嗎？
答：目前不支援透明背景（alpha通道），所有背景都是實色。如果需要透明佔位，請改用其他工具。

問：最多能生成多大尺寸？
答：理論上無上限，但過大的尺寸（如10000×10000）可能導致瀏覽器卡頓或下載檔案過大。建議日常使用不超過4096×4096。