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 构建，此外还能生成可作为文件下载的画布渲染纯色、渐变或棋盘格图片。

如何生成一组适配 Retina 屏幕的占位符图片？

设置基础宽度和高度，然后点击生成 URL 和代码段以显示结果面板，并点击下载 1x / 2x / 3x。该工具会以 1×、2× 和 3× 的比例生成三个相同的占位符副本，随时可以在高清屏幕的 srcset 属性中使用。每个文件下载时都有清晰的文件名，如 [email protected]。

为什么预览不需要服务器请求就能更新？

图片完全是在您的浏览器中使用 HTML Canvas API 绘制的。对宽度、高度、颜色或文本的每一次更改都会立即重新渲染，无需经过网络传输。这意味着该工具速度极快，加载后可离线工作，并且永远不会将您的设计选择发送到任何服务器。一旦您对预览感到满意，同样的画布就可以导出为可下载的文件，或复制为 base64 数据 URL。

我可以下载哪些图片格式？

您可以下载生成的占位符为：

• PNG — 无损，支持透明，最适合纯色和清晰的文本。
• JPG — 文件体积较小，适用于在可接受少量压缩伪影的情况下的类照片内容。
• WEBP — 具有最佳压缩效果和同等质量的现代格式。所有现代浏览器均支持。
• SVG — 矢量格式，无限可缩放，对于纯色和渐变背景的文件体积极小。
• Base64 Data URL — 将图片复制为内联文本，直接粘贴到 HTML 或 CSS 中。

如何使用此计算器工具

1. 选择尺寸： 输入像素宽度和高度，或点击头像、横幅、Hero 或 Twitter 卡片等尺寸预设之一。
2. 选择背景样式： 纯色适用于扁平颜色，渐变适用于双色混合，棋盘格适用于透明风格的背景。
3. 设置颜色： 使用拾色器、直接输入十六进制代码，或点击快速调色板色块。
4. 添加自定义文本（可选）： 留空则自动显示尺寸（例如：600 × 400）。
5. 查看实时预览： 画布随每次输入更新 — 无需提交。
6. 下载或生成 URL： 点击下载图片获取即时文件，或点击生成 URL 和代码段获取热链 URL 和复制粘贴用的代码。

快速尺寸参考

获得最佳效果的技巧

• 调整尺寸时锁定宽高比以保持相同的比例 — 对响应式集合很有用。
• 为透明叠加层设计时使用棋盘格图案，以模拟透明度的渲染效果。
• 选择高对比度颜色（浅色背景上的深色文本，或反之亦然），以确保尺寸标签清晰可见。
• 保持文本简短 — 长标签会自动缩小，但四到十二个字符看起来最整洁。
• 使用 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 的速度重新渲染，因此迭代速度非常快。

相关工具

• 图片调整大小工具 — 将现有照片调整为任何宽度/高度。
• 图片压缩工具 — 在发布到生产环境之前减小文件体积。
• 配色方案生成器 — 为您的占位符选择调色板。
• CSS 渐变生成器 — 设计背景渐变。

其他资源

• Lorem Picsum — 免费随机照片服务
• Placehold.co — 现代占位符服务
• MDN: img 元素和 srcset
• Lorem ipsum — 占位符内容历史