Placehold.it 範例圖片產生器,以網址快速調用任何尺寸的圖片

Placehold.it

設計網頁時常常需要找寬度、長度合適的圖片來填充區塊,或是測試不同大小圖片的表現。這往往可能浪費很多時間,甚至還要自己動手製作某些特殊尺寸的圖片,相當麻煩。透過方便的線上工具Placehold.it ,可以快速產生任何大小的佔位圖片,且能自訂圖片的格式、顯示的文字、顏色等等。

2010-08-21-[2]

 

舉例來說,Placehold.it 首頁左側就提供了最基本的使用方式,直接在 https://placehold.it/ 後面填上你要的圖片尺寸,例如 https://placehold.it/350×150 ,然後以 <img > 標籤來將圖片貼入網頁,就能夠自動生成 350×150 的圖片。

 

變更圖片格式:

在 Placehold.it 預設的圖片格式為 gif, 如果你想要使用 .jpeg / .jpg / .png 等圖片格式的話,僅需要在網址後面加上副檔名,例如 https://placehold.it/350×150.png ,這樣就能夠產生 png 格式的佔位圖。

 

變更圖片文字:

預設的圖片內顯示的是圖片尺寸,不過你可以將它設定為其他文字(不支援中文),目前僅能使用大、小寫的 A-z 、數字及大部分的符號,使用的方法很簡單,只要在網址內加上 &text= 後面接入文字就可以了,例如:https://placehold.it/336×280&text=FreeGroup.org+Cool!

 

設定圖片背景、文字顏色:

預設圖片使用灰色色系,如果你有需要將圖片的背景、文字顏色做變更,只要在網址後面分別加入背景及文字顏色的 hex codes 即可(#ffffff 是白色),例如:https://placehold.it/250/000000/ffffff  (前面被景色、後面文字顏色)。

 

快速產生正方形圖片:

Placehold.it 圖片高度是選用的。如果你直接在網址後面加入一個數值,例如 https://placehold.it/100 ,那麼就會產生一個 100×100 的正方形圖片,非常簡單。

 

這個服務真的非常的方便且實用,尤其對於常常製作網頁的朋友來說,省去找範例圖片的麻煩,而且 Placehold.it 也幫你處理了圖片儲存的問題,甚至不用自己上傳、儲存圖片,直接從遠端以網址調用圖片就能使用。

網址:https://placehold.it/

 

補充

Dummyimage

如果你覺得 Placehold.it 不夠直覺、簡單的話,那麼可以試試看 Dummyimage, 它一樣是個佔位圖片產生器,不過可以設定要產生的圖片尺寸、背景顏色、文字顏色、檔案格式及顯示的文字,使用上較 Placehold.it 簡單一些。

網址:https://dummyimage.com/

分享到...