แท็ก <img> ใช้สำหรับฝังรูปภาพในหน้าเว็บ เป็น Void Element (ไม่มีแท็กปิด) ต้องมีแอตทริบิวต์ src และ alt เสมอ
แอตทริบิวต์สำคัญ
| แอตทริบิวต์ | ค่า | คำอธิบาย | สถานะ |
|---|---|---|---|
| src | URL | ที่อยู่ของไฟล์รูปภาพ (บังคับ) | จำเป็น |
| alt | ข้อความ | ข้อความทางเลือกเมื่อโหลดไม่ได้/สำหรับ Screen Reader (บังคับ) | จำเป็น |
| width | พิกเซล หรือ % | ความกว้างของภาพ | แนะนำ |
| height | พิกเซล หรือ % | ความสูงของภาพ | แนะนำ |
| loading | lazy / eager | โหลดแบบ Lazy (HTML5) - ประหยัดแบนด์วิดท์ | ใหม่ |
| crossorigin | anonymous / use-credentials | CORS setting สำหรับ Canvas | HTML5 |
| srcset | URLs | เซตภาพสำหรับ Responsive Images | HTML5 |
| sizes | Media conditions | ขนาดภาพสำหรับ srcset | HTML5 |
| usemap | #mapname | เชื่อมกับ Image Map (<map>) | รองรับ |
| ismap | (boolean) | Server-side Image Map | รองรับ |
| decoding | async / sync / auto | โหมดถอดรหัสภาพ | ใหม่ |
| fetchpriority | high / low / auto | ลำดับความสำคัญการดึง (ใหม่) | ใหม่ |
แอตทริบิวต์ที่ Deprecated (ไม่ควรใช้)
- align, border, hspace, vspace, longdesc - ใช้ CSS แทน
ตัวอย่างพื้นฐาน
<!DOCTYPE html>
<html>
<head>
<title>ตัวอย่าง HTML img Tag</title>
</head>
<body>
<img src="https://www.example.com/image.jpg"
alt="เรียนรู้ HTML5"
width="270" height="250"
loading="lazy">
</body>
</html>Responsive Images ด้วย srcset/sizes
<img src="small.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="ภาพตัวอย่าง">แนวทางปฏิบัติที่ดี
- ระบุ
widthและheightเสมอ เพื่อป้องกัน Layout Shift (CLS) - เขียน
alt ให้สื่อความหมาย (ไม่ใช่ "image", "photo") - ใช้
loading="lazy"สำหรับภาพที่ไม่อยู่ Above the fold - ใช้รูปแบบ WebP/AVIF พร้อม Fallback
- Optimize ขนาดไฟล์ก่อนนำไปใช้
