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>