1. 程式人生 > >Web效能優化系列:藉助響應式圖片來改進網站圖片顯示

Web效能優化系列:藉助響應式圖片來改進網站圖片顯示

開始使用 <picture> 元素

響應式網頁設計太棒了,它改變了我們向手機端使用者呈現內容的方式,無論使用者使用何種尺寸的手機,我們都能夠為其提供定製化的體驗。響應式網頁設計使用起來很靈活,也容易上手。然而,如果沒有正確使用,它會對網頁效能帶來負面影響。

用於在 PC 端展示的圖片對於手機來說太大了。我們知道,在手機裝置上大尺寸高解析度的圖片會大大降低頁面載入效能。響應式設計和非固定圖片(fluid image)在保證正確顯示的同時,也保證大圖片在頁面顯示的效能大大提高。Tim Kaldec 對響應式圖片的研究表明,使用響應式圖片策略最多可以減少圖片72%的負擔。72%,這是一個相當大的數量。

過去這些年裡,出現了一些響應式圖片解決方案,開發人員也習慣了使用這些方案來解決響應式圖片問題。但都現在看來,這些方法都有一點hacky的味道。這就是 <picture> 元素被引入的原因。

<picture> 元素作為一種向不同裝置輸出高效能圖片資料的客戶端解決方案,目前已經納入 WHATWG HTML 規範 。為了向大家展示 <picture> 元素的強大,我們一起來看一個簡單的例子。

XHTML
1234567 <picture><source media="(min-width: 1024px)"srcset="dest/1024/tiger.jpg"><source media="(min-width: 640px)"srcset="dest/640/tiger.jpg"><source srcset="dest/320/tiger.jpg"><img src="dest/640/tiger.jpg"alt="This picture will load on browsers that don't yet support the element."
><p>This is some accessible text.</p></picture>

瀏覽器在解析上面的 HTML 語句時會根據裝置的螢幕解析度來選取大小最合適的圖片。點選這個連結觀看實際效果。

從上面的 HTML 程式碼可以看到, <picture> 元素由一組 <source> 標籤組成。<source> 標籤裡面聲明瞭裝置的視口(viewport)寬度以及與之相應尺寸的圖片。這樣不同裝置上的瀏覽器就可以根據這些資訊選取最適合的圖片源。這是一個出色的解決方案,因為所有的操作都是在客戶端完成,開發者對展現給使用者的圖片具有控制權。

值得一提的是,通過設定 <img> 標籤的 srcset 屬性和 size 屬性也可以達到相同的效果。這兩個屬性由 <img> 標籤和 <source> 標籤擴充套件而來,提供一系列圖片資源和相應的圖片大小。瀏覽器根據這些資訊來選取最合適的圖片。假如你不考慮圖片的藝術美感,可以使用這種方法。

XHTML
123 <img src="dest/320/tiger.jpg"srcset="dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w"alt="A TIGER!!!">

如果你還想了解更多關於 <picture> 元素的歷史和起源,推薦你讀這篇文章

處理圖片

<picture> 元素在網頁效能上效果顯著,同時也給我們帶來很大的便利,問題是,我們怎樣去生產這些不同大小的圖片呢?假如你需要多份不同的圖片,怎樣得到這些圖片呢?慶幸的是,有一種簡單的方法可以解決這個問題。

使用 Grunt 響應式圖片外掛可以自動處理、剪裁圖片。假如你對 Grunt 任務不熟,也不知道怎樣將它引用到你的工程,請參考我之前發表的這篇博文Grunt 官網也提供了非常好的教學資源幫助你立刻開始使用它。

npm install grunt-responsive-images –save-dev

配置好 Grunt ,並且保證它能在你機器上執行之後,開啟你的網站,在命令列裡輸入以下命令來下載相應的包。

npm install grunt-responsive-images –save-dev

接下來你還需要安裝 ImageMagick 或 GraphicsMagick 命令列工具,然後配置 gruntfile.js 檔案。下面是一個引數配置例子,有很多配置選項,可以根據實際需求設定不同的引數。

XHTML
1234567891011121314151617181920212223242526 grunt.initConfig({responsive_images:{myTask:{options:{sizes:[{width:320,height:240},{name:'large',width:640},{name:"large",width:1024,suffix:"_x2",quality:60}]},files:[{expand:true,src:['assets/**.{jpg,gif,png}'],cwd:'test/',dest:'tmp/'}]}},})

通過上面的引數設定,圖片將生成 320 畫素, 630 畫素和 1024 畫素的圖片,每種畫素的圖片將放在不同的目錄裡。

現在,可以處理圖片了。在命令列中執行 Grunt 命令,這個時候,可以看到目錄下會新增加三個目錄,每個目錄中已經存在裁剪好了的圖片! Hooray !

如果還在想什麼工具可以自動幫助你生成相關的 HTML 標籤的話,這個 Grunt 外掛能替你做這些苦差事。把這個外掛和 Grunt responsive images 外掛結合起來用,會給你帶來更多意外驚喜。

OLDER BROWSERS

關注瀏覽器的新特性的同時,也要兼顧到老版本的瀏覽器。目前,只有 Chrome 38 和 Opera 支援 <picture> 元素。好訊息是, <picture> 元素已經正式被 WHAT working group 接受,逐漸所有現代瀏覽器都會支援這個標籤。通過 caniuse.com 可以查到,你喜歡的瀏覽器現在是不是支援它。

幸好,現在有一個外掛可以解決大部分傳統瀏覽器不支援 <picture> 元素的問題。 Filament Group 的團隊開發出 picturefill.js 這個檔案,這個外掛可以使不支援 <picture> 元素的瀏覽器解析這個標籤以及標籤相關的屬性。這意味著,你今天就可以開始使用 <picture> 元素了!

要使用這個外掛,你需要在你的頁面中新增這個 JavaScript 檔案。

XHTML
123456789101112 <picture><source media="(min-width: 1024px)"srcset="dest/1024/tiger.jpg"><source media="(min-width: 640px)"srcset="dest/640/tiger.jpg"><source srcset="dest/320/tiger.jpg"><img src="dest/640/tiger.jpg"alt="This picture loads on non-supporting browsers."><p>Accessible text.</p></picture><script>// Picture element HTML5 shiv for older browsersdocument.createElement("picture");</script><script src="picturefill.min.js"async></script>

再補充一句,這個外掛和 picture 標籤的功能是一樣的。點選這個連結可以看到例項效果。在 Responsive Images Community Group 網站上還有很多例子

附註

我第一次使用 picture 標籤的時候,出現了這個錯誤:

“<source src> with a <picture> parent is invalid and therefore ignored. Please use <source srcset> instead.”

這次錯誤提示資訊非常明確,在引用圖片資源時不要使用 src 標籤,使用 srcset 標籤就可以了。