html Responsive Images <picture>

picture element, source children elements, srcset, sizes, media, type attributes

將一幅大尺寸的圖轉成數個降低尺寸的圖,由瀏覽器依照不同大小的 viewport 決定取用更適合的尺寸的圖。

<source srcset="" sizes=""> 方式處理,與 <img> 雷同。

picture 裡面必須有一個 img 元素,否則不會顯示,而且在所有 source 之後, picture 結尾標籤之前。

圖例:展示一幅很大尺寸的圖有指定 srcset

類似方式使用 media 也可以。

<picture>
 <source media="(max-width:320px)" srcset="./images/flower2_300.jpg">
 <source media="(max-width:640px)" srcset="./images/flower2_604.jpg">
 <source media="(max-width:880px)" srcset="./images/flower2_839.jpg">
 <source media="(max-width:1200px)" srcset="./images/flower2_1100.jpg">
 <img src="./images/flower2.jpg" alt="the rose">
</picture>