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 參數來防止圖片被快取，如果需要副檔名也能直接在網址後面加上 .jpg 或 .webp 。

STEP 4

以實際範例來取得一張佔位圖片，將 Lorem Picsum 提供的網址貼上，然後指定顯示的圖片 ID 為 1060 號，需要的圖片尺寸為 3840×2160，網址看起來就像下圖。

透過這段網址就能協助我取得特定主題、尺寸大小的佔位圖。