Dummy Image 假圖產生器，以網址快速載入各種尺寸顏色圖片

在設計網頁或是配置版面時經常會需要預先保留圖片位置，讓開發或示範時使畫面更接近最終樣貌，如果手邊的圖片還沒處理，我們可以透過佔位圖片（Placeholder）呈現出特定大小的圖片範圍。簡單來說，佔位圖片產生器利用網址直接調整、產生特定尺寸範例圖，省去必須自行裁切圖片的麻煩，因為是以網址形式載入圖片，即使沒有下載圖片依然能在網頁上顯示，我曾介紹過的 Unsplash It、Placekitten、Placemat 和 PlaceKeanu 都是類似應用。

本文要推薦的「Dummy Image」算得上是佔位圖片產生器翹楚，我在大約十年前有提到這個服務，Dummy Image 讓開發者線上產生特定尺寸大小、背景色、文字色、檔案格式或帶有文字的範例圖，除了利用網頁介面調整各個選項，亦可透過網址進行設定，快速製作出開發或設計版面時會用到的佔位圖。

Dummy Image 是一個開放原始碼（Open Source）專案，相關資訊可在 GitHub 找到，也有不少開發者將它製作成不同程式語言版本。值得一提的是網站收錄許多常見的廣告尺寸、螢幕和影片大小，透過連結快速帶入某個你想使用的範圍大小，就能達到預覽效果。

Dummy Image
https://dummyimage.com/

使用教學

STEP 1

開啟 Dynamic Dummy Image Generator 佔位圖產生器後，會有一個預先顯示的佔位圖，從下方選項調整圖片尺寸、背景顏色和前景文字顏色，格式部分有 png、gif 和 jpg 三種格式，可以將圖片保存後使用，或是利用圖片下的網址來插入圖片。

STEP 2

預設情況下 Dummy Image 會在圖片裡標示尺寸大小，如果想要顯示其他文字，也可以直接輸入在下方「Text」欄位（這裡可正常顯示中文），文字就會呈現出來，很適合用來對於圖片位置標記命名。

STEP 3

透過 Dummy Image 就能快速產生特定尺寸大小的佔位圖片。

STEP 4

如果在開發網頁或應用程式時想要預留廣告欄位，測試一下廣告放進頁面後的效果，從 Dummy Image 網站就能找到各種標準廣告尺寸（像是常見的 300×250、336×280、468×60 或 728×90 等等），點選廣告名稱就能取得該大小的佔位圖或是直接複製鏈結使用。

其他還有像是標準的螢幕尺寸、影片大小都能找到對應的佔位圖。

其實 Dummy Image 所有功能都可以透過網址進行設定，舉例來說，網址後方接上的第一個數值是圖片寬度，使用單一數字會產生該長度的正方形，直接輸入像是 640×480 產生特定尺寸的佔位圖；第二和第三個數值分別代表背景色和文字顏色，使用 hex 數值指定色碼。

其他還有設定圖片格式、自訂文字等等用法，有興趣的話可參考網站說明文件。