HTML <รูปภาพ>องค์ประกอบ
องค์ประกอบ HTML <picture>ช่วยให้คุณสามารถแสดงรูปภาพต่างๆ สำหรับอุปกรณ์หรือขนาดหน้าจอที่แตกต่างกัน
HTML <รูปภาพ> องค์ประกอบ
องค์ประกอบ HTML <picture>ช่วยให้นักพัฒนาเว็บมีความยืดหยุ่นมากขึ้นในการระบุทรัพยากรภาพ
<picture>องค์ประกอบประกอบด้วยองค์ประกอบตั้งแต่หนึ่งองค์ประกอบขึ้นไป<source>แต่ละองค์ประกอบอ้างอิงถึงรูปภาพที่แตกต่างกันผ่านsrcset
แอตทริบิวต์ วิธีนี้ทำให้เบราว์เซอร์สามารถเลือกภาพที่เหมาะสมกับมุมมองและ/หรืออุปกรณ์ปัจจุบันมากที่สุด
แต่ละ<source>องค์ประกอบมี
mediaคุณลักษณะที่กำหนดว่าเมื่อใดที่ภาพจะเหมาะสมที่สุด
ตัวอย่าง
แสดงภาพต่างๆ สำหรับขนาดหน้าจอต่างๆ:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
หมายเหตุ:ระบุ<img>องค์ประกอบเป็นองค์ประกอบลูกสุดท้ายของ<picture>องค์ประกอบเสมอ องค์ประกอบ<img>นี้ถูกใช้โดยเบราว์เซอร์ที่ไม่สนับสนุน<picture>องค์ประกอบ หรือหากไม่มี<source>แท็กที่ตรงกัน
เมื่อใดควรใช้องค์ประกอบภาพ
มีวัตถุประสงค์หลักสองประการสำหรับ<picture>องค์ประกอบ:
1. แบนด์วิดธ์
หากคุณมีหน้าจอหรืออุปกรณ์ขนาดเล็ก ไม่จำเป็นต้องโหลดไฟล์รูปภาพขนาดใหญ่ เบราว์เซอร์จะใช้<source>
องค์ประกอบแรกที่มีค่าแอตทริบิวต์ที่ตรงกัน และละเว้นองค์ประกอบใดๆ ต่อไปนี้
2. รองรับรูปแบบ
เบราว์เซอร์หรืออุปกรณ์บางอย่างอาจไม่รองรับรูปแบบรูปภาพทั้งหมด ด้วยการใช้
<picture>องค์ประกอบ คุณสามารถเพิ่มรูปภาพของทุกรูปแบบ และเบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก และละเว้นองค์ประกอบใดๆ ต่อไปนี้
ตัวอย่าง
เบราว์เซอร์จะใช้รูปแบบภาพแรกที่รู้จัก:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
หมายเหตุ:เบราว์เซอร์จะใช้<source>องค์ประกอบแรกที่มีค่าแอตทริบิวต์ที่ตรงกัน และละเว้น<source>องค์ประกอบ ใดๆ ต่อไปนี้
แท็กรูปภาพ HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา