element HTML <picture> เป็นการใส่รูปลงในหน้าเว็บไซต์ หรือหน้าเพจ ซึ่งจะช่วยในการแสดงผลของรูปภาพให้เหมาะกับการอุปกรณ์หรือขนาดหน้าจอ size ต่างๆ
HTML <picture> Element
element HTML <picture> จะช่วยให้ผู้พัฒนาเว็บไซต์สามารถทำงานจัดการกับรูปภาพได้อย่างง่ายดาย
element <picture> จะประกอบไปดวย element <source> 1 element หรือมากกว่าก็ได้ แต่ละรายการจะอ้างอิงถึงรูปภาพต่างๆ โดยใช้ attribute srcset ด้วยเหตุนี้เองจึงทำให้เบราว์เซอร์สามารถเลือกรูปภาพที่เหมาะสมที่สุดในการแสดงผล ทั้งบนหน้าเว็บและบนอุปกรณ์ต่างๆ
แต่ละ element ของ <source> จะมี attribute สำหรับ media ที่ช่วยเลือกว่าภาพใดควรจะแสดงผลแบบไหนถึงจะเหมาะสมที่สุด
ตัวอย่าง
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 720px)" srcset="balcony.jpg">
<source media="(min-width: 650px)" srcset="beach-sea-ocean.jpg">
<img src="blue-sport-sedan.jpg" style="width:auto;">
</picture>
<p>ลองปรับขนาดของเบราว์เซอร์ เพื่อดูความแตกต่างของการแสดงผลของรูปภาพ ภาพ
ซึ่งเบราว์เซอร์จะค้นหารูปภาพที่เหมาะสมที่สุดที่ตรงกับการใช้งานในปัจจุบันของผู้ใช้ โดยจะดึงภาพที่ใช้ในการแสดงผลจาก srcset attribute</p>
<p>element img จะประกาศเป็นคำสั่งสุดท้าย ซึ่งจะใช้ในกรณีที่ ขนาดของเบราว์เซอร์ไม่ตรงกับรูปภาพที่ประกาศไว้ในตอนแรก การแสดงผลก็จะเลือกใช้งาน element img แทน
</p>
<p><strong>หมายเหตุ</strong> คำสั่ง picture นี้ไม่รองรับการใช้งานบนเบราว์เซอร์ตั้งแต่ IE12 ลงไป และ Safari ตั้งแต่เวอร์ชัน 9.0 ลงไป</p>
</body>
</html>
แล้วเมื่อไหร่จะใช้ Element Picture
เราจะใช้ element <picture> ใน 2 กรณี ดังนี้
- Bandwidth
ถ้าอุปกรณ์หรือหน้าจอของคุณมีขนาดเล็ก ไม่มีความจำเป็นเลยที่จะต้องโหลดไฟล?ขนาดใหญ่ ดังนั้น เบราว์เซอร์ จะเลือก element <source> ตัวแรกที่มีค่าตรงกับขนาดหน้าจอที่คุณใช้งานอยู่ โดยไม่สนใจ element อื่นๆ
- Format Support
บางเบราว์เซอร์หรืออุปกรณ์ไม่รองรับการใช้รูปภาพทุกรูปแบบ แต่ถ้าหากเราใช้ element <picture> จะทำให้สามารถลงรูปภาพได้ทุกรูปแบบ โดยที่เบราว์เซอร์จะเลือกรูปแบบแรกรู้จัก และจะไม่สนใจ elements อื่นๆ อีก
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source srcset="avatar.png">
<source srcset="girl.jpg">
<img src="cat.gif" alt="cat" style="width:auto;">
</picture>
<p>element picture จะถูกใช้ก็ต่อเมื่อรูปภาพที่กำหนดไว้นั้นไม่สามารถเปิดใช้งานบนอุปกรณ์อื่น</p>
<p>ดังนั้นอุปกรณ์จะทำการเลือกรูปภาพแรก และจะสนใจตัวเลือกของภาพที่เหลืออีกเลย</p>
</body>
</html>
ดังนั้น เมื่อขยับหรือปรับความกว้างให้ใหญ่ขึ้นหรือเล็กอย่างไร ภาพที่กำหนดไว้จะไม่มีการเปลี่ยนแปลง
Note: เบราว์เซอร์จะใช้ element <source> ตัวแรกที่มีค่าตรงกับที่กำหนดไว้ และจะไม่สนใจค่า <source> อื่นอีก