img的srcset和sizes屬性作用

一、總結

一句話總結：

1、img 標簽的 srcset 可以用來處理頁面在不同像素密度終端設備上對圖片的選擇性展示

2、sizes 作用就在於告訴瀏覽器根據【屏幕尺寸】和【像素密度】的計算值從srcset 中選擇最佳的圖片源。

 

 

1、img 標簽的 srcset 可以用來處理頁面在不同像素密度終端設備上對圖片的選擇性展示？

|||-begin

< img src="density-x1.jpg" 
          srcset="density-x1.jpg 1x,
                  density-x2.jpg 2x, 
                  density-x3.jpg 3x" />

|||-end

1、如果當前瀏覽器不認識 srcset 屬性的情況下，瀏覽器會默認顯示 src 中的圖片。

2、如果瀏覽器認識 srcset 屬性，那么瀏覽器會根據當前屏幕的像素密度來選擇相應的圖片。

 

 

2、當瀏覽器下載圖片的時候，他並不知道圖片的真實尺寸？

瀏覽器唯一知道的是視口的尺寸

在瀏覽器下載html 頁面不久之后，他將會繼續請求css 和 js 資源 img 資源, 但是css,js,img的請求沒有先后之分
所以瀏覽器並不知道頁面的布局，所以對圖片的尺寸也一無所知，瀏覽器唯一知道的是視口的尺寸，但是這並不足以
給瀏覽器選擇最佳的圖片源。

 

3、sizes 只有在srcset 使用寬度描述符的時候才有意義，否則就不需要sizes 屬性？

sizes 作用就在於告訴瀏覽器根據【屏幕尺寸】和【像素密度】的計算值從srcset 中選擇最佳的圖片源。

 

 

4、img的sizes屬性語法？

|||-begin

<img src="../static/images/128.png"
     srcset="../static/images/128.png 350w,
             ../static/images/256.png 750w,
             ../static/images/512.png 900w,
             ../static/images/1024.png 1000w"

     sizes="(max-width: 320px) 100px,
            (max-width: 450px) 200px,
            (max-width: 700px) 300px,
            (max-width: 800px) 400px,
            (max-width: 900px) 500px,
            1024px">

|||-end

第一個部分是【媒體情況】，他不是媒體查詢，但是跟媒體查詢類似，用括號包括起來。

第二個部分是【長度單位的值】 ，可以是px, vw或者其他單位。

 

 

 

5、sizes 是如何起作用的呢？

|||-begin

<img src="../static/images/128.png"
     srcset="../static/images/128.png 350w,
             ../static/images/256.png 750w,
             ../static/images/512.png 900w,
             ../static/images/1024.png 1000w"

     sizes="(max-width: 320px) 100px,
            (max-width: 450px) 200px,
            (max-width: 700px) 300px,
            (max-width: 800px) 400px,
            (max-width: 900px) 500px,
            1024px">

|||-end

1、根據媒體情況 選擇 size 中的值。

2、將值中的長度值 * 屏幕像素密度得到 最終寬度

3、最終寬度去匹配 srcset 中的寬度描述，得到最終圖片

首先瀏覽器會讀取 sizes 然后根據媒體情況來選擇，如果匹配到某個值，就根據這個值的長度值單位乘以屏幕像素密度，最終得出來的值再與srcset 中的寬度描述匹配來選擇圖片。

 

 

 

二、img srcset sizes 的作用

轉自或參考：img srcset sizes 的作用
https://www.cnblogs.com/KingCong/p/9608392.html

 

像素密度：
一開始，img 標簽的 srcset 可以用來處理頁面在不同像素密度終端設備上對圖片的選擇性展示。
舉個例子，例如下面這個img:

< img src="density-x1.jpg" 
          srcset="density-x1.jpg 1x,
                  density-x2.jpg 2x, 
                  density-x3.jpg 3x" />

解讀：
如果當前瀏覽器不認識 srcset 屬性的情況下，瀏覽器會默認顯示 src 中的圖片。
如果瀏覽器認識 srcset 屬性，那么瀏覽器會根據當前屏幕的像素密度來選擇相應的圖片。
圖片的鏈接和像素密度用空格隔開，如果像素密度為空，那么默認為 1x, 不同的像素密度用逗號分隔開來。

如此以來，在 1x 如果當前設備的像素密度為 1x 則顯示 1x 的圖片。如果是 2x, 則顯示 2x 的圖片。
如果你現在面對着一個新的需求， 需要你匹配 1x, 1.2x, 1.75x, 2x....的圖片。這個時候我們會想很簡單，
我們對不同的像素密度匹配上不同的圖片就可以了。於是乎，img 標簽就會變得很冗長，而且可能在不同像素
密度下使用的圖片是同一張，但是我們不得不為單獨的像素密度分配圖片，這樣情況就會變得糟糕。


如何統一處理不同像素密度 + 屏幕寬度下的尺寸呢？img 標簽中 srcset 的寬度描述符 和 size 就是為了解決這一問題。

 

srcset 寬度描述符
寬度描述符的語法跟密度描述符類似，原本的 x 被 w 所替代，來標識不同的圖片源寬度。

 

 

< img src="c="cat.jpg" al" alt="cat" 
          srcset="cat-160.jpg 160w, 
                      cat-320.jpg 320w,
                      cat-640.jpg 640w, 
                      cat-1280.jpg 1280w">

但是有了寬度描述符還不夠，為什么呢？
因為雖然你給瀏覽器提供了一系列圖片以及他們的真實寬度，也因此可以讓瀏覽器來選擇最佳的圖片源。
但是瀏覽器是怎么做到去選擇最佳的圖片源呢。當瀏覽器下載圖片的時候，他並不知道圖片的真實尺寸。

如果我們查看瀏覽器渲染頁面的時間線，我們會發現：
在瀏覽器下載html 頁面不久之后，他將會繼續請求css 和 js 資源 img 資源, 但是css,js,img的請求沒有先后之分
所以瀏覽器並不知道頁面的布局，所以對圖片的尺寸也一無所知，瀏覽器唯一知道的是視口的尺寸，但是這並不足以
給瀏覽器選擇最佳的圖片源。

 

屬性 sizes
sizes 作用就在於告訴瀏覽器根據屏幕尺寸和像素密度的計算值從srcset 中選擇最佳的圖片源。
需要注意的一點是sizes 只有在srcset 使用寬度描述符的時候才有意義，否則就不需要sizes 屬性。

 

<img src="../static/images/128.png"
     srcset="../static/images/128.png 350w,
             ../static/images/256.png 750w,
             ../static/images/512.png 900w,
             ../static/images/1024.png 1000w"

     sizes="(max-width: 320px) 100px,
            (max-width: 450px) 200px,
            (max-width: 700px) 300px,
            (max-width: 800px) 400px,
            (max-width: 900px) 500px,
            1024px">

 

sizes 的值是由一個逗號分隔開來的列表，列表中的每個值分為兩個部分。

(max-width: 320px) 100px,

第一個部分是媒體情況 (綠色背景部分)，他不是媒體查詢，但是跟媒體查詢類似，用括號包括起來。
第二個部分是長度單位的值 (黃色背景部分)，可以是px, vw或者其他單位。

sizes 是如何起作用的呢。
首先瀏覽器會讀取 sizes 然后根據媒體情況來選擇，如果匹配到某個值，就根據這個值的長度值單位乘以屏幕像素密度，最終得出來的值再與srcset 中的寬度描述匹配來選擇圖片。

1. 根據媒體情況 選擇 size 中的值。

2. 將值中的長度值 * 屏幕像素密度得到 最終寬度

3. 最終寬度去匹配 srcset 中的寬度描述，得到最終圖片