翻譯自Peter LePage

一個(gè)網(wǎng)頁中平均約60%的數(shù)據(jù)量是被圖片占據(jù)的，所以在響應(yīng)式開發(fā)中注重圖片的優(yōu)化可以很大程度上提高網(wǎng)頁的性能，例如為低分辨率的屏幕推送低分辨率的圖片可以避免流量的浪費(fèi)。

圖片標(biāo)簽

HTML中的img元素負(fù)責(zé)下載，解碼并加載圖片內(nèi)容。做到以下幾點(diǎn)可以幫助網(wǎng)頁實(shí)現(xiàn)更好的體驗(yàn)：

使用相對尺寸

使用相對尺寸定義圖片可以防止其超出可視范圍。例如設(shè)置width: 50%可以保證圖片的寬度是其父元素的50%（不是可視范圍的50%也不是其實(shí)際尺寸的50%）。

因?yàn)镃SS允許內(nèi)容超出容器，可以使用max-with: 100%來避免圖片以及其他內(nèi)容超出容器范圍。

利用srcset為高分辨率屏幕加載高質(zhì)量圖片

利用img元素的srcset屬性可以很方便地在不同的屏幕加載不同的圖片文件。瀏覽器會(huì)根據(jù)設(shè)備的特定選擇最佳的圖片來顯示，例如在retina屏幕上加載雙倍分辨率的圖片，或者在網(wǎng)速不好的情況下加載較小的圖片。

<img src="photo.png" srcset="photo@2x.png 2x" ...> 

對于不支持srcset的瀏覽器, img元素會(huì)加載src指向的圖片。對于支持srcset的瀏覽器，在請求頁面之前會(huì)先解析srcset的內(nèi)容（圖片和相應(yīng)的加載條件），只有最合適的圖片會(huì)被下載并顯示。

理論上圖片加載條件可以是像素密度（pixel density）或屏幕高寬，但是現(xiàn)在只有像素密度的支持性比較好。

使用picture元素

picture 元素可以根據(jù)不同的設(shè)備特性加載不同的圖片版本，例如設(shè)備尺寸，分辨率，方向等等。

一個(gè)picture元素中可以包含多個(gè)source元素，分別對應(yīng)在不同情況下需要加載的圖片。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

在這個(gè)例子中，當(dāng)瀏覽器寬度大于800像素時(shí)會(huì)根據(jù)屏幕分辨率加載head.jpg或者head-2x.jpg。當(dāng)瀏覽器寬度介于450像素與800像素之間時(shí)，會(huì)根據(jù)屏幕分辨率加載head-small.jpg或head-small-2x.jpg。當(dāng)瀏覽器寬度小于450像素或者瀏覽器不支持picture元素時(shí)，瀏覽器會(huì)渲染img元素，因此保證picture元素中包含有一個(gè)img元素。

相對尺寸圖片

在一個(gè)響應(yīng)式頁面中，圖片尺寸可能隨著瀏覽器的縮放而改變，因此無法預(yù)先知道圖片的有效像素密度?？梢酝ㄟ^為圖片文件添加寬度描述來使瀏覽器自動(dòng)計(jì)算像素密度從而加載最合適的圖片。

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

這個(gè)例子會(huì)加載一張寬度為瀏覽器可視區(qū)域?qū)挾纫话愕膱D片，并且根據(jù)瀏覽器寬度和設(shè)備像素比選擇合適的圖片加載

相對尺寸的圖片

在很多情況下，圖片布局也會(huì)隨著瀏覽器尺寸的變化而改變，例如在小屏上要求圖片撐滿可視區(qū)域?qū)挾龋欢诖笃聊簧弦髨D片只占可視范圍的一小部分。

<img src="400.png" 
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

在這個(gè)例子中，當(dāng)瀏覽器寬度大于600像素時(shí)，圖片寬度是可視區(qū)域?qū)挾鹊?5%；當(dāng)瀏覽器寬度在500像素到600像素之間時(shí)，圖片寬度是可是寬度的50%；當(dāng)瀏覽器寬度小于500像素時(shí)，圖片撐滿可視區(qū)域?qū)挾取?/p>

CSS中的圖片

CSS中的background屬性可以使圖片通過多種方法呈現(xiàn)，另外通過CSS3中的媒體查詢也可以響應(yīng)式地加載圖片。

使用媒體查詢動(dòng)態(tài)加載背景圖片

使用媒體查詢可以雖然瀏覽器窗口縮放加載不同版本的圖片

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

使用image-set提供高分辨率圖片

使用CSS的image-set()函數(shù)可以根據(jù)設(shè)備特性加載不同版本的圖片，作用和<img>標(biāo)簽的srcset屬性相似

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

image-set()不僅控制圖片的加載，而且會(huì)根據(jù)加載的圖片進(jìn)行縮放縮放。瀏覽器默認(rèn)2x的圖片尺寸是1x圖片的兩倍，因此會(huì)縮小2x的圖片使得顯示出的圖片大小相同。

由于image-set()只支持Chrome和Safari瀏覽器，所以在使用時(shí)要考慮到瀏覽器的兼容性，例如：

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

使用媒體查詢加載高分辨率圖片

媒體查詢可以使用設(shè)備像素比作為規(guī)則，在高分屏幕上加載高分辨率圖片，例如：

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* 高分辨率的圖片資源 */
}

這個(gè)例子中的兩個(gè)判斷條件其實(shí)是等價(jià)的，其中min-resolution是標(biāo)準(zhǔn)寫法，但是只有Chrome, Firefox和Opera瀏覽器支持。