พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Picture Emelent

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

การใช้งาน <picture> Element

รูปแบบการใช้งานหลักของ <picture> คือการให้เบราว์เซอร์เลือกแหล่งที่มาของรูปภาพที่เหมาะสมที่สุดโดยอัตโนมัติตามเงื่อนไขที่กำหนด ตัวอย่างเช่น สามารถใช้รูปภาพที่มีความละเอียดสูงสำหรับจอ Retina หรือเลือกรูปภาพที่มีขนาดเล็กสำหรับหน้าจอมือถือ

โครงสร้างพื้นฐานของ <picture>

HTML
<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 500px)">
  <img src="image-small.jpg" alt="ตัวอย่างรูปภาพ">
</picture>
  • <source> จะใช้สำหรับการกำหนดเงื่อนไขด้วย media และ srcset ซึ่งจะระบุแหล่งที่มาของรูปภาพตามขนาดหน้าจอ
    • รูป image-large.jpg จะถูกแสดงเมื่อหน้าจอมีความกว้างอย่างน้อย 800px
    • รูป image-medium.jpg จะถูกแสดงเมื่อหน้าจอมีความกว้างอย่างน้อย 500px แต่ไม่ถึง 800px
  • <img> จะเป็นตัวเลือกสุดท้ายที่ใช้หากเงื่อนไขที่กำหนดใน <source> ไม่ตรงกัน

ตัวอย่างการใช้งาน <picture> สำหรับ Retina Display

เราสามารถใช้ <picture> เพื่อเลือกแสดงรูปภาพความละเอียดสูงหรือปกติ ขึ้นอยู่กับอุปกรณ์ที่มี pixel density ต่างกัน

HTML
<picture>
  <source srcset="image-2x.jpg 2x, image-1x.jpg 1x">
  <img src="image-1x.jpg" alt="ตัวอย่างรูปภาพความละเอียดสูง">
</picture>

ในกรณีนี้ เบราว์เซอร์จะเลือกโหลดรูป image-2x.jpg บนอุปกรณ์ที่มี pixel density สูงกว่า 1 (เช่น Retina Display) และรูป image-1x.jpg สำหรับอุปกรณ์ที่มีความละเอียดปกติ

การใช้ <picture> สำหรับ WebP และรูปแบบไฟล์อื่น ๆ

นอกจากการเลือกตามความกว้างของหน้าจอแล้ว <picture> ยังสามารถใช้เลือกไฟล์รูปภาพตามประเภทของไฟล์ที่รองรับได้ ตัวอย่างเช่น หากเบราว์เซอร์รองรับรูปแบบ WebP จะโหลดไฟล์ WebP แต่หากไม่รองรับจะเลือกไฟล์แบบ JPG

HTML
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="ตัวอย่างรูปภาพประเภทไฟล์">
</picture>
  • ถ้าเบราว์เซอร์รองรับ WebP จะโหลดไฟล์ image.webp
  • ถ้าไม่รองรับ WebP จะโหลดไฟล์ image.jpg

การใช้งาน <picture> ร่วมกับ Art Direction

ในบางครั้งเราอาจต้องการแสดงรูปภาพที่แตกต่างกันออกไปตามขนาดหน้าจอ โดยอาจเป็นการจัดองค์ประกอบของรูปภาพให้ต่างกัน (เรียกว่า Art Direction)

HTML
<picture>
  <source srcset="image-landscape.jpg" media="(min-width: 800px)">
  <source srcset="image-portrait.jpg" media="(max-width: 799px)">
  <img src="image-small.jpg" alt="ตัวอย่าง Art Direction">
</picture>
  • ถ้าขนาดหน้าจอมีความกว้างอย่างน้อย 800px จะแสดงรูป image-landscape.jpg
  • ถ้าขนาดหน้าจอมีความกว้างน้อยกว่า 799px จะแสดงรูป image-portrait.jpg

การจัดการกับขนาดรูปภาพ (Density Descriptors)

เรายังสามารถกำหนดหลายขนาดของรูปภาพใน srcset ด้วยวิธี density descriptors เพื่อให้เบราว์เซอร์เลือกแหล่งที่มาที่เหมาะสมที่สุดตามความละเอียดของหน้าจอ

HTML
<picture>
  <source srcset="image-400.jpg 400w, image-800.jpg 800w" sizes="(max-width: 600px) 400px, 800px">
  <img src="image-small.jpg" alt="ตัวอย่าง density descriptors">
</picture>

ในตัวอย่างนี้ เบราว์เซอร์จะเลือกขนาดของรูปภาพตามความกว้างหน้าจอที่กำหนดใน sizes

สรุป

การใช้ <picture> element ใน HTML5 ช่วยเพิ่มความยืดหยุ่นในการแสดงผลรูปภาพ ทำให้สามารถกำหนดรูปภาพที่เหมาะสมตามขนาดหน้าจอ ประเภทไฟล์ หรือความละเอียดหน้าจอได้อย่างง่ายดาย

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ