/

html-responsive-images-srcset

＃使用srcset實現響應式圖片

如何使用HTML img 標籤的srcset屬性來定義響應式圖片

img標籤的srcset屬性允許您根據像素密度或窗口寬度來設置響應式圖片，以滿足您的需求。這樣，它只需下載瀏覽器在渲染頁面時需要的資源，例如在移動設備上下載較大的圖片。

這是一個例子，我們為4個不同的屏幕尺寸提供了4個額外的圖片：

1
2
3
4
5
6
<img src="dog.png"
 alt="一只狗的照片"
 srcset="dog-500.png 500w,
 dog-800.png 800w,
 dog-1000.png 1000w,
 dog-1400.png 1400w">

在srcset中，我們使用w衡量窗口寬度。

由於我們這樣做，還需要使用sizes屬性：

1
2
3
4
5
6
7
<img src="dog.png"
 alt="一只狗的照片"
 sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
 srcset="dog-500.png 500w,
 dog-800.png 800w,
 dog-1000.png 1000w,
 dog-1400.png 1400w">

在這個例子中，sizes屬性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px字符串描述了圖片與視窗的大小關係，多個條件用逗號分隔。

媒體條件max-width: 500px將圖片的大小設定為與視窗寬度相關。簡而言之，如果窗口大小小於500px，它以100%的視窗大小渲染圖片。

如果窗口大小更大，但小於900px，它以視窗大小的50%渲染圖片。

如果更大，則以800px的大小渲染圖片。

vw單位的度量可能對您來說是新的，簡單來說，我們可以說1vw是視窗寬度的1%，因此100vw是視窗寬度的100%。

一個有用的網站可以生成srcset和逐漸縮小的圖片：https://responsivebreakpoints.com/。

tags: [“responsive image”, “srcset”, “sizes”, “viewport width”]