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

開始使用 元素

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

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

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

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

This is some accessible text.

瀏覽器在解析上面的 HTML 陳述句時會根據裝置的螢幕解析度來選取大小最合適的圖片。

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

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

srcset=”dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w”

alt=”A TIGER!!!”>

如果你還想瞭解更多關於 元素的歷史和起源，推薦你讀這篇文章。

處理圖片

元素在網頁效能上效果顯著，同時也給我們帶來很大的便利，問題是，我們怎樣去生產這些不同大小的圖片呢？假如你需要多份不同的圖片，怎樣得到這些圖片呢？慶幸的是，有一種簡單的方法可以解決這個問題。使用 Grunt 響應式圖片外掛可以自動處理、剪裁圖片。假如你對 Grunt 任務不熟，也不知道怎樣將它取用到你的工程，請參考我之前發表的這篇博文。 Grunt 官網也提供了非常好的教學資源幫助你立刻開始使用它。

npm install grunt-responsive-images –save-dev

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

npm install grunt-responsive-images –save-dev

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

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 支援 元素。好訊息是， 元素已經正式被 WHAT working group 接受，逐漸所有現代瀏覽器都會支援這個標簽。透過 caniuse.com 可以查到，你喜歡的瀏覽器現在是不是支援它。

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

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

Accessible text.

// Picture element HTML5 shiv for older browsers

document.createElement( "picture" );