TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Placekitten – 用網址產生指定尺寸貓咪佔位圖的免費工具
Placekitten 是用網址產生指定尺寸貓咪佔位圖的免費工具，輸入寬度與高度就能取得對應解析度的小貓照片。內容涵蓋使用教學、程式碼整合範例與 CC BY 2.0 授權須知，並整理 2026 年服務現況與仍可用的替代方案。
用 AI 摘要這篇文章：
Placekitten 是一款用網址就能產生指定尺寸貓咪佔位圖的免費工具，只要輸入 placekitten.com/寬/高，瀏覽器就會直接回傳一張對應大小的小貓照片，適合網頁開發與 UI 設計階段快速填入圖片。不過要先提醒：placekitten.com 已從 2024 年 11 月起長期無法連線，到 2026 年 9 月仍然打不開。如果你的舊網頁裡有 placekitten 的圖片網址，現在會顯示破圖；需要新的貓咪佔位圖，可以直接改用文末介紹、目前仍正常運作的替代服務。
定義：Placekitten 是佔位圖片產生器（Placeholder Image Generator），透過 URL 參數指定圖片尺寸，即時回傳一張符合大小的貓咪照片。適用範圍：網頁開發排版測試、UI 設計 Mockup、響應式版面驗證。不適用：尋找正式上線用的主題照片、需要精確構圖控制、或需要穩定不中斷的生產環境引用。
跟 免費圖庫不同，Placekitten 不是讓你挑圖的平台。它的定位是「佔位圖片產生器」：你在 HTML 或 CSS 裡貼一行網址，就自動取得一張符合尺寸的圖片，不需要註冊、搜尋或下載。開發階段拿來測試排版，比一張張找圖快很多。等到版面確認後，再替換成正式素材就好。
{placekitten} – Placeholder kitten images for developers
https://placekitten.com/
目錄
Placekitten 使用教學：產生指定解析度的小貓圖片
Placekitten 的操作只有一個步驟：在網址列輸入寬度和高度。沒有介面要學、沒有帳號要註冊，網站正常時打開瀏覽器就能用。Placekitten 目前長期無法連線，這些網址格式仍是理解舊專案與挑選替代服務的基礎。以下是完整的操作流程：
- 確認圖片尺寸：決定你需要的寬度和高度（單位為像素），例如 400×300。
- 組合網址：將尺寸填入 Placekitten 的 URL 格式。彩色模式：
https://placekitten.com/400/300；灰階模式：https://placekitten.com/g/400/300。 - 貼入程式碼：把網址直接當成 HTML 的
<img src>、CSS 的background-image或 JavaScript 的圖片來源。 - 確認顯示：在瀏覽器中預覽，確認圖片尺寸和排版效果符合預期。
- 正式上線前替換：開發完成後，將 Placekitten 網址替換成真正的圖片素材。
彩色圖片模式使用方式
彩色模式是預設值。直接在網址列輸入：
https://placekitten.com/{寬度}/{高度}
例如需要一張 400×300 的圖片，輸入 https://placekitten.com/400/300，按下 Enter 就會取得一張寬 400 像素、高 300 像素的貓咪照片。寬度在前、高度在後，順序不要搞錯。
Placekitten 對尺寸的支援相當彈性。不管是常見的 1920×1080、手機尺寸 375×812，還是特殊的長條比例如 200×800，都能正常回傳。不過要注意：系統會從較大的原始圖中裁切成你要的尺寸，所以不同參數可能拿到不同構圖範圍的結果。
灰階黑白照片模式
在網址中加入 /g/ 即可取得灰階圖片：
https://placekitten.com/g/{寬度}/{高度}
例如 https://placekitten.com/g/600/400 會回傳一張 600×400 的灰階貓咪照。灰階圖片在做 Wireframe 或極簡風格 Mockup 時很實用，能讓注意力集中在版面結構上，不被色彩干擾。
如果你的專案同時需要正式素材，可以搭配 Freepik 找向量圖和照片並確認授權；Reshot 已停止提供新素材下載，不能再當作現行免費圖片來源。需要亞洲風格的照片時，Pakutaso 是來自日本的高品質圖庫，值得加入書籤。
Placekitten 程式碼整合範例：HTML、CSS 與 JavaScript
Placekitten 最實用的場景，是直接在程式碼裡引用。以下三種常見的整合方式。
HTML img 標籤嵌入方式
把 Placekitten 網址直接當成 src 屬性值：
<img src="https://placekitten.com/600/400" alt="佔位圖片 600x400">
建議加上 alt 屬性，這不只對 SEO 有幫助，也是網頁無障礙設計的基本要求。在開發階段用 alt 標記尺寸，日後替換正式圖片時能快速定位還沒改完的地方。
CSS 背景圖片應用
當成區塊背景圖使用：
.hero-section {
background-image: url('https://placekitten.com/1200/600');
background-size: cover;
background-position: center;
}
測試 Hero Banner 或全版面背景時，可以先不用準備正式圖片。等版面確認無誤，再把 URL 換成真正的圖片路徑。如果你的網站使用 WebP 圖片格式，正式上線時要記得替換成 WebP 格式。
JavaScript 動態載入
需要批次產生不同尺寸的佔位圖時，JavaScript 是最有效率的做法：
function loadPlaceholder(container, width, height) {
const img = document.createElement('img');
img.src = `https://placekitten.com/${width}/${height}`;
img.alt = `佔位圖片 ${width}x${height}`;
container.appendChild(img);
}
這個方式在測試響應式版面或瀑布流排版時特別實用，可以一次產生幾十張不同尺寸的圖片。如果後續需要壓縮正式圖片，Squoosh 是 Google 推出的免費壓縮工具，值得收藏。
Placekitten vs 其他佔位圖片工具比較
Placekitten 不是唯一的佔位圖片服務。開發者社群中有不少類似工具，各有適用場景。以下是幾個主流替代方案：
Lorem Picsum（picsum.photos）提供來自 Unsplash 攝影師的隨機照片，包含風景、人物、物件等多樣內容。使用方式跟 Placekitten 幾乎一樣，還支援灰階、模糊效果和指定圖片 ID 等進階功能。如果你覺得原型上全是貓不太自然，Lorem Picsum 會是更好的選擇。
CATAAS（cataas.com，Cat As A Service）是最接近「貓咪版 Placekitten」的選擇，用 cataas.com/cat?width=300&height=200 的網址格式就能回傳指定尺寸的隨機貓咪照片，2026 年 9 月測試仍正常回應。要注意圖片內容完全隨機、構圖不可控制，適合佔位用途。
Placeholder.com 走純色色塊路線，可以在色塊上顯示尺寸文字。跟客戶溝通版面配置時，清楚標明「這裡會放一張 300×200 的圖」非常實用。
DummyImage 是 Placeholder.com 的進階版，支援 PNG、JPG、GIF、WebP 等格式，提供更細緻的文字和顏色控制。
佔位圖片工具功能比較表格
| 功能 | Placekitten | Lorem Picsum | Placeholder.com | DummyImage |
|---|---|---|---|---|
| 圖片類型 | 貓咪照片 | 多元隨機照片 | 純色色塊 | 純色色塊 |
| 自訂尺寸 | 支援 | 支援 | 支援 | 支援 |
| 灰階模式 | 支援（/g/） | 支援 | 不支援 | 不支援 |
| 自訂顏色 | 不支援 | 不支援 | 支援 | 支援 |
| 自訂文字 | 不支援 | 不支援 | 支援 | 支援 |
| 授權方式 | CC BY 2.0 | 免費使用 | 免費使用 | 免費使用 |
| API 穩定性 | 2024 年 11 月起長期中斷 | 穩定 | 穩定 | 穩定 |
如果你的需求從「佔位圖」延伸到「正式素材」，Pixabay 提供超過百萬筆免費可商用的圖片和影片，Gratisography 有獨特風格的照片，Foodiesfeed 和 SplitShire 也都是品質不錯的免費圖庫。
Placekitten 適合誰，不適合誰
Placekitten 的核心價值是「省時間」。在開發初期，與其花半小時找圖，不如直接貼一行網址搞定。但它也有明確的限制，不是每種情境都適合。
| 適合 | 不適合 |
|---|---|
| 網頁開發階段的佔位圖測試 | 需要特定主題圖片的正式內容 |
| UI 設計的 Wireframe 與 Mockup | 對圖片構圖有精確要求的場景 |
| 響應式版面的快速視覺驗證 | 需要穩定不中斷的生產環境引用 |
| 電子郵件模板的排版測試 | 需要調整飽和度、色調等影像參數 |
| 教學與簡報中的示意圖 | 不想標註來源的正式商用圖片 |
如果你需要對圖片做更多處理，可以搭配 免費線上去背工具 處理正式素材，或用 AI 圖片放大工具 提升解析度。壓縮圖片則可以試試 Compressor.io，支援多種格式的免費壓縮服務。
Placekitten 授權方式：CC BY 2.0 說明
Placekitten 上的圖片採用 CC BY 2.0（Attribution 2.0 Generic）授權條款。這意味著你可以自由複製、散布、修改和商用，唯一條件是必須標註圖片來源。
標註方式沒有嚴格規定，常見做法是在圖片旁加上「Photo by Placekitten」之類的說明，或在網站的版權聲明頁面列出來源。如果你的用途是純粹在開發階段當佔位圖，最終會替換成正式圖片，那其實不太需要擔心授權問題。但如果打算直接在正式上線的網站中使用 Placekitten 圖片，就必須加上來源標示。
CC BY 2.0 與 CC0 授權差異
CC BY 2.0 跟 CC0 是兩種不同的開放授權。CC0 是「公共領域貢獻」，作者放棄所有版權，你可以完全自由使用，不需要署名。CC BY 2.0 雖然同樣允許商業使用和修改，但必須附上來源。
如果你需要完全不用標註來源的免費圖片，可以到 PxHere 這類採用 CC0 授權的圖庫找素材。也可以參考 TechMoon 整理的免費圖庫懶人包，裡面收錄了不同授權方式的圖庫，依照專案需求挑選最適合的。
Placekitten 替代方案推薦
Placekitten 並不是偶爾維修，而是從 2024 年 11 月起就持續無法連線，到 2026 年 9 月都沒有恢復的跡象。新的開發專案建議直接改用替代方案，以下幾個服務都值得收藏。
Lorem Picsum（picsum.photos）是我最推薦的替代方案。它提供來自 Unsplash 的高品質隨機照片，使用方式跟 Placekitten 幾乎一樣，而且還支援灰階、模糊效果和指定圖片 ID。如果你需要「看起來像真正網站內容」的佔位圖，Lorem Picsum 會比全版面的貓咪照片更自然。
Placeholder.com 適合需要精確標示尺寸資訊的場景。它產生的佔位圖是純色色塊加上尺寸文字，跟客戶溝通版面時非常清楚。
DummyImage 提供 Placeholder.com 的所有功能，再加上 PNG、JPG、GIF、WebP 等格式選項和更細緻的文字控制。
如果你的需求已經從「佔位圖」變成「真正要用的素材」，Skitterphoto 和 Hippopx 提供大量 CC0 可商用的免費照片。StockSnap 每週更新新照片，photoAC 來自日本，提供超過三百萬張可商用的圖片素材。如果需要向量插圖，Storyset 可以讓你線上客製化插圖的顏色與物件，直接下載使用。
Placekitten 常見問題 FAQ
Placekitten 是免費的嗎？
是的，它設計上完全免費，不需要註冊帳號、不需要付費、不限制使用次數，直接在瀏覽器輸入帶有尺寸參數的網址就能取得圖片。圖片採用 CC BY 2.0 授權，使用時需要標註來源。不過服務本身目前已長期無法連線，能否順利取圖取決於網站何時恢復。
Placekitten 的圖片可以用於商業用途嗎？
可以。CC BY 2.0 允許商業使用，唯一條件是標註圖片來源。只要做到這一點，不管是在網站、簡報、印刷品還是社群媒體上使用都是合法的。
Placekitten 支援哪些圖片尺寸？
理論上支援任意寬高組合。你在網址中輸入什麼尺寸，就會回傳對應大小的圖片。不過 Placekitten 並不是針對每個尺寸都有原圖，而是從較大的原始圖中裁切，所以構圖可能因為尺寸不同而有差異。
Placekitten 網站無法開啟怎麼辦？
這不是臨時維修：Placekitten 從 2024 年 11 月起就持續無法連線，截至 2026 年 9 月仍未恢復。如果你的頁面裡有 placekitten.com 的圖片網址，畫面會顯示破圖，建議把網址換成 Lorem Picsum（picsum.photos）或 CATAAS 這類仍在運作的服務，用法幾乎相同。
如何在 WordPress 中使用 Placekitten？
先留意服務狀態：Placekitten 目前長期無法連線，貼上網址只會得到破圖，實際使用時請改貼替代服務的網址。做法是在 WordPress 文章編輯器的「圖片區塊」中，選擇「從網址插入圖片」，貼上佔位圖服務的網址即可。如果你是在開發自訂佈景主題，也可以直接在模板檔案中引用。不過正式上線的網站應該使用本機圖片而非外部佔位圖服務，以確保載入速度和穩定性。如果你還沒有適合的 WordPress 主機環境，可以參考 Bluehost 的 WordPress 主機方案，或查看我們整理的WordPress 虛擬主機推薦。圖片壓縮方面，建議搭配 Imagify 這類 WordPress 圖片壓縮外掛，能有效縮短網頁載入時間。
