zoom教室下載
文、菜鳥編
網頁設計時，為了讓腦板能用很視覺的方式判斷，我們經常會使用一些範例圖片與文字來呈現。或者前端網頁人員，需要將版型中圖片的位子讓設計人員清楚，這時就需要使用到佔位圖片。
而佔位圖片產生器就是透過第三方服務，就能從服務端所提供圖片的網址中，自由的指定尺寸，在瀏覽器上就可立即呈現，減少設計人員還需要下載圖片、裁切等動作。
以下圖沒有使用佔位圖片來說，就先需要在切板時，使用div區塊將圖片位置呈現出來(灰色部分)。
而使用佔位圖片，不僅可節省許多沒必要的編碼產出，對於後續替換也較為方便。今天就來介紹給大家四款好用的佔位圖片產生器，就請看官自行取用。
網站一
名稱：Placeholder.com
介紹：可自訂文字、背景顏色與文本內容。
進到頁面後，就可看到使用說明，”http://via.placeholder.com/350x150”中的數字就代表寬x高，寬度是必要的，但如果只寫一個就會等於是正方形的圖片。
網頁下方中也提供了其他的樣式。
這邊特別提一下顏色的設定，以下圖範例而言，網址後面的數字就是一開始所提到的尺寸，而第二個區塊就是背景顏色，最後才是文字顏色，不過也不用特別去記，自行設定完成就會知道一二了。
網站二
名稱：Fake images please。
介紹：與Placeholder相似，差別在於顏色的明暗以及字體。
以下面來說，分別說明：
區塊1：只設定寬與高，如網頁上的範例「<img src="http://fakeimg.pl/250x100/">」。
區塊2：設定背景與文字顏色，如網頁上的範例「<img src="http://fakeimg.pl/350x200/ff0000/000">」。
區塊3：自訂顯示的文字，如網頁上的範例「<img src="http://fakeimg.pl/350x200/?text=Hello">」。
區塊4：網頁中的範例，網址後方的參數都可以互相搭配使用。
網站三
名稱：unsplash.it。
介紹：提供了1,000張以上的圖片挑選，可設定圖片黑白、模糊化。
網站也提供了圖片隨機，只需要在圖片連結後方加上「?random」。
以下圖來說，區塊1中加上了「/g/」讓圖片黑白化，而區塊2就是使用「?gravity」設定圖片位置。
如果想要看有提供那些圖片挑選，可點選連結查看。
網站四
名稱：placem.at。
介紹：算是結合了前三者及一身，只是圖片樣式無法挑選。
在首頁這張圖就可以很明確知道，除了提供圖片外，還可自訂顯示文字。
網站圖片提供的方式有people(人物)、places(地方)、things(事物)，只要在專屬網址「https://placem.at/」後方加上關鍵字即可。
設定的方式都與前面相似，這邊就不在多作說明。
結論：
提供佔位圖片服務的網站，不外乎就是專屬網址後面提供參數設定，但各有優缺點，可以考量自己工作狀況，哪一種適合可以一次呈現出所需要圖片資料，可以省下設計人員查看編碼與往來的時間。當然，如果有提供更好的網站，也可以推薦給大家喔！
