GIF Loaders กับ Vector Animation: เหตุใดทีมจึงแทนที่ GIF แบบเคลื่อนไหวใน UI
เหตุใด GIF แบบเคลื่อนไหวจึงไม่เหมาะกับตัวโหลด UI และไอคอน สิ่งที่ควรใช้แทน (CSS, SVG, Lottie, วิดีโอ, รันไทม์ตามสถานะ) และวิธีเลือก
หลัก Takeaway
GIF แบบเคลื่อนไหวจำกัดให้ใช้จานสีได้สูงสุด 256 สี มีความโปร่งใสเปิดหรือปิด เบลอเมื่อปรับขนาด และไม่สามารถตอบสนองต่อสถานะแอปได้ สำหรับตัวโหลดและไอคอน UI แอนิเมชั่น CSS หรือ SVG มักจะเบากว่าและคมชัดกว่า Lottie ใช้งานได้เพื่อภาพประกอบที่สมบูรณ์ยิ่งขึ้น และรันไทม์ตามสถานะ เช่น ExodeUI หรือ Rive จะดีที่สุดเมื่อภาพเคลื่อนไหวต้องเปลี่ยนแปลงตามการโหลด สำเร็จ และข้อผิดพลาด
สิ่งที่ GIF ทำได้และไม่สามารถทำได้
คู่มือรูปแบบภาพของ MDN อธิบายว่าแต่ละพิกเซล GIF เป็นดัชนีในจานสีที่มีสีมากที่สุด 256 สี และตั้งข้อสังเกตว่ารูปแบบเก่า เช่น GIF ทำงานได้ไม่ดีเมื่อเทียบกับรูปแบบใหม่ เช่น WebP และ AVIF สำหรับ UI ปัญหาในทางปฏิบัติคือการมีแถบสีไล่ระดับสี ขอบหยักบนพื้นหลังโปร่งใส การปรับขนาดไม่ชัดบนหน้าจอที่มีความหนาแน่นสูง และไม่มีวิธีตอบสนองต่อสิ่งที่แอปกำลังทำอยู่
จะใช้อะไรแทน.
เลือกตามสิ่งที่ภาพเคลื่อนไหวต้องทำ:
- สปินเนอร์หรือพัลส์ธรรมดา: แอนิเมชั่น CSS หรือ SVG แบบอินไลน์ ขนาดเล็ก คมชัด และหยุดชั่วคราวได้ง่ายเพื่อลดการเคลื่อนไหว
- ลูปหรือไอคอนภาพประกอบ: Lottie หรือ SVG แบบเคลื่อนไหว เวกเตอร์ ปรับขนาดได้ เล็กสำหรับงานศิลปะง่ายๆ
- ภาพถ่ายหรือฟุตเทจที่ซับซ้อน: วิดีโอ (WebM หรือ MP4) หรือภาพเคลื่อนไหว WebP/AVIF ไม่ใช่ GIF
- ตัวโหลดที่กลายเป็นความสำเร็จหรือข้อผิดพลาด: รันไทม์ตามสถานะ เช่น ExodeUI หรือ Rive ซึ่งขับเคลื่อนโดยสถานะของแอป
รถตักควรรู้ว่าเกิดอะไรขึ้น
GIF วนซ้ำในลักษณะเดียวกันไม่ว่าคำขอจะใช้เวลาหนึ่งวินาทีหรือหนึ่งนาที และจะไม่กลายเป็นเครื่องหมายถูกเมื่องานเสร็จสิ้น ตัวโหลดตามสถานะสามารถย้ายจากการโหลดไปสู่ความสำเร็จหรือข้อผิดพลาด และแสดงความคืบหน้า ซึ่งบอกอะไรผู้คนได้มากกว่าแค่ภาพที่หมุนอยู่
การเข้าถึง
การวนซ้ำ GIF ไม่สามารถเคารพการตั้งค่าการลดการเคลื่อนไหวได้ด้วยตัวเอง CSS, SVG และภาพเคลื่อนไหวรันไทม์สามารถหยุดชั่วคราวหรือทำให้ง่ายขึ้นได้เมื่อผู้ใช้ขอให้มีการเคลื่อนไหวน้อยลง นอกจากนี้ ยังให้ป้ายกำกับที่เข้าถึงได้แก่ตัวโหลด เช่น "กำลังโหลดผลลัพธ์" เพื่อให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบว่าเกิดอะไรขึ้น
คีย์ Principles ที่ต้องจำ
- จานสี GIF สามารถเก็บสีได้สูงสุด 256 สีและปรับขนาดได้ไม่ดี
- ใช้ CSS หรือ SVG สำหรับตัวโหลดแบบธรรมดา
- ใช้ Lottie สำหรับลูปที่มีภาพประกอบ และวิดีโอสำหรับฟุตเทจ
- ใช้รันไทม์ตามสถานะเมื่อการโหลดต้องกลายเป็นสำเร็จหรือผิดพลาด
- รองรับการเคลื่อนไหวที่ลดลงและเพิ่มป้ายกำกับที่สามารถเข้าถึงได้
คำถามที่พบบ่อย
แหล่งที่มา
- Image file type and format guide — MDN เว็บเอกสาร
- lottie-web — GitHub (แอร์บีเอ็นบี)
- prefers-reduced-motion — MDN เว็บเอกสาร