使用響應式圖像

Sponsor

自從2010年Ethan Marcotte開始討論響應式網頁設計，開發者和設計師們競相尋求處理響應式圖片的方法。這的確是一個棘手的問題?，因為我們對同一個網站在眾多設備寬度下，使用同一圖像源。你愿意在一個大顯示屏上顯示模糊地、馬賽克狀的圖像？你愿意在你的手機上加載一個巨大的（雖然更漂亮的）圖像？這個問題令人左右為難。

一群來自響應式問題社區組(RICG)的聰明家伙致力于解決這個難題，他們使picture元素和srcset、sizes屬性納入HTML 5.1規范草案 。因為我們無法預測用戶在何地以及如何訪問我們的網站，所以我們需要瀏覽器自身根據情況選擇最好的圖像。新規范將解決以下問題：

• 基于設備象素比（device-pixel-radio）選擇
• 基于viewport選擇
• 基于Art direction（美術設計）選擇
• 基于圖像格式選擇

該規范中，img元素增加了兩個新屬性：srcset和sizes。srcset用來聲明一組圖像源，瀏覽器根據我們使用描述符指定的條件來選擇圖像。描述符x表示圖像的像素密度，描述符w表示圖像的寬度；瀏覽器使用這些信息從列表中選擇合適的圖像。sizes屬性為瀏覽器提供將要顯示圖像的尺寸信息，srcset使用w描述符時必須包含此屬性。這種方法尤其適用于可變寬度的圖像，我將在后面詳細討論。

我們現在可以根據用戶的viewport，提供不同質量或美術設計(art direction)的圖像，無需借助復雜的服務器端設置。響應式圖像將成為HTML規范的重要組成部分，所有瀏覽器終將都會支持此解決方案。

固定寬度圖像：基于設備像素比選擇

視網膜屏幕的廣泛應用，使我們不僅需要考慮屏幕分辨率，而且也需要考慮像素密度。視網膜屏幕，4K顯示器，UltraHD-它們都比相同尺寸的標準分辨率顯示器填充了更多的像素。更多的像素=更清晰的圖像。

有些圖片不管屏幕尺寸，始終以固定寬度顯示-如站點logo或人物簡介圖像，也就是說需要根據設備像素比來選擇。瀏覽器將根據設備像素比來選擇加載哪張圖像。

srcset屬性列出了瀏覽器可以選擇加載的源圖像池，是一個由逗號分隔的列表。x描述符表示圖像的設備像素比。瀏覽器根據運行環境，利用這些信息來選擇適當的圖像。不理解srcset的瀏覽器會直接加載src屬性中聲明的圖像。

<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="響應式圖像" alt="USWNT crest" />

查看演示

網站logo就是固定寬度圖像的一個例子，不管viewport的寬度如何，始終保持相同的寬度。不過，與內容相關的圖片，通常也需要響應式，它們的大小往往隨viewport改變。對于這類圖像，還有更好的處理方法。

可變寬度的圖像：基于viewport選擇

對于可變寬度的圖像，我們使用srcset搭配w描述符以及sizes屬性 。w描述符告訴瀏覽器列表中的每個圖象的寬度。sizes屬性是一個包含兩個值的，由逗號分隔的列表。根據最新規范，如果srcset中任何圖像使用了w描述符，那么必須要設置sizes屬性。

sizes屬性有兩個值：第一個是媒體條件；第二個是源圖尺寸值，在特定媒體條件下，此值決定了圖片的寬度。需要注意是，源圖尺寸值不能使用百分比，vw是唯一可用的CSS單位。

<img srcset="uswnt-480.jpg 480w, 
             uswnt-640.jpg 640w, 
             uswnt-960.jpg 960w,
             uswnt-1280.jpg 1280w" 
     sizes="(max-width: 400px) 100vw, 
            (max-width: 960px) 75vw, 
            640px" 
     src="uswnt-640.jpg" alt="響應式圖像" alt="USWNT World Cup victory">

查看演示

上例中，我們告訴瀏覽器在viewport寬度小于400像素時，使圖像的寬度與viewport等寬。在viewport寬度小于960像素時，使圖像的寬度為viewport寬度的75％。當viewport大于960像素時，使圖像的寬度為640像素。如果你不熟悉vw?，可以看看Tim Severien的大文viewport單位詳解?。

瀏覽器利用srcset和sizes信息來選擇最符合規定條件的圖像。如果瀏覽器的viewport是600像素，圖像最可能以75vw的寬度顯示。瀏覽器將嘗試加載第一張大于450像素（600*0.75）的圖像，也就是uswnt-480.jpg。如果我的是dpr為2的Retina顯示屏，那么瀏覽器就會嘗試加載第一張大于900像素（600*0.75*2）的圖像，也就是uswnt-960.jpg。我們無法確定究竟顯示哪張圖像，因為每個瀏覽器根據我們提供的信息挑選適當圖像的算法是有差異的。(譯者注：srcset和size列表是對瀏覽器的一個建議(hint)，而非指令。例如，設備像素比(dpr)為1.5的設備，亦可用1x也可用2x的圖像，由瀏覽器根據其能力、網絡等因素來決定。)

前兩個例子都是以不同質量顯示相同的圖像，僅用srcset屬性就足夠了。不必擔心老舊瀏覽器，老舊瀏覽器會把它看作為一個普通的圖像并從src中加載。如果你想在不同寬度下顯示稍微不同的圖像，比如在較窄屏幕下僅顯示圖像的關鍵部分，那么要使用picture元素。

picture：基于Art direction（美術設計）選擇

picture元素就像是圖像和其源的容器。瀏覽器仍然需要img元素，用來表明需要加載圖片，如果沒有img，那么什么都不會渲染。source為瀏覽器提供了要顯示圖像的供選版本?；诿佬g設計選擇的適用場景為：在一個特定的轉效點（breakpoint）需要顯示一個特定的圖像。使用picture元素選擇圖像，不會有歧義。

<picture>
  <source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
  <source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
  <img src="ticker-tape-small.jpg" alt="響應式圖像" alt="USWNT ticker-tape parade">
</picture>

查看演示

在本例中，當viewport大于960像素時，會加載圖像的風景模式版本（ticker-tape-large.jpg）。當viewport寬度大于575像素時，瀏覽器會加載圖像的裁剪過的肖像模式版本（ticker-tape-medium.jpg）。而當寬度小于575像素時，加載的圖像（?ticker-tape-small.jpg）已經被裁剪成焦點僅在一個球員上了。

picture元素是向后兼容的；不支持picture元素的瀏覽器將顯示img。圖像的所有標準屬性（如alt），應該作用在img上而不是picture上。

source：基于圖片格式選擇

最近幾年出現了一些新的圖片格式，這些新圖像格式在較小的文件大小情況下保證了較好的圖片質量。聽起來還不錯，但殘酷的事實是沒有一個新格式被所有瀏覽器支持。谷歌的WebP表現不錯，但只有Chrome和Opera原聲支持。JPEG-XR，最初被稱為高清照片，是微軟發布的一個專有圖像格式，僅Internet Explorer支持。如果你想了解更多信息，可以查看Zoltan Hawryluk對這些新格式的深入研究。

<picture>
  <source type="image/vnd.ms-photo" src="wwc2015.jxr">
  <source type="image/jp2" src="wwc2015.jp2">
  <source type="image/webp" src="wwc2015.webp">
  <img src="wwc2015.png" alt="響應式圖像" alt="WWC 2015">
</picture>

source的type屬性用來指定每個圖像的MIME類型，瀏覽器會選擇第一個含有其支持的MIME類型的源。源的順序是至關重要的，如果瀏覽器無法識別所有的圖象類型，它會回退至原來的img元素。

現在可以使用這些東東嗎？

在寫這篇文章的時候， Firefox，Chrome和Opera的最新穩定版本均支持picture。Safari和IE本身均不支持picture。srcset的情況稍微好一點，Firefox、Chrome和Opera的最新穩定版本完全支持，Safari8和Internet Explorer Edge部分支持，可以使用x描述符用于根據分辨率切換，但不支持w描述符。Safari9已經完全支持srcset了（譯者注）。

現有不少polyfills解決支持性問題，最知名的恐怕是Scott Jehl的picturefill。目前我（原作者）在我自己的網站上使用Alexander Farkas的respimage。目前的狀況是，我們已對響應式圖像的處理方案達成一致，并且這些解決方案逐漸被所有的主流瀏覽器實現。盡管該規范仍在不斷完善之中，但原生的響應式解決方案離我們越來越近了。

原文：Using Responsive Images (Now)

翻譯：騰訊ISUX – JACE)

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。