Element <picture> dapat memiliki nol atau lebih <source> elements dan satu <img> element untuk menyediakan versi images untuk display atau skenario yang berbeda.
Browser akan mempertimbangkan setiap <source> element dan memilih yang terbaik; Jika tidak ada, maka image yang digunakan adalah dari <img> element. Image akan ditampilkan didalam area <img> element.
Jadi <img> element adalah mandatory. Sementara <source> adalah optional.
Type Attribute
Type attribute menunjukan MIME type dari <source> element srcset attribute. Jika browser tidak support, maka source element tersebut akan dilewati. Berikut contoh penggunaanya.
<picture>
<source srcset="gym-girl-verylarge.webp" type="image/webp">
<source srcset="gym-girl-verylarge.jpg" type="image/jpeg">
<img src="gym-girl-verylarge.jpg" alt="situp workout">
</picture>
HTML diatas menunjukan, browser dapat memilih image source format webp atau jpeg. Jika browser support webp, maka source set pertama yang digunakan. Jika tidak, maka source kedua, yaitu format jpeg yang digunakan. Dapat dilihat browser yang digunakan untuk tutorial ini support webp, oleh karena itu file tersebut yang didownload.
Media Attribute
Browser akan menggunakan kondisi dari media (sama dengan media query) untuk mengevaluasi setiap <source> element. Jika kondisi media tidak sesuai maka <source> element akan dilewati.
<picture>
<source srcset="couple-crop.jpg" media="(max-width: 600px)">
<img src="couple-full.jpg" alt="Happy Couple">
</picture>
HTML diatas menunjukan, bila viewport <= 600px, maka akan menggunakan <source> couple-crop.jpg, perhatikan saat emulator menggunakan viewport dibawah 600px, maka file yang didownload adalah couple-crop.jpg
Sementara saat viewport diatas 600px, maka yang didownload adalah couple-large.jpg.
Download file tutorial pictureelement1.zip dan pictureelement2.zip