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

如果說到最喜愛的好萊塢演員,我想很多人可能會回答基努李維(Keanu Reeves),小時候第一次看《捍衛戰警》令人記憶猶新,還有後來經典《駭客任務》系列和《康斯坦汀:驅魔神探》等電影,這幾年掀起一波 John Wick 熱潮,我最近也在 Apple TV 上重溫最早的前兩集,雖然是一部浮誇的電影,但不得不說這個角色太適合他。
Unsample 免費範例圖產生器,一鍵下載打包 Unsplash 圖庫指定大小相片
Unsplash 可能是目前全世界最大的免費圖庫,不只有成千上萬、數量龐大的高畫質相片供使用者免費下載,更重要的是為開發者提供 Unsplash API 用於串接這個超大型圖庫(在寫這篇文章時已有 23 萬張 CC0 相片素材),直接讓你取用網站資源。有越來越多的第三方服務或應用程式倚賴 Unsplash 而生,事實上開放不見得是壞事,不重複造輪子也是一個相對省力的方法,網站上提供的相片可作為任何用途,避免誤用到可能會有版權爭議的素材。
Placemat 漂亮的佔位圖片產生器,開發網頁快速嵌入特定尺寸範例圖片
Unsplash It 直接取用免費圖庫相片素材,產生網頁設計、開發應用程式用的特定大小佔位圖片
之前寫過一篇「Unsplash 高解析度免費圖庫素材,適用於個人或商業專案」介紹,不知道大家還記得嗎?這是我平常找圖片時固定會用的免費圖庫,而本文要介紹的 Unsplash It 網站跟免費圖片有一點關係,不過它不是圖庫,而是結合 Unsplash 的佔位圖片產生器,也就是能產生範例圖片、用於網站或應用程式開發的免費服務。
Placekitten 產生特定大小的小貓範例圖片,製作網頁、平面設計師適用!
對於製作網頁或平面設計師來說,當主要的圖片尚未放入時,仍需要先使用範例圖片來填充某些區塊,這在英文稱為 Placeholder,意思就是佔用某個範圍的意思,不過若要自行製作特定大小的圖片也太費時間,先前我介紹過可以透過修改網址,產生特定大小範例圖片的服務,例如 Fake Images Please 或是 Placehold.it,都可以利用一行鏈結來產生圖片,如果你覺得這些服務產生的圖片太過呆板,可以使用本文要介紹的 Placekitten,它能依照你的需要,產生特定尺寸的小貓圖。