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

本文要推薦的「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 數值指定色碼。

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

值得一試的三個理由:

  1. 可產生特定尺寸、顏色和格式的佔位圖片(Placeholder)
  2. 利用網址直接調整圖片大小等各項參數
  3. 提供各種廣告標準尺寸、螢幕和影片尺寸