Lorem Picsum 假圖產生器：AI Vibe Coding 開發必備的佔位圖神器

用 AI 寫網頁原型的時候，最常卡在「圖還沒做」這件事。版面切好了，AI 也產出了完整的 HTML 結構，但 <img src=""> 裡面該放什麼？臨時找 stock 圖怕版權問題，自己手刻又拖累節奏，把 demo 留白看起來又很空。Lorem Picsum 就是專門解這個的——一條 URL 就能拿到一張合法可用的佔位圖。

Lorem Picsum 是什麼？為什麼比其他佔位圖好用

Lorem Picsum 的英文標語是 “The Lorem Ipsum for photos”，把 Lorem Ipsum 那種「假文字」的概念移植到圖片上。和傳統的灰底色塊（例如 placeholder.com）相比，它直接給你一張真實的攝影照片，視覺上更貼近實際成品，客戶看 demo 的時候不會覺得「整頁都是灰格子」。

關鍵特色：

• 完全免費，無需註冊
• 圖片授權為 Unsplash License，商用、修改、demo 都沒問題
• URL 即圖，不用下載到本機
• 支援指定尺寸、隨機 seed、灰階、模糊等參數
• 同時提供 JPG 與 WebP 格式

URL 用法整理

基本尺寸

最簡單的用法就是把寬高接在 URL 後面，每次重新整理會拿到不同的隨機圖：

<!-- 600 x 400 隨機圖 -->
<img src="https://picsum.photos/600/400" alt="">

<!-- 正方形 300 x 300 -->
<img src="https://picsum.photos/300" alt="">

鎖定同一張圖（避免重整就換）

如果是要做正式 demo，不希望每次重整圖片就跳掉，用 seed 路徑可以鎖定。seed 可以是任意字串，相同 seed 永遠拿到同一張圖：

<!-- 用 seed 鎖定 -->
<img src="https://picsum.photos/seed/article01/800/600" alt="">
<img src="https://picsum.photos/seed/article02/800/600" alt="">
<img src="https://picsum.photos/seed/article03/800/600" alt="">

特效參數：灰階與模糊

如果版面風格是黑白調或想做背景模糊圖，加上 query string 就能套用：

<!-- 黑白圖 -->
<img src="https://picsum.photos/600/400?grayscale" alt="">

<!-- 模糊圖（1-10 級）-->
<img src="https://picsum.photos/600/400?blur=5" alt="">

<!-- 黑白 + 模糊組合 -->
<img src="https://picsum.photos/600/400?grayscale&blur=3" alt="">

AI Vibe Coding 的關鍵用法

這才是 Lorem Picsum 在 2026 年真正爆紅的原因。用 AI 寫網頁的時候，AI 通常會自己編一些 <img src="image1.jpg"> 之類根本不存在的路徑，預覽出來全部破圖。解法很簡單：給 AI prompt 的時候多加一句指令。

這樣 AI 產出來的程式碼會自帶可用的圖片 URL，瀏覽器一開就有畫面，不用再回頭補圖。對於做 landing page 原型、wireframe、教學範例特別有效。

<!-- AI 套用後的成品大概長這樣 -->
<section class="hero">
  <img src="https://picsum.photos/seed/hero/1920/800" alt="hero">
</section>

<div class="card-list">
  <img src="https://picsum.photos/seed/card1/400/300" alt="">
  <img src="https://picsum.photos/seed/card2/400/300" alt="">
  <img src="https://picsum.photos/seed/card3/400/300" alt="">
</div>

踩坑提醒與實務建議

正式上線前一定要替換成真實圖片

Lorem Picsum 是給開發階段用的，正式上線後直接打 Picsum 的服務有幾個問題：對方主機掛掉就連帶你的站破圖、圖片內容會被 SEO 視為非原創內容、Core Web Vitals 的 LCP 也會被外部請求拖慢。記得交件前用全文搜尋找一遍 picsum.photos，全部替換成正式素材。

同一個尺寸要不同圖時，seed 比 random 穩定

如果你想在頁面上放 3 張同尺寸但不同內容的圖，常見的錯誤是直接用 ?random=1、?random=2，這樣每次重新整理還是可能拿到一樣的圖。改用 seed 路徑可以保證三張永遠不同：/seed/a/400/300、/seed/b/400/300、/seed/c/400/300。

WordPress 後台貼圖要走 URL，不要下載再上傳

在 WordPress 寫 demo 文章的時候，圖片直接以 URL 形式貼到內容裡（古典編輯器或 Gutenberg 的 HTML 區塊），不要把圖下載再上傳到媒體庫。下載再上傳會把這張隨機圖永久留在你的伺服器上，反而失去 Picsum 「即拋即用」的優勢，而且每張都會多佔一筆媒體庫紀錄。

輸出 WebP 加速載入

URL 最後加 .webp 可以指定輸出 WebP 格式，檔案大小通常比 JPG 小 30% 左右。寫 demo 預覽會更順：

<img src="https://picsum.photos/600/400.webp" alt="">

替代方案：完全離線的 placeholder

如果開發環境不能連外網（內部系統、客戶機房），可以改用 placehold.co 系列產生純色塊圖，或自架一個簡單的圖片代理服務。但純色塊看起來和真實成品差距大，做給非工程師的客戶看會被退稿，所以一般情況還是首選 Picsum。