占位图生成

Placeholder Image · 设计工具

快速生成指定尺寸与颜色的占位图片，支持自定义文本提示与格式设置，前端开发与原型设计阶段必备工具

总访问 0 次总使用 0 次

什么是占位图生成

快速生成指定尺寸与颜色的占位图片，支持自定义文本提示与格式设置，前端开发与原型设计阶段必备工具

占位图生成 是前端开发者、UI 设计师和产品经理在开发和设计过程中不可或缺的实用工具。在项目早期阶段，真实图片往往尚未准备就绪，但界面布局又需要图片占位来展示结构。本工具可以快速生成任意尺寸、颜色和格式的占位图片，支持自定义显示文本，帮助您在开发、测试和原型设计阶段保持工作流畅，无需等待最终素材即可完成功能开发和布局调试。

功能特色

灵活尺寸与预设模板

支持自定义任意宽度和高度（1-5000 像素），并提供 8 种常用尺寸预设：图标（16×16）、头像（100×100）、缩略图（120×120）、小图（300×200）、标准（640×480）、网页（800×600）、全高清（1920×1080）、OG 图（1200×630）。同时提供 4 种宽高比预设：正方形（1:1）、横屏（16:9）、竖屏（9:16）、超宽（21:9），一键应用常见比例。

自定义颜色与文本

使用颜色选择器或十六进制输入自定义背景色和文字颜色，提供 8 组精选配色方案一键应用（灰、蓝、绿、黄、红、紫、深灰、深蓝）。支持在占位图上显示自定义文本，留空则自动显示尺寸信息（如"800 × 600"），方便识别不同规格的占位图。

多格式支持与 URL 生成

支持 PNG、JPG、WebP 三种主流图片格式输出。自动生成可直接使用的图片 URL，支持复制链接直接在 HTML/CSS 中引用，或下载图片文件到本地使用。URL 格式兼容 placehold.co 服务标准，稳定可靠。

如何使用占位图生成

选择尺寸

在"尺寸"区域直接输入宽度和高度数值（像素），或点击"常用尺寸"和"宽高比"预设快速选择。预设会自动计算合适的像素尺寸。预览区会实时显示生成效果，帮助您确认尺寸是否符合需求。

设置颜色与文本

在"显示文本"输入框中输入想要显示的文字（如"产品图片"、"用户头像"），留空则显示尺寸。使用颜色选择器设置背景色和文字色，或点击下方的颜色预设快速应用。在"格式"下拉菜单中选择 PNG、JPG 或 WebP 格式。

获取图片

确认预览效果后，有两种使用方式：复制 URL — 在"图片 URL"区域点击复制按钮，将链接粘贴到 HTML 的 src 属性或 CSS 的 background-image 中；下载图片 — 点击"下载图片"按钮将图片保存到本地，文件名自动包含尺寸信息（如 placeholder-800x600.png）。

占位图在开发流程中的应用

为什么需要占位图？

并行工作：设计师准备最终图片的同时，开发者可以使用占位图完成布局和交互开发，缩短项目周期。
布局测试：不同尺寸的占位图帮助测试响应式布局在各种情况下的表现，确保图片比例变化时界面依然稳定。
原型演示：向客户或团队展示设计方案时，占位图让原型看起来更完整、更真实，提高沟通效率。
性能测试：使用特定大小的占位图模拟真实图片加载，测试懒加载、骨架屏等性能优化策略。
错误处理：作为图片加载失败时的默认回退图，提升用户体验。

常见占位图使用场景

用户头像：100×100 或 120×120 像素，圆形裁剪，使用中性灰色背景配合"头像"或用户名字母。
产品图片：根据列表或详情页布局选择 300×200（列表）或 800×600（详情），使用品牌色背景。
文章封面：16:9 或 4:3 比例，1200×630 适合社交媒体分享（Open Graph 标准）。
轮播 Banner：1920×600 或 1920×1080 全宽设计，根据实际容器高度调整。
图标占位：16×16、24×24、32×32、48×48 等小尺寸，用于功能开发阶段。

提示：占位图的颜色可以与设计系统的色板保持一致，让开发中的界面看起来更有整体性。

核心特性

8种尺寸预设

4种宽高比模板

8组配色方案

自定义背景/文字色

自定义文本

显示尺寸或提示文字

3种格式输出