圖片響應式與優化

圖片的響應式的純 html 實現能夠藉助 srcset 和 sizes 屬性以及 <picture> 元素來實現。
並且觀察Chrome開發者工具的 Network項能夠發現，任什麼時候候當屏幕變化的時候，若是匹配到新的規則須要的圖片改變了的話，瀏覽器會去加載須要的圖片。

demo

srcset 和 sizes 屬性

srcset 屬性接受一個或多個 image candidate string，每一個值之間用逗號隔開。
image candidate string 由圖片地址和 零個或多個 width descriptor（非零數字後跟一個小寫的w） 和 pixel density descriptor（非零數字後更一個小寫的x） 組成。具體構成見如下引用：

An image candidate string consists of the following components, in
order, with the further restrictions described below this list:

1. Zero or more space characters.

2. A valid non-empty URL that does not start or end with a U+002C COMMA character (,), referencing a non-interactive, optionally
   animated, image resource that is neither paged nor scripted.

3. Zero or more space characters.

4. Zero or one of the following:

• A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing

1. width descriptor value, and a U+0077 LATIN SMALL LETTER W

character.

• A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero

1. the pixel density descriptor value, and a U+0078 LATIN

SMALL LETTER X character.

1. Zero or more space characters.

---

• 一個元素的兩個 image candidate string 不能有相同的寬度描述符

• 一個元素的兩個 image candidate string 不能有相同的像素密度描述符，爲這個要求起見，沒有描述符的 image candidate string 默認指定一個 1x 描述符

• 一個元素的 image candidate string 指定了寬度描述符，則它全部其餘的 image candidate string 也必須指定寬度描述符

• 有 sizes 屬性的元素，它全部的 image candidate string 都必須有寬度描述符

還有個這什麼玩意兒：

The specified width in an image candidate string's width descriptor must match the intrinsic width in the resource given by the image candidate string's URL, if it has an intrinsic width.

srcset

使用 srcset，瀏覽器自動選擇哪個圖片是最適合的。
Mat Marquis 給出了一個例子：
你有一個寬度爲 320px 像素密度爲 1x 的設備，選擇有3張圖片，分別爲 small.jpg (500px wide), medium.jpg (1000px wide), and large.jpg (2000px wide)。
瀏覽器會計算：

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

而後選擇和你的設備的像素密度最近的圖片，本例中爲 small.jpg

sizes

舉例說明：sizes="100vw" 意味着我假定這個圖片將會佔據整個 viewport。.
也能夠配合媒體查詢使用 例如 sizes="(min-width: 800px) 50vw, 100vw"，意味着若是瀏覽器窗口寬度大於 800px 那麼這個圖片可能會佔據一半的寬度，若是小於 800px的話，可能會佔據所有寬度。

---

不建議使用：

That can get a little complicated and honestly it might be a little dangerous because you're putting CSS stuff in markup and you know how that goes. Eric Portis just wrote about this. Ideally it can be automated or injected server-side.

picture 元素

一個用來爲包含在其中的特定的 <img> 元素指定多個 <source> 元素的容器。瀏覽器會根據當前的頁面佈局（顯示圖片的 box 的限制）以及將被顯示在的設備來選擇最適合的來源。
最後的 <img> 標籤是必須的，並且做爲 "fallback"

1. 經過指定 media 屬性

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

若是媒體查詢評估失敗，該 <source> 被跳過

1. 根據 type 屬性

<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

瀏覽器會跳過不支持的類型

webp 圖片格式

Filename extension: .webp
Internet media type: image/webp

---

兼容性

檢測瀏覽器是否支持 webp

http://stackoverflow.com/questions/5573096/detecting-webp-support

參考：

https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
http://stackoverflow.com/questions/5573096/detecting-webp-support
http://webpjs.appspot.com/without-webpjs-support.html