วิธีใช้รูปภาพเคลื่อนไหว (Animated GIF) ใน HTML

รูปภาพเคลื่อนไหวใน HTML ใช้ไฟล์ GIF (Graphics Interchange Format) แสดงได้โดยตรงด้วยแท็ก <img> เหมือนรูปภาพทั่วไป

รูปแบบพื้นฐาน

<img src="animation.gif" alt="คำอธิบาย" width="300" height="200">

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>Animated Image</title>
</head>
<body>
  <h1>Animated Image</h1>
  <img src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif" alt="Funny cat animation">
</body>
</html>

ข้อควรระวัง

• ขนาดไฟล์: GIF ใหญ่มาก (ไม่มี compression ดี) ใช้ MP4/WebM + <video> แทนได้
• Performance: GIF ใหญ่หลายตัว ทำหน้าเว็บช้า
• Accessibility: ต้องมี alt อธิบายเนื้อหา การเคลื่อนไหวอาจก่อให้เกิด seizure (WCAG: ไม่ควรกระพริบ > 3 ครั้ง/วินาที)
• Loop: GIF มัก loop ตลอดเวลา อาจรบกวนผู้ใช้

ตัวเลือกที่ดีกว่า GIF

Video แทน GIF (แนะนำ)

<video autoplay loop muted playsinline src="animation.mp4"></video>
<!-- autoplay=เล่นทันที, loop=วนซ้ำ, muted=จำเป็นสำหรับ autoplay, playsinline=ไม่เต็มจอ mobile -->