《Sencha.io》讓圖片也支援RWD,隨著裝置解析自動產生圖片尺寸

梅問題-免費資源-《Sencha.io》讓圖片也支援RWD隨著解析自動產生圖片的尺寸
  自從智慧型手機的普及與3G網路的平價化,現在只要一隻手機在手,就能找餐聽、導航、上網....等,這也改變了整個網頁的生態,以前只要把桌機版顧好就好,現在除了把桌機版顧好外,還要連同手機版也一併考量進去,雖然說目前用手機閱讀網頁的比例不及電腦,但也快速的持續增長中,因此絕不容忽視手機版網頁的需求。
  就目前來說為了讓網頁能符合各種裝置的尺寸來縮放,最常被運用的技術就是目前正夯的RWD自適應的網頁,同時最被廣為使用RWD自適應的CSS Framework,那就是由Twitter公司所研發的Bootstrap,而它之所以會這麼紅,主要是簡單好用,縮短了網頁的製作時間,雖然說Bootstrap能快速的將網頁製作成自適應網頁,且圖片也能跟著螢幕解析一起縮放,但其實那圖片都是依桌機圖片尺寸的為主,所以當在手機瀏覽網頁時,所載入圖片一點也不會變快,所以最近有個新的網站服務平台,能隨著裝置解析產生不同的影像尺寸,如此一來當用手機瀏覽網頁時,就能以小尺寸載入,如此一來就能加速網站的讀取速度啦!且相當的簡單好用喔!至於怎麼用現在就一塊來看看吧!
圖片自適應線上產生平台:
網站名稱:Sencha.io
網站連結:http://src.sencha.io/

Step1
其實用法很簡單,只要http://src.sencha.io/加上圖片的路徑位置,就OK啦!
梅問題-免費資源-《Sencha.io》讓圖片也支援RWD隨著解析自動產生圖片的尺寸
Step2
這時就會立即產生一份圖片,並暫存在它們的主機中,因此各位可把它當成CDN來使用。
梅問題-免費資源-《Sencha.io》讓圖片也支援RWD隨著解析自動產生圖片的尺寸
Step3
除此之外,若要設定圖片大小,只要在二個網址間輸入要縮放的尺寸大小即可。
梅問題-免費資源-《Sencha.io》讓圖片也支援RWD隨著解析自動產生圖片的尺寸
Step4
過一回立即就會依所設定的尺寸大小,產生出等比縮放的影像尺寸,因此當手機讀取時,就會以小檔來讀取,這樣才會加快網站的讀取速度。
梅問題-免費資源-《Sencha.io》讓圖片也支援RWD隨著解析自動產生圖片的尺寸
Step5
可看到壓縮後的檔案小很多,同時影像的壓縮品質相當的不錯,因此有在製作自適應或手機版網頁的朋友,這個平台絕不容錯過喔!
梅問題-免費資源-《Sencha.io》讓圖片也支援RWD隨著解析自動產生圖片的尺寸
[範例預覽]

相關文章

「HTML5 UP」高品質、可商用的RWD自適應網頁版型免費下載

「HTML5 UP」高品質、可商用的RWD自適應網頁版型免費下載

「Bestofthemes」RWD自適應網頁版型大集合,一塊來挖寶吧!

「Bestofthemes」RWD自適應網頁版型大集合,一塊來挖寶吧!

「The Noun Project」免費向量圖示搜尋器,可將圖示拖曳到繪圖軟體中

「The Noun Project」免費向量圖示搜尋器,可將圖示拖曳到繪圖軟體中

「Convertio」線上萬用一鍵轉檔平台,支援「文件、影音、圖片」

「Convertio」線上萬用一鍵轉檔平台,支援「文件、影音、圖片」

「DaVinci Resolve 達文西」國內外電影公司最愛的專業剪輯軟體免費下載

「DaVinci Resolve 達文西」國內外電影公司最愛的專業剪輯軟體免費下載





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 3 梅留言

  • 第3梅
    O 說道:

    Error: EMFILE, open ‘/var/app/current/public/index.html’

    看來不能用囉 @@

    回應:
    剛看了一下,好像目前似乎無法使用了
  • 第2梅
    英倫月子中心 說道:

    正在找自適應相關文章這個真是太好了,謝謝

  • 第1梅
    莊子 說道:

    這個提供縮圖服務的會不會有天突然不能用了呢?

    回應:
    確實會有此可能,所以梅干也還在找是否有自已架設的方法