什么是占位图？
占位图（placeholder image）是在真实图片、头像或商品素材尚未准备好时，用来保持页面结构的临时图片。它通常包含固定宽高、简单背景色和尺寸文字，能够提前占住图片区域，帮助开发者检查列表、卡片、文章封面和响应式布局。占位图不是最终素材，发布前应替换成与内容相关的图片，并为正式图片补充准确的 alt 文本。
与直接写一段文字或使用随机图片相比，固定尺寸的占位图更容易复现布局问题。设计师可以用同一组规格交付线框稿，前端可以在接口数据还没有完成时继续联调，测试人员也能观察图片区域在不同屏幕宽度下是否稳定。对于需要预留图片位置的页面，提前确定宽高还可以减少图片加载后布局跳动。
本工具可以生成什么
- 自定义尺寸：直接输入宽度和高度，或使用 1080p、OG Image、4:3、1:1 和竖屏预设，快速得到符合版式的画布。
- 自定义外观：选择背景色、文字色和显示文案；未填写文案时会显示当前画布的宽 × 高，方便识别不同占位图。
- 多种导出：支持 PNG、JPEG 和 WebP 下载，也能复制 Data URL 或模拟链接用于开发演示。
- 本地生成：使用 HTML5 Canvas 在当前浏览器绘制，不需要上传图片文件，不依赖账号或后台任务。
如何制作一张占位图
- 先填写目标区域的宽度和高度。文章封面、OG 图片、头像和手机海报通常需要不同的长宽比，优先使用页面或平台规定的像素尺寸。
- 如果尺寸常用，可以点击 1080p、OG Image、4:3、1:1 或竖屏预设，再根据实际布局微调数值。
- 选择与页面背景有足够对比度的背景色和文字色，必要时填写模块名称、图片类型或其他识别文案。
- 选择 PNG、JPEG 或 WebP 后点击下载高清图片。需要嵌入测试代码时，可复制 Data URL；需要模拟远程图片地址时，可复制模拟链接。
尺寸和格式怎么选
按页面场景选择尺寸
OG Image 预设适合社交分享卡片和网页分享图，1:1 适合头像、商品缩略图和方形卡片，1080p 适合宽屏演示或视频封面，竖屏预设适合移动端海报和短视频封面。若只是测试文章列表，使用接近真实图片的宽高比比使用随机尺寸更有价值。尺寸不需要盲目设置很大，先以最终展示区域的 CSS 宽高和设备像素比为依据。
按内容选择格式
PNG 适合需要清晰文字、简单图形或透明背景的占位图；JPEG 适合照片风格的临时素材和较小的文件；WebP 通常可以在保持清晰度的同时减少体积。占位图只用于开发预览时，优先选择容易被团队工具和浏览器识别的格式。正式上线前仍应根据真实图片重新评估压缩比例和加载性能。
和其他图片工具配合使用
占位图生成通常是图片工作流的第一步。需要把生成的素材改成固定画面比例时，可以继续使用 在线图片裁剪工具；需要统一输出像素尺寸，可使用 图片尺寸调整工具。如果测试素材过大，再用 图片压缩工具检查体积；需要在 PNG、JPEG 和 WebP 之间转换时，可使用 图片格式转换工具。这些工具都在浏览器本地处理，适合快速验证网页中的图片流程。
如果素材已经包含个人信息或尚未公开的界面截图，建议先确认是否需要遮挡敏感区域，再决定是否导出。占位图本身不会读取或上传你的原始图片，但复制 Data URL 或模拟链接到第三方项目后，仍应按照项目的权限和数据管理规则使用。
使用限制与发布建议
本工具生成的图片只存在于当前浏览器会话中，刷新页面或关闭标签后不会由网站保存。Canvas 生成依赖浏览器内存，宽度和高度设置过大时可能导致页面响应变慢；遇到这种情况可先降低尺寸，或分批生成素材。模拟链接是为了帮助前端演示固定尺寸和路径格式，并不代表服务器上真实存在对应文件，生产环境应下载图片后部署到自己的静态资源服务器或 CDN。
开发阶段可以在组件中使用占位图检查加载状态、空状态、错误状态和 CLS；发布阶段要替换为有内容的图片，确认压缩后的体积、清晰度、色彩和版权来源。对于 SEO 重要的内容图片，文件名、 alt 文本、周围正文和真实图片主题应保持一致，不能长期用“800 × 600”之类的临时文案代替。
常见问题
图片会上传到服务器吗？
不会。工具只使用 Canvas 在浏览器本地绘制占位图并导出，生成过程不需要上传图片文件或登录账号。
模拟链接可以直接用于生产环境吗？
不建议。模拟链接只适合演示 URL 结构和占位效果，生产环境请先下载生成的图片，再放到自有服务器或 CDN，并配置长期稳定的资源地址。
支持哪些格式？
当前支持 PNG、JPEG 和 WebP。PNG 更适合清晰文字和透明效果，JPEG 与 WebP 更适合控制文件体积，最终格式应结合项目的兼容性和性能要求选择。
默认文字是什么？
如果不填写自定义文本，画布会显示当前宽度和高度，例如“800 × 600”。这样可以在页面截图或接口联调时快速分辨不同尺寸的图片。