Lorem Picsum 線上測試圖產生器,快速插入特定長度、寬度 CC0 圖片

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 尺寸)。

Lorem Picsum

STEP 2

稍微往下捲動網頁後從「Specific Image」找到取得特定圖片的設定方式,也就是在圖片尺寸前面加上一段 ID,點選下方的鏈結可以查看完整圖片列表。

Lorem Picsum

每張圖片都有預覽圖、標題,右下角則是圖片 ID,將需要的 ID 依照 Specific Image 說明加入網址就能在特定位置顯示某張圖片,依照預先設定的圖片尺寸呈現。

Lorem Picsum

STEP 3

首頁還有一個進階用法,例如在一段網址合併、加入多個參數選項(同時使用灰階、模糊效果),或是在瀏覽器存取多張相同尺寸的圖片,加入 random 參數來防止圖片被快取,如果需要副檔名也能直接在網址後面加上 .jpg.webp

Lorem Picsum

STEP 4

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

Lorem Picsum

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

Lorem Picsum

值得一試的三個理由:

  1. Lorem Picsum 線上佔位圖產生器,快速產生特定寬度高度範例圖
  2. 所有圖片來源皆為 Unsplash ,採用 CC0 授權方式釋出
  3. 允許加入參數以隨機顯示圖片或是轉為灰階、模糊效果
分享到...