Responsive Image srcset

使用 srcset 做圖片 lazyloading，並顯示適合裝置像素密度的圖片

一般螢幕的像素密度為 1 倍（163 dpi），同個長寬在畫面可以顯示 1x1 = 1 pixel 的像素

Retina 像素密度為 2 倍（326 dpi），同個長寬在畫面可以顯示 2x2 = 4 pixel 的像素

3 倍（401 dpi）的像素密度，同個長寬在畫面可以顯示 3x3 = 9 pixel 的像素

PS: 401 dpi 不為 163 dpi 的 3 倍，但還是視為 3 倍

寬高 100 px 的圖片到像素密度為 1 倍的螢幕，會將寬高 100px 圖片放到寬高為 100w 像素密度解析度 的地方顯示，可以正常顯示

寬高 100 px 的圖片到像素密度為 2 倍的螢幕，會將寬高 100px 圖片放到寬高為 200w 像素密度解析度 的地方顯示，等於是圖片解析度較低的圖片被撐大去顯示了，所以看起來會糊糊的

若放到像素密度為 3 倍的螢幕，則會被稱大到 300w 的 像素密度解析度 範圍去顯示，則會更加糊

所以比較好的螢幕像素密度，應該提供更高解析度的圖片去顯示，可以使用 srcset 去達到這樣的需求

<img src="source.jpg" width="100%"
     srcset="source_400.jpg 400w,
            source_600.jpg 600w,
            source_1280.jpg 1280w"
/>

source_400.jpg 400w

圖片檔案寬度為 400px 的 source_400.jpg 檔案放到像 像素密度解析度 為 400w 的裝置顯示

source_600.jpg 600w

圖片檔案寬度為 600px 的 source_600.jpg 檔案放到像 像素密度解析度 為 600w 的裝置顯示

source_1280.jpg 1280w

圖片檔案寬度為 600px 的 source_1280.jpg 檔案放到像 像素密度解析度 為 1280w 的裝置顯示

AMP 圖片 srcset

<amp-img alt="Hummingbird"
  src="images/hummingbird-wide.jpg"
  width="640"
  height="457"
  layout="responsive"
  srcset="source_400.jpg 400w,
         source_600.jpg 600w,
         source_1280.jpg 1280w"
            >
</amp-img>

參考資料

results matching ""

    No results matching ""