一秒解決網頁暫時性圖片需求!Placehold.co 佔位圖服務全攻略。

開發網站時常需要暫時性的圖片填充版面。Placehold.co 是一個免費、免註冊的線上佔位圖服務,能用極速生成各種尺寸與樣式的測試圖片。

▍ 基本用法:指定尺寸

最直覺的用法,直接在網址後方加上目標尺寸 寬x高:

https://placehold.co/600x400
600x400 佔位圖範例

如果只需要正方形圖片,直接輸入單一數字即可:

https://placehold.co/400
400x400 正方形範例

⚠️ 尺寸限制

最大尺寸:4000 x 4000 px
最小尺寸:10 x 10 px

▍ 進階用法一:自訂顏色

自由指定背景色與文字色,支援 Hex 色碼與 CSS 顏色名稱:

https://placehold.co/600x400/orange/white
自訂橘底白字範例

▍ 進階用法二:自訂文字

使用 ?text= 參數即可修改圖片中央顯示的字樣:

// 字幕空格請用 + 號代替
https://placehold.co/600x400?text=Hello+World
自訂文字範例

▍ 進階用法三:指定格式

系統預設輸出 SVG 格式,亦可手動指定其他主流圖檔格式:

https://placehold.co/600x400/png
https://placehold.co/600x400.png

目前支援格式包括:SVG、PNG、JPEG、GIF、WebP、AVIF。

▍ 進階用法四:Retina 高解析度支援

在尺寸後方加上 @2x 或 @3x,即可生成適用於高密度螢幕的 Retina 圖片:

https://placehold.co/600x400@2x.png
https://placehold.co/800@3x.png

*注意:僅 PNG、JPEG、GIF、WebP 與 AVIF 格式支援 @ 參數,預設的 SVG 格式不支援。

▍ 實際應用範例

整合多項參數的完整示範:

https://placehold.co/680x680/EEE/31343C?text=1926

此代碼將精準生成以下設定的圖片:

  • • 尺寸 680×680 的正方形圖片
  • • 背景色 #EEE(淺灰)
  • • 文字色 #31343C(深灰)
  • • 顯示文字「1926」
整合參數佔位圖範例

▍ 常見使用場景

  • • 網站前端開發:設計初期快速填充尚未到位的圖片版位。
  • • UI 視覺設計稿:製作 Mockup 時提供規格精確的暫時性區塊。
  • • 版面壓力測試:測試多元尺寸圖片在不同裝置下的響應式(RWD)排版效果。
  • • 程式教學示範:提供學生簡潔、無版權疑慮的圖片連結。

💡 核心優勢

完全免費、不需註冊、生成速度極快、全面支援 HTTPS 安全協定,且自訂參數彈性極高。

▍ 常見問題 QA

Q:Placehold.co 佔位圖服務有尺寸限制嗎?

有的。Placehold.co 生成圖片的最大尺寸限制為 4000 x 4000 px,最小尺寸限制則為 10 x 10 px。

Q:Placehold.co 支援哪些圖片輸出格式?

預設格式為 SVG。另外也完整支援 PNG、JPEG、GIF、WebP 以及 AVIF 等常見圖片格式。

Q:哪些圖片格式支援 Retina 高解析度顯示?

只有 PNG、JPEG、GIF、WebP 和 AVIF 格式支援在網址後方加上 @2x 或 @3x 來生成高解析度圖片,預設的 SVG 格式則不適用。

文章分享