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="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>

<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="images/avatar.png">
  <source srcset="images/girl.png">
  <img src="images/cat-dance.gif" alt="Beatles" style="width:auto;">
</picture>

<p>Element picture จะถูกใช้ก็ต่อเมื่อรูปภาพที่กำหนดไว้นั้นไม่สามารถเปิดใช้งานบนอุปกรณ์อื่น</p>

<p>ดังนั้นอุปกรณ์จะทำการเลือกรูปภาพแรก และจะสนใจตัวเลือกของภาพที่เหลืออีกเลย</p>

</body>
</html>
ลองดูสิ ❱

ดังนั้น เมื่อขยับหรือปรับความกว้างให้ใหญ่ขึ้นหรือเล็กอย่างไร ภาพที่กำหนดไว้จะไม่มีการเปลี่ยนแปลง

Note: เบราว์เซอร์จะใช้ Element <source> ตัวแรกที่มีค่าตรงกับที่กำหนดไว้ และจะไม่สนใจค่า <source> อื่นอีก
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯