×

占位图生成

input请选择需要操作的图片：

工具简介：

免费在线占位图生成器工具，支持自定义尺寸、背景颜色和文字内容，实时生成PNG格式的临时占位图片，适用于网页设计和原型开发

自定义尺寸 自定义背景色 自定义文字内容 实时生成预览 一键下载PNG 适用于原型开发

使用方式：

  1. 设置占位图的宽度、高度
  2. 选择背景颜色、文字颜色和显示内容
  3. 点击下载按钮保存生成的占位图

注意事项：

  1. 所有处理均在浏览器本地完成，保障隐私安全
  2. 建议图片尺寸不超过2000x2000像素
  3. 生成图片格式为PNG

常见问题

  • 这个占位图生成器是免费的吗？
    是的，完全免费。
  • 支持自定义尺寸吗？
    支持自定义宽高、背景色、文字等参数。
  • 生成的图片可以直接使用吗？
    可以，支持下载和直接链接引用。

占位图生成科普知识

什么是占位图生成？

占位图（Placeholder Image）是在网页设计和原型开发阶段用于临时替代真实图片的色块图像。占位图通常带有尺寸标注或简短文字说明，帮助设计师和开发者在缺少真实素材时预览页面布局效果，确认图片区域的尺寸、位置和间距是否合理。

占位图生成原理与技术

占位图生成器使用Canvas API动态绘制矩形背景和文字：通过fillRect方法绘制指定尺寸和颜色的背景矩形，再使用fillText方法在居中位置绘制尺寸标注或自定义文字。整个过程在浏览器本地完成，无需服务器处理，可以即时生成任意尺寸的占位图片。

占位图生成的应用价值

合理的占位图尺寸规划有助于提前发现布局问题。常见尺寸包括：头像（100x100到200x200）、缩略图（300x200）、横幅广告（728x90或468x60）、Hero图片（1920x600）、卡片图片（400x300）。在响应式设计中，应为不同断点（breakpoint）生成对应尺寸的占位图来测试布局适配。

占位图生成的局限性

除了基础尺寸标注，占位图可以自定义文字内容来标注图片用途（如"产品主图"、"轮播图"）、使用不同背景色区分不同类型的图片区域（蓝色表示内容图、灰色表示装饰图），甚至通过CSS直接引用在线占位图服务URL。在组件库和Storybook中，占位图是展示组件布局的重要工具。

应用场景

UI设计稿填充

生成自定义尺寸的占位图，填充UI设计稿中的图片位置

网页布局测试

使用占位图测试网页布局效果，验证响应式设计

响应式适配测试

在不同屏幕尺寸下测试占位图适配效果

图片加载占位

作为图片加载前的占位符，提升用户等待体验

原型设计

在原型设计中使用占位图模拟最终图片展示效果

开发调试

在开发阶段使用占位图调试图片布局和尺寸