回應式圖片通常會使用 srcset 屬性實作。srcset 屬性是以逗號分隔的清單，列出圖片檔案名稱及其寬度或密度描述元。
為避免版面配置位移，請在使用 srcset 的 <img> 和 <source> 標記上設定 width 和 height 屬性。
密度描述元
如何建立使用密度描述元的回應式圖片：
src和srcset中列出的所有圖片，長寬比都必須相同。- 設定
width和height屬性，使其符合1x圖片的尺寸。 src屬性應參照1x圖片。
寬度描述元
如何建立使用寬度描述元的回應式圖片：
src和srcset中列出的所有圖片的顯示比例必須相同。width和height屬性應與備用圖片的尺寸相符。- 視需要調整圖片樣式。如未使用 CSS，如果您在具有寬度描述元的回應式圖片上設定
width和height，圖片一律會以該設定的大小顯示。即使srcset中列出的圖片尺寸不同，也是如此。這個行為可能不是您想要的行為。為圖片樣式加上width: 100%; height: auto;或width: 100vw; height: auto;，或許可以提供您想要的視覺外觀。
相片元素
如何建立回應式 <picture> 元素：
- 設定所有
<source>標記的width和height屬性。這些屬性的正確值取決於<source>標記使用srcset的方式。 - 只要設定對應的
<img>標記樣式，即可調整圖片。<source>標記是空白元素，因此樣式沒有任何影響。 - 設定
<img>標記的width和height屬性。這些值應與備用圖片的內建大小一致。
示例
HTML
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>