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

最後更新於 2020 年 07 月 07 日

在設計網頁或是配置版面時經常會需要預先保留圖片位置,讓開發或示範時使畫面更接近最終樣貌,如果手邊的圖片還沒處理,我們可以透過佔位圖片(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. 提供各種廣告標準尺寸、螢幕和影片尺寸

 

相關的文章

Image Picker 從任何網頁快速下載圖片,一鍵列出所有圖片尺寸和格式(Chrome 擴充功能)

大家都知道要取得網頁上的圖片非常簡單,只要在圖片按右鍵另存圖片即可,但有時候會遇到一些問題,例如無法儲存圖檔(最常出現在網站 Logo),或是網頁鎖右鍵無法直接下載圖片,除了可以從原始碼去找到圖片路徑,也能透過下載器協助找到圖片,例如之前介紹過的 Image Cyborg 可批次下載網頁所有圖片,或是 Imageye 這類的瀏覽器外掛都有相同效果。

AI Image Enlarger 以人工智慧無損放大圖片不失真,只要三個步驟

這幾年熱門的「機器學習」(Machine Learning)讓程式可以做更多我們以前沒想過的事,例如之前介紹過 remove.bg 自動化免費線上去背工具,能在上傳圖片後五秒鐘將背景去除,只留下人像部分;或是新加坡技術部門推出 ColouriseSG 為黑白老照片自動上色,讓原本沒有色彩的相片也能套用符合當時時空背景的色彩,這些都是透過大量相片去訓練神經網路的成果,如果機器學習時間越長、樣本數越多,就能讓處理的結果更為準確。

Image Resizer 線上將圖片裁切調整為社群平台最佳圖片尺寸

雖然大部分的社群網站或廣告平台都有自動裁切圖片、轉為特定大小的功能,但很可能效果不彰,例如縮圖影響圖片解析度,或是在預覽圖顯示不對的位置,這是很微小的問題卻會影響圖片成效。如果希望在圖片部分有更好的呈現,那在上傳前就必須先圖片設定為建議尺寸,或是自行手動裁切,若你平常會需要經營各種社群網站,我想接下來要介紹的服務你一定會用到。

回應