<picture> ใช้สำหรับใส่รูปภาพในหน้าเว็บ โดยมีจุดประสงค์เพื่อให้ การแสดงผลของภาพเหมาะสมกับอุปกรณ์หรือขนาดหน้าจอที่แตกต่างกัน (Responsive Image) 
HTML <picture> Element
Element
<picture> ช่วยให้จัดการรูปภาพได้ง่ายขึ้น ภายในจะประกอบด้วยแท็ก <source> หนึ่งตัวหรือมากกว่า
โดยแต่ละ <source> จะอ้างอิงรูปภาพที่แตกต่างกันผ่าน Attribute srcset
เบราว์เซอร์จะเลือกภาพที่เหมาะสมที่สุดกับขนาดหน้าจอหรืออุปกรณ์โดยอัตโนมัติ
และสามารถกำหนดเงื่อนไขเพิ่มเติมด้วย Attribute
media
<picture>
<source media="(min-width: 720px)" srcset="images/pic_building.jpg">
<source media="(min-width: 650px)" srcset="images/pic_ocean.jpg">
<img src="images/blue-sport-sedan.jpg" style="width:500;">
</picture>
แล้วเมื่อไหร่จะใช้ <picture>
เรามักใช้
<picture> ในสองกรณีหลัก คือ - ช่วยลดการโหลดภาพใหญ่เกินจำเป็น เบราว์เซอร์จะเลือก
<source>ที่เหมาะสมกับขนาดหน้าจอ - กรณีบางเบราว์เซอร์หรืออุปกรณ์ไม่รองรับไฟล์ภาพบางประเภท
<picture>ช่วยเลือกแสดงไฟล์ที่รองรับ
<picture>
<source srcset="images/avatar.png">
<source srcset="images/girl.png">
<img src="images/cat-dance.gif" alt="Beatles" style="width:auto;">
</picture>
ดังนั้น เมื่อขยับหรือปรับความกว้างให้ใหญ่ขึ้นหรือเล็กอย่างไร ภาพที่กำหนดไว้จะไม่มีการเปลี่ยนแปลง
📝 เคล็ดลับ
เบราว์เซอร์จะใช้ <source> ตัวแรกที่มีค่าตรงกับที่กำหนดไว้ และจะไม่สนใจค่า <source> อื่นอีก