为网页设计、线框图和原型图生成专业占位图片。自定义尺寸、颜色、文字和格式。
<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模板。