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

本文要推薦的「Dummy Image」算得上是占位圖片生成器翹楚，Dummy Image 讓開發者在線產生特定尺寸大小、背景色、文字色、文件格式或帶有文字的范例圖，除了利用網頁界面調整各個選項，亦可通過網址進行設定，快速制作出開發或設計版面時會用到的占位圖。

Dummy Image 是一個開放源碼（Open Source）項目，相關信息可在 GitHub 找到，也有不少開發者將它制作成不同程序語言版本。值得一提的是網站收錄許多常見的廣告尺寸、屏幕和影片大小，通過鏈接快速帶入某個你想使用的范圍大小，就能達到預覽效果。

Dummy Image

網站鏈接：https://dummyimage.com/

使用教學

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

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

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

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

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

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

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

值得一試的三個理由：

• 可產生特定尺寸、顏色和格式的占位圖片（Placeholder）
• 利用網址直接調整圖片大小等各項參數
• 提供各種廣告標準尺寸、屏幕和影片尺寸

更多網站推薦：