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/lorem-picsum-占位符图片生成器/，来自 MiniWebtool，https://MiniWebtool.com/
由 miniwebtool 团队开发。更新日期：2026-04-27