HTML picture Element

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

element HTML <picture> เป็นการใส่รูปลงในหน้าเว็บไซต์ หรือหน้าเพจ ซึ่งจะช่วยในการแสดงผลของรูปภาพให้เหมาะกับการอุปกรณ์หรือขนาดหน้าจอ size ต่างๆ

html-picture-element-001

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 กรณี ดังนี้

  1. Bandwidth

ถ้าอุปกรณ์หรือหน้าจอของคุณมีขนาดเล็ก ไม่มีความจำเป็นเลยที่จะต้องโหลดไฟล?ขนาดใหญ่ ดังนั้น เบราว์เซอร์ จะเลือก element <source> ตัวแรกที่มีค่าตรงกับขนาดหน้าจอที่คุณใช้งานอยู่ โดยไม่สนใจ element อื่นๆ

  1. 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> อื่นอีก
< บทเรียนก่อนหน้า
บทเรียนถัดไป >