占位图片
免费在线占位图片生成工具。指定尺寸、背景色和文字，创建网页设计和原型用的临时图片。浏览器处理。
lock文件不会上传到服务器
按 Ctrl+D 收藏此页面
占位图生成器是一款免费在线工具，可为开发和设计创建临时图片。 自定义尺寸、背景色、文字和字体，用于线框图和原型。 在浏览器中处理，完全免费。 占位图片能快速生成设计、开发和内容创作所需的各种素材。 无需安装或登录，在电脑和手机的浏览器中即可直接使用。 所有处理均在您的设备本地完成，使用更加安心。
如何使用占位图片?
- 输入图片尺寸（宽×高）。
- 设置背景色、文字色和显示文字。
- 点击生成并下载图片或复制URL。
占位图片常见问题
占位图用在哪里？
用于Web开发中实际图片准备好之前的布局确认、线框图、原型和设计稿。
可以在图片上显示自定义文字吗？
可以，默认显示图片尺寸，但可以改为任意文字。文字颜色和字体也可以自定义。
占位图如果被带到线上环境，会出什么问题？
只要留下一个灰色方块，访客就会觉得网站还没做完；如果是商品页，人们下单时就会犹豫。搜索方面同样吃亏：空白占位图会被 Google 图片收录，而商品结构化数据的 image 字段若指向这个网址，页面还可能因此失去富媒体结果资格。每次发布前，请在整个代码库里搜一遍 placeholder 或 via.placeholder 这类字符串。
占位图做多大尺寸才能避免布局跳动？
必须与最终要放进去的图片保持完全一致的长宽比。如果真图加载后尺寸不同，下方内容就会被顶下去，这会拉高谷歌衡量的 CLS（累积布局偏移）分数。像素尺寸不必相同，但比例一定要对，并在 img 标签上写明 width 和 height 属性，让浏览器在文件到达前先把位置占好。
如何充分利用占位图片?
- 占位图要与最终照片保持同样比例，替换时布局才不会跳动。
- 把 1200×630 这样的尺寸直接写在图上，团队沟通规格时会省不少事。
- 即使是占位图也别让 alt 留空，写清最终图片的内容。