響應式圖片(自適應圖片)

在這篇文章中討論的新特性 — srcset/sizes/<picture> — 都已經被新版本的現代瀏覽器和移動瀏覽器所支 持（包括Edge，而不是IE）。

解決的問題

1. 分辨率切換問題：小屏手機屏幕上顯示網頁，那麼沒有必要在網頁上嵌入pc端的大圖片，浪費帶寬
2. 藝術方向問題：當網站在狹窄的屏幕上觀看時，顯示一幅包含了重要細節的裁剪版圖片，而不是顯示pc端的大圖，這樣會顯得圖片縮小，重要地方不突出

分辨率切換問題

不一樣分辨率加載不一樣尺寸的圖片

<img srcset="elva-fairy-320w.jpg 320w,
                 elva-fairy-480w.jpg 480w,
                 elva-fairy-800w.jpg 800w"
         sizes="(max-width: 320px) 280px,
                (max-width: 480px) 440px,
                800px" // 默認
         src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

須要說明的幾點以下:

• srcset語法: "圖片路徑 物理像素, 圖片路徑 物理像素, ....."
• size: "媒體查詢 css像素"
• src: 當瀏覽器不支持上面的屬性的時候，默認加載這裏

加載的流程以下:

1. 查看設備寬度
2. 檢查sizes列表中哪一個媒體條件是第一個爲真
3. 查看給予該媒體查詢的槽大小
4. 加載srcset列表中引用的最接近所選的槽大小的圖像

在不少pc端上，1px=1w

不一樣的分辨率加載相同的尺寸

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
     
img {
    width: 320px;
}

通常狀況下當咱們給img設置固定的寬的時候,爲了在不一樣的dpr設備上顯示相同的大小，能夠配合x來，例如1.5x表明dpr爲1.5的設備

藝術問題

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

須要說明的幾點:

1. source當中的也可使用srcset、sizes屬性
2. 必須提供一個img元素，以備瀏覽器不支持的時候使用

爲何不使用css和javaScript來完成圖片替換

由於你不能先加載好 <img> 元素後, 再用 JavaScript 檢測視圖的寬度，若是以爲大小不合適，就動態地加載小的圖片替換已經加載好的圖片，這樣的話, 原始的圖像已經被加載了, 而後你也加載了小的圖像, 這樣的作法對於響應式圖像的理念來講，是很糟糕的。

另外一種方式svg

位圖由以像素爲單位的寬和高表示，若是位圖顯示的尺寸大於原始尺寸，一張較小的位圖看來會有顆粒感（然而矢量圖不會這樣）

可是它不適用於全部的圖片，在某種程度上是這樣的——它們不管是文件大小仍是比例都合適，不管在哪裏你都應該儘量的使用它們。

雖然在簡單圖形、圖案、界面元素等方面較好，但若是是有大量的細節的照片，建立矢量圖像會變得很是複雜。加載會消耗更多的帶寬。

使用現代圖像格式

有不少使人激動的新圖像格式（例如WebP和JPEG-2000）能夠在有高質量的同時有較低的文件大小。然而，瀏覽器對其的支持良莠不齊。

爲了兼容老舊瀏覽器，咱們能夠在<source>標籤當中指定MIME類型，使用type屬性，並在srcset當中指定相應格式的圖片

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>