Lorem Picsum 线上测试图产生器，快速插入特定长度、宽度 CC0 图片

在开发网页或设计版型可能会需要放入图片进行测试，除非你原本就有自行准备测试图片，否则就需要使用佔位图片（Placeholder），简单来说，佔位图就是依照使用者所需的长度宽度快速产生图片，以填充特定的图片空位，好处是不用手动裁切图片，大多数的佔位图片产生器都是透过图片网址来指定要显示的大小，有些还能加上特效、选择不同类型的示例图片，我觉得可以在图片中显示长宽尺寸对于要辨识来说也很有用。

本文要介绍的「Lorem Picsum」是一个在线测试图片产生器，大家都知道 Lorem Ipsum 是一篇常用于排版设计领域的拉丁文文章，后来也做为「测试文字」代称，Lorem Picsum 则提供测试用的图片。

透过这项服务可以快速插入特定长度、宽度的示例图，所有图片来源皆为知名的 CC0 授权免费图库 Unsplash，没有版权疑虑，开发者在测试时也能放心取用。除此之外，以前介绍过「Unsample 免费示例图产生器，一键下载打包 Unsplash 图库指定大小照片」可依照使用者设定的图片尺寸大小、张数和画质自动产生示例图片，如果需要取得实体图片文件也可选择它做为替代方案。

Lorem Picsum 还允许加入参数以随机显示图片，或是让图片以灰阶（Grayscale）、模糊（Blur）方式呈现，如果开发上需要还有提供 API 参数，使用方式可参考网站首页说明。

Lorem Picsum
https://picsum.photos/

使用教程

STEP 1

开启 Lorem Picsum 网站后最上方会有两段网址，说明这项服务最简单的使用方式，也就是直接在网址后方数字指定图片的宽度、高度，就能透过 Lorem Picsum 随机产生图片，而且会自动裁切为指定图片大小。如果只有接上一个数字时代表产生的是正方形图片（例如 200×200 尺寸）。

STEP 2

稍微往下捲动网页后从「Specific Image」找到取得特定图片的设定方式，也就是在图片尺寸前面加上一段 ID，点选下方的链结可以查看完整图片列表。

每张图片都有预览图、标题，右下角则是图片 ID，将需要的 ID 依照 Specific Image 说明加入网址就能在特定位置显示某张图片，依照预先设定的图片尺寸呈现。

STEP 3

首页还有一个进阶用法，例如在一段网址合併、加入多个参数选项（同时使用灰阶、模糊效果），或是在浏览器存取多张相同尺寸的图片，加入 random 参数来防止图片被快取，如果需要副档名也能直接在网址后面加上 .webp 或 .webp 。

STEP 4

以实际示例来取得一张佔位图片，将 Lorem Picsum 提供的网址贴上，然后指定显示的图片 ID 为 1060 号，需要的图片尺寸为 3840×2160，网址看起来就像下图。

透过这段网址就能协助我取得特定主题、尺寸大小的佔位图。

值得一试的三个理由：

1. Lorem Picsum 在线佔位图产生器，快速产生特定宽度高度示例图
2. 所有图片来源皆为 Unsplash ，採用 CC0 授权方式释出
3. 允许加入参数以随机显示图片或是转为灰阶、模糊效果