[譯] 剖析responsive image

之因此會翻譯這篇文章是由於我昨天看到@勾三股四的這篇微博，裏面推薦的文章就是下面我要翻譯的。由於本身一直對響應式圖片這個技術很關注，可是一直沒有一個很好的總結機會，今天趁着翻譯這篇文章總結了，這是本人翻譯的第一篇文章，有錯誤的地方請指出。

博客地址 歡迎關注

原文地址

剖析responsive image

最近對responsive image有一些感悟而後趕忙記下來省得忘了。下面就是個人感悟：

尺寸固定，不一樣屏幕密度

若是你是用像素來固定圖片尺寸,又想在不一樣屏幕密度屏幕上實現響應式圖片，能夠這樣：

<img width="320" height="213"
    src="cat.jpg"
    srcset="cat-2x.jpg 2x,cat-3x.jpg 3x">

它能夠正常運行在全部現代瀏覽器上，並且在不支持srcset的瀏覽器也能夠降級到src。

有一些規則是上面圖片所沒有提到的:

• srcset裏的每一項都是<url> <density>x結構 ,就像cat-2x.jpg 2x

• srcset裏項目的順序並不重要

• 若是你沒有聲明width/height，瀏覽器會按照屏幕密度展現它自己原始的width/height。 好比2x資源被匹配到了，它會被渲染成自己的 50%width和 50%height

• 提示一下，若是在3x設備像素比的設備上瀏覽器渲染的是1x的圖片，多是由於糟糕的網絡環境

---

案例

這個案例使用的是3張同樣的圖片，只是尺寸不同，這樣咱們很難看出區別。因此譯者在這裏換了這幾張圖，而後在Chrome中模擬手機調試，更換分辨率，應該就很明顯了。

譯者案例

這種方法由於要人爲匹配設備像素比，因此1x、2x、3x、4x等等，這樣HTML就會太臃腫，因此有了下面的新方法。

尺寸和屏幕密度都不一樣

不一樣寬度的圖片在響應式站點裏是很常見的。在這篇博客裏,圖片內容都是佔據了文章100%的寬度，可是文章的寬度並不老是窗口寬度的100%。

爲了讓瀏覽器匹配到正確的圖片，咱們須要知道：

• 不一樣尺寸圖片的地址

• 每張圖片的寬度

• <img>的寬度

最後一點是特別困難的，由於圖片開始下載是在CSS解析以前的，因此<img>的寬度不能從頁面佈局那獲得。

<img src="panda-689.jpg"
    srcset = "panda-689.jpg 689w,
                panda-1378.jpg 1378w
                panda-500.jpg 500w
                panda-1000.jpg 1000w"
    sizes = " (min-width:1066px) 689px,
                (min-width:800px) calc(75vw-137px) ,
                (min-width:530px) calc(100vw-96px) ,
                100vw" >

經過srcset屬性，瀏覽器知道了哪些圖片可用以及這些圖片的寬度。
經過sizes屬性，瀏覽器知道了<img>相對於一個已知寬度窗口的寬度。
這樣，瀏覽器就能夠匹配最佳資源加載了。

你再也不須要說明屏幕密度，瀏覽器本身會辨別。若是瀏覽器窗口寬度是1066px甚至更大，<img>會被定爲689px。在1x設備瀏覽器上會下載panda-689.jpg，可是在2x設備瀏覽器上將會下載panda-1378.jpg。

這裏感受做者並無解釋清楚 sizes和srcset的工做原理(參照下面的譯者案例來看)。

首先，是關於sizes的理解：
好比當前窗口800px，那麼sizes會匹配到(min-width:800px) calc(75vw - 137px) ，則這個<img>對應的寬度就是800px*0.75-137px=463px。這個寬度的設定至關於

<img src="..."  width="463" />

知道了<img>的width，而後再看srcset的w:
在dpr爲1的時候，463px對應463w，查找srcset，找到500w適合它，就顯示500的這張圖。
在dpr爲2的時候，463px對應926w，查找srcset，找到1000w適合，就顯示1000的這張圖。

一些規則是上面沒有提到的：

• srcset裏的每一項是<url> <width-descriptor>w，好比panda-689.jpg 689w

• srcset裏每一項的順序沒有影響

• 若是srcset包含了一個寬度描述符(w)，則src會被那些支持srcset的瀏覽器忽略掉

• sizes裏的每一項是<媒體查詢> <圖片寬度>形式，除了最後一個僅僅是<圖片寬度>

• sizes裏的寬度單位都是px

• 瀏覽器使用sizes裏的第一個匹配到的媒體查詢，因此sizes裏的順序是很重要的

• 和上面同樣，瀏覽器下載一個低分辨率圖片多是由於糟糕的網絡

若是你沒有指明<img>的寬度，瀏覽器也會正常解析。對sizes精確設置，可是一個不是很確切的寬度也很好。好比

sizes="(min-width:1066px) 689px ,
    (min-width:800px) 75vw,100vw"

挑選哪些圖片資源放在srcset裏是很困難的，我也沒有徹底掌握技巧。在上面的例子裏，我設置了一個最小尺寸(注：原文中是最大)(689px)，而後給2x設備設置剛纔的兩倍尺寸(1378px)。另外兩個設置是在這兩個值中間任意取的。我沒有設置更小的寬度好比320px,由於在這一狀況下的屏幕密度是2x或者更高。

srcset + sizes 在 Chrome、Firefox和Opera中都兼容。至於其餘瀏覽器，也會很安全地回退到src屬性。不用等待好久，WebKit nightly 和 下一個穩定版本的Edge就會很好地支持它。

WebKit nightly是WebKit的mac port，對於Safari就像Chromium對於Chrome

開發者須要瞭解的WebKit

---

案例

原文中<img>有一個內聯樣式width:100%，一開始沒有注意到的話還覺得沒有變化呢。上面的案例已經修改過了 -。-

仍是由於做者使用了內容相同，尺寸的圖片，因此我換了圖片從新作了一個例子：

譯者案例

這種新方法的srcset用來指向提供的圖片資源，沒有上面方法的1x、2x，這個都交給瀏覽器。例子中就指向了3個尺寸圖片。

sizes用來表示尺寸臨界點，用媒體查詢定下圖片的實際寬度。

不一樣寬度、分辨率和藝術指導

和以前的例子相似除了框架的不一樣寬度的變化。它容許你集中精力對付更小的寬度。

• 只要你想，你能夠有不少<source>

• 你必須包含一個<img>

• 媒體查詢<source>元素上老是被服從的

• 媒體查詢是基於窗口的寬度，不是<img>的

• 第一個匹配到的<source>會被使用，因此順序很重要

• 若是沒有匹配到<source>，則<img>被調用

• <img>必須出如今<source>後面

• <source>不支持src，可是支持srcset

一旦<source>或者<img>被選中，srcset和sizes屬性就像以前的例子同樣解析。

藝術指導:剪裁圖片內容來適應特定環境，任什麼時候候咱們裁剪或是修改圖片來適應一個斷點（而非簡單縮放），都是一種藝術指導。

能夠看出來，藝術指導比以前的srcset+sizes又多了一層維度:source的媒體查詢。

<picture>元素在Chrome、Firefox和Opera中兼容良好，在其餘瀏覽器能夠回退到<img>。而下一代的Edge也可能會支持。

--

案例

不一樣類型

這個方法可讓你有更優化的方式去提供給支持它們的瀏覽器。

<picture>
    <source type="image/webp"
        srcset="snow.webp">
    <img src="snow.jpg">
</picture>

• type屬性是mime類型

• 你能夠有不少種資源和混合type和media、srcset甚至是sizes取建立一些驚奇的東西

它在Chrome、Firefox和Opera上兼容良好，其餘瀏覽器還能夠回退到<img>。

---

案例

擴展閱讀

但願上面的文章可以對各類用例起到參考做用，你能夠繼續看看下面的文章：

• 十段響應式圖片文章 - Jason Grigsby

• 響應式圖片:用例和代碼片斷 - 和這篇文章相似，可是有更多用例

• Client hints - 服務端代替響應式圖片的方法

譯者推薦文章

與本文結構相似的文章：

• 實戰響應式圖片 - EFE

• 響應式圖片指南 - form Google Developers

• 開始使用響應式圖片 - from dev.opera 結構十分清晰

補充文章：

• 藝術指導的例子

• 響應式圖片討論組

• HTTP Client Hints介紹