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

HTML5 การใช้งาน picture Tag

ใน HTML5, <picture> tag ถูกใช้เพื่อสร้าง responsive images โดยให้ผู้พัฒนาเว็บสามารถระบุแหล่งที่มา (source) ของรูปภาพที่แตกต่างกันได้ตามเงื่อนไข เช่น ขนาดหน้าจอ ความละเอียดของอุปกรณ์ ฯลฯ <picture> ทำงานร่วมกับ <source> tag และ <img> tag เพื่อสร้างระบบภาพที่สามารถตอบสนองต่อเงื่อนไขที่ระบุได้อย่างยืดหยุ่น

โครงสร้างของ <picture> tag

HTML
<picture>
  <source srcset="image1.webp" type="image/webp">
  <source srcset="image1.jpg" type="image/jpeg">
  <img src="image1.jpg" alt="A description of the image">
</picture>

การทำงาน:

  1. <picture>: เป็น container สำหรับ <source> และ <img> tag
  2. <source>: ใช้ระบุรูปภาพตามเงื่อนไขต่าง ๆ
    • srcset: ระบุแหล่งที่มาของรูปภาพ
    • type: ระบุประเภทของไฟล์รูปภาพ (เช่น image/webp, image/jpeg)
  3. <img>: ใช้เป็น fallback ในกรณีที่เบราว์เซอร์ไม่รองรับ <picture> tag หรือไม่สามารถโหลดรูปภาพจาก <source> ได้

การใช้งาน <picture> tag ในรูปแบบต่างๆ

1. เปลี่ยนภาพตามประเภทของไฟล์

ใช้ <picture> เพื่อรองรับรูปแบบไฟล์ที่แตกต่างกันในเบราว์เซอร์ที่ต่างกัน เช่น WebP ที่มีขนาดไฟล์เล็กกว่า แต่บางเบราว์เซอร์อาจไม่รองรับ

HTML
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Sample image">
</picture>

2. เปลี่ยนภาพตามขนาดหน้าจอ

สามารถใช้คุณสมบัติ media เพื่อเปลี่ยนภาพตามขนาดหน้าจอได้ เช่น อุปกรณ์หน้าจอใหญ่จะแสดงรูปที่มีความละเอียดสูงกว่า

HTML
<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <source media="(max-width: 799px)" srcset="small-image.jpg">
  <img src="small-image.jpg" alt="Responsive image">
</picture>

3. เปลี่ยนภาพตามความละเอียดของอุปกรณ์ (retina display)

การใช้ srcset สามารถระบุขนาดของรูปภาพที่แตกต่างกันตามค่า pixel density ของอุปกรณ์

HTML
<picture>
  <source srcset="image-2x.jpg 2x, image-1x.jpg 1x">
  <img src="image-1x.jpg" alt="High resolution image">
</picture>

4. รองรับรูปภาพที่ปรับขนาดโดยอัตโนมัติ

เราสามารถใช้ sizes และ srcset เพื่อกำหนดขนาดรูปภาพที่ควรแสดงตามขนาดหน้าจอและการตั้งค่าของผู้ใช้

HTML
<picture>
  <source 
    srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1200w"
    sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
  <img src="image-large.jpg" alt="Responsive image">
</picture>
  • srcset: ระบุรูปภาพที่แตกต่างกันตามความกว้าง (width)
  • sizes: ระบุว่าภาพไหนควรแสดงตามขนาดหน้าจอ

สรุป

การใช้งาน <picture> tag ช่วยให้เราสามารถสร้างเว็บที่ตอบสนองกับผู้ใช้ได้ดีมากขึ้น โดยเฉพาะในด้านของการแสดงผลรูปภาพที่ปรับให้เหมาะสมกับอุปกรณ์และเงื่อนไขที่แตกต่างกัน

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

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