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

weixin_34253539發表於2019-02-27
在這篇文章中討論的新特性 — 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>

相關文章