為網頁設計、線框圖和原型圖生成專業佔位圖片。自訂尺寸、顏色、文字和格式。
<img src="placeholder.png" width="800" height="400" alt="Placeholder">Use width and height attributes to prevent layout shift (CLS)
background: #ccc url('placeholder.svg') center/cover;SVG placeholders are ideal for CSS backgrounds — infinitely scalable
<Image src="/placeholder.png" width={800} height={400} alt="..." />Use Next.js Image component for automatic optimization
<img src="data:image/png;base64,..." alt="Placeholder">Embed small placeholders directly in HTML — no extra HTTP request
| 使用情境 | 尺寸 | 長寬比 |
|---|---|---|
| Favicon / Icon | 64 × 64 | 1:1 |
| Avatar / Profile | 150 × 150 | 1:1 |
| Thumbnail | 300 × 200 | 3:2 |
| Blog Feature Image | 1200 × 630 | ~1.9:1 |
| Social Media OG | 1200 × 630 | ~1.9:1 |
| Hero Banner | 1920 × 600 | 16:5 |
| Full HD | 1920 × 1080 | 16:9 |
| Product Photo | 800 × 800 | 1:1 |
佔位圖片在網頁開發和設計中用於在最終圖片準備好之前的原型設計、線框圖和開發階段填充圖片空間。它們有助於視覺化佈局和測試響應式設計。
是的，此工具生成的所有佔位圖片都在您的瀏覽器本地建立，可免費用於任何目的，包括商業專案。
PNG是基於像素的光柵圖像格式，所有瀏覽器和應用程式都支援。SVG是基於向量的格式，可以無損縮放——非常適合高解析度顯示器。網頁設計原型使用SVG，通用相容性使用PNG。
可以！您可以以像素為單位輸入任意寬度和高度。該工具支援從1×1到非常大值的任意尺寸。對於標準網頁尺寸，請使用我們的預設，如頭像、縮圖、橫幅、社群OG和HD範本。