如何讓網頁在不同的平台有比較好的視覺效果? 於是這幾年出現了一個新名詞-Responsive Web Design , 簡稱RWD, 那麼圖片要如何處理呢, 發現一個很方便的工具

Responsive Image Breakpoints Generator  而且還是 opensource 

這個雲端服務可以將要顯示在網頁的圖片上傳, 然後設定好參數例如圖片要在各種不同裝置顯示的解析度 , 它就會幫你自動縮圖並產生這個影像圖片在不同解析度的檔案, 還有HTML 5的RWD語法, 它處理出來的影像效果還不錯

如果有許多圖片, 也可以利用它的Cloudinary API 做批次處理, 有Ruby, Node.js , PHP, Python的範例

這個雲端服務更詳細的技術解說 – Introducing intelligent responsive image breakpoints solutions 

Cloudinary是一個專門做影像管理的雲端服務, 付費模式可參考 http://cloudinary.com/pricing, 有Free的quota可以測試

Join the conversation! 1 Comment

  1. […] Responsive Image – 自動調適影像在不同裝置的顯示比例產生器 一個做Responsive Web Design(簡稱 ‪#‎RWD‬ )的影像處理輔助工具, 要將影像在不同裝置調整成最佳顯示效果, 這件工作交給這種雲端服務做似乎可以省不少時間 […]

    喜歡

    回覆

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

你正使用 WordPress.com 帳號留言。 登出 / 變更 )

Twitter picture

你正使用 Twitter 帳號留言。 登出 / 變更 )

Facebook照片

你正使用 Facebook 帳號留言。 登出 / 變更 )

Google+ photo

你正使用 Google+ 帳號留言。 登出 / 變更 )

連結到 %s

分類

雲端工具, Web開發