Lorem Picsum / 占位符图片生成器
生成任何尺寸的占位符图片,支持自定义颜色、文本和样式。提供实时画布预览、多服务 URL 生成器(Lorem Picsum、Placehold.co、DummyImage),以及可直接粘贴的 HTML / Markdown / JSX 代码段,并支持即时下载 PNG / JPG / SVG 格式。
检测到广告拦截,导致我们无法展示广告
MiniWebtool 依靠广告收入免费提供服务。如果这个工具帮到了你,欢迎开通 Premium(无广告 + 更快),或将 MiniWebtool.com 加入白名单后刷新页面。
- 或升级 Premium(无广告)
- 允许 MiniWebtool.com 显示广告,然后刷新
Lorem Picsum / 占位符图片生成器
Lorem Picsum / 占位符图片生成器 是一款免费的基于浏览器的工具,可为模型、线框图、原型和前端开发创建像素级的占位符图片。您可以设置高达 4000 像素的任何宽度和高度,选择颜色,添加自定义文本,基于画布的预览会立即更新 — 无需服务器往返,无需等待。可下载为 PNG, JPG, WEBP 或 SVG,或直接获取可粘贴的 HTML / Markdown / React 代码段,以及 Lorem Picsum, Placehold.co 和 DummyImage 的热链 URL。
什么是占位符图片,为什么我需要它?
占位符图片是在网站或应用程序的设计和开发阶段使用的临时图像。它为最终图像预留空间,以便设计师和开发人员在真实照片或图形准备好之前布局内容、测试响应式行为并审查模型。占位符对于线框图、原型、电子邮件模板和前端测试至关重要。没有它们,布局可能会塌陷,CSS 规则可能会失效,利益相关者也无法想象最终的设计效果。
常见用例
- 线框图与模型 — 向客户展示每个图片的具体位置及其尺寸。
- 前端原型开发 — 在交付最终资产之前开发响应式布局。
- CMS 测试 — 使用真实的图片尺寸填充测试文章和产品页面。
- 电子邮件模板 — 为营销活动预留横幅和产品图片插槽。
- 文档与设计系统 — 说明宽高比、间距和断点。
- 懒加载测试 — 快速生成大图以对图片加载策略进行压力测试。
Lorem Picsum 和 Placehold.co 之间有什么区别?
Lorem Picsum (picsum.photos) 返回所请求尺寸的随机真实照片,非常适合真实感模型。Placehold.co 和 DummyImage 返回中心印有尺寸的纯色矩形,是线框图和展示给定尺寸图像确切位置的理想选择。此生成器在一个地方集成了这两种风格的 URL 构建,此外还能生成可作为文件下载的画布渲染纯色、渐变或棋盘格图片。
| 服务 | 输出样式 | 最适合 |
|---|---|---|
picsum.photos | 真实照片(随机或指定种子) | 真实感模型、演示内容 |
placehold.co | 纯色 + 尺寸文本 | 线框图、布局测试 |
dummyimage.com | 纯色 + 尺寸文本 | 传统兼容性、自定义文本 |
| 画布(本工具) | 自定义纯色 / 渐变 / 棋盘格,可下载文件 | 自托管、离线安全的占位符 |
如何生成一组适配 Retina 屏幕的占位符图片?
设置基础宽度和高度,然后点击生成 URL 和代码段以显示结果面板,并点击下载 1x / 2x / 3x。该工具会以 1×、2× 和 3× 的比例生成三个相同的占位符副本,随时可以在高清屏幕的 srcset 属性中使用。每个文件下载时都有清晰的文件名,如 [email protected]。
<img src="placeholder-600x400.png" srcset="[email protected] 2x, [email protected] 3x" alt="hero">
为什么预览不需要服务器请求就能更新?
图片完全是在您的浏览器中使用 HTML Canvas API 绘制的。对宽度、高度、颜色或文本的每一次更改都会立即重新渲染,无需经过网络传输。这意味着该工具速度极快,加载后可离线工作,并且永远不会将您的设计选择发送到任何服务器。一旦您对预览感到满意,同样的画布就可以导出为可下载的文件,或复制为 base64 数据 URL。
我可以下载哪些图片格式?
您可以下载生成的占位符为:
- PNG — 无损,支持透明,最适合纯色和清晰的文本。
- JPG — 文件体积较小,适用于在可接受少量压缩伪影的情况下的类照片内容。
- WEBP — 具有最佳压缩效果和同等质量的现代格式。所有现代浏览器均支持。
- SVG — 矢量格式,无限可缩放,对于纯色和渐变背景的文件体积极小。
- Base64 Data URL — 将图片复制为内联文本,直接粘贴到 HTML 或 CSS 中。
如何使用此计算器工具
- 选择尺寸: 输入像素宽度和高度,或点击头像、横幅、Hero 或 Twitter 卡片等尺寸预设之一。
- 选择背景样式: 纯色适用于扁平颜色,渐变适用于双色混合,棋盘格适用于透明风格的背景。
- 设置颜色: 使用拾色器、直接输入十六进制代码,或点击快速调色板色块。
- 添加自定义文本(可选): 留空则自动显示尺寸(例如:
600 × 400)。 - 查看实时预览: 画布随每次输入更新 — 无需提交。
- 下载或生成 URL: 点击下载图片获取即时文件,或点击生成 URL 和代码段获取热链 URL 和复制粘贴用的代码。
快速尺寸参考
| 用例 | 宽度 × 高度 | 宽高比 |
|---|---|---|
| 头像 / 个人资料照片 | 200 × 200 | 1:1 |
| 卡片缩略图 | 400 × 300 | 4:3 |
| 博客 Hero | 1200 × 630 | 1.9:1 |
| 全宽 Hero (16:9) | 1920 × 1080 | 16:9 |
| Twitter / X 卡片 | 1200 × 630 | 1.9:1 |
| Facebook 封面 | 851 × 315 | 2.7:1 |
| Instagram 帖子(正方形) | 1080 × 1080 | 1:1 |
| YouTube 缩略图 | 1280 × 720 | 16:9 |
| 移动端竖屏 | 375 × 667 | 9:16 |
获得最佳效果的技巧
- 调整尺寸时锁定宽高比以保持相同的比例 — 对响应式集合很有用。
- 为透明叠加层设计时使用棋盘格图案,以模拟透明度的渲染效果。
- 选择高对比度颜色(浅色背景上的深色文本,或反之亦然),以确保尺寸标签清晰可见。
- 保持文本简短 — 长标签会自动缩小,但四到十二个字符看起来最整洁。
- 使用 SVG 实现清晰缩放 — 对于将在多种尺寸下显示的展示,SVG 在每个缩放级别都更清晰。
- 生产环境使用 WEBP — 在同等质量下比 JPG 小约 30%,且具有极佳的浏览器支持。
我可以在商业项目中使用生成的图片吗?
由此工具的画布生成器创建的自定义图片(您下载的纯色预览图)100% 属于您,可以在任何地方使用,不受限制。Lorem Picsum 照片根据 Unsplash 许可进行授权,可免费用于商业和个人用途。Placehold.co 和 DummyImage 也可以免费使用,但在发布生产资产之前,请务必检查各服务的当前条款。
常见问题解答
是否有最大图片尺寸限制?
此工具支持每边最高 4000 × 4000 像素的尺寸,涵盖了几乎所有的现实用例,包括高清 Hero 图片和 4K 显示器。浏览器承担了繁重的工作,因此超大画布可能会在旧设备上短暂减慢预览速度。
我可以生成透明占位符吗?
可以 — 下载为 PNG 或 SVG,并使用棋盘格背景模式来直观地查看透明度的渲染效果。对于全透明的下载,将背景颜色和次要颜色设置为相同的值并选择 PNG。
图片可以在 Photoshop, Figma 或 Sketch 中使用吗?
完全可以。PNG, JPG, WEBP 和 SVG 都是所有现代设计工具支持的标准图片格式。将下载的文件拖放到您的画布中,或在 CSS 中直接使用数据 URL 作为内联背景。
为什么要使用这个工具,而不是直接输入 Placehold.co 的 URL?
三个原因:(1) 在确定 URL 之前进行实时视觉预览 — 您可以准确看到将获得的内容;(2) 同时一键复制 HTML, Markdown, JSX, CSS 和 BBCode;(3) 可下载自托管文件,用于离线使用或不能依赖第三方服务的项目。
它在移动设备上可以工作吗?
是的,整个界面都适配手机和平板屏幕。画布预览会自动缩放以适应屏幕,控件垂直堆叠,所有下载/复制操作通过移动端剪贴板 API 均可正常工作。
我可以一次批量生成多个尺寸吗?
“Retina 集合”按钮可一键下载当前尺寸的 1×、2× 和 3× 版本。对于其他批量需求,只需点击每个预设色块并下载即可 — 画布以 60+ FPS 的速度重新渲染,因此迭代速度非常快。
相关工具
其他资源
引用此内容、页面或工具为:
"Lorem Picsum / 占位符图片生成器" 于 https://MiniWebtool.com/zh-cn//,来自 MiniWebtool,https://MiniWebtool.com/
由 miniwebtool 团队开发。更新日期:2026-04-27