แทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอเพื่อให้โหลดหน้าเว็บได้เร็วขึ้น

Houssein Djirdeh
Jeremy Wagner

คุณเคยเห็น GIF ภาพเคลื่อนไหวในบริการอย่าง Imgur หรือ Gfycat แล้วตรวจสอบในเครื่องมือสำหรับนักพัฒนาเว็บ แต่พบว่า GIF นั้นเป็นวิดีโอจริงๆ ไหม เหตุผลก็คือ GIF แบบเคลื่อนไหวอาจมีขนาด ใหญ่มาก

แผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บแสดง GIF ขนาด 13.7 MB

โชคดีที่การเพิ่มประสิทธิภาพการโหลดในส่วนนี้ใช้ความพยายามเพียงเล็กน้อย แต่ได้ผลลัพธ์ที่ยิ่งใหญ่ การแปลง GIF ขนาดใหญ่เป็น วิดีโอจะช่วยประหยัดแบนด์วิดท์ของผู้ใช้ได้มาก

วัดผลก่อน

ใช้ Lighthouse เพื่อตรวจสอบ GIF ที่แปลงเป็นวิดีโอได้ในเว็บไซต์ ใน DevTools ให้คลิกแท็บ Audits แล้วเลือกช่องทำเครื่องหมาย Performance จากนั้นเรียกใช้ Lighthouse และตรวจสอบรายงาน หากมี GIF ที่แปลงได้ คุณควรเห็นคำแนะนำให้ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาแบบเคลื่อนไหว" ดังนี้

การตรวจสอบ Lighthouse ที่ไม่ผ่าน ให้ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว

สร้างวิดีโอ MPEG

มีหลายวิธีในการแปลง GIF เป็นวิดีโอ โดยเครื่องมือที่ใช้ในคำแนะนำนี้คือ FFmpeg หากต้องการใช้ FFmpeg เพื่อแปลง GIF ชื่อ my-animation.gif เป็นวิดีโอ MP4 ให้เรียกใช้คำสั่งต่อไปนี้ในคอนโซล

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

คำสั่งนี้จะบอกให้ FFmpeg ใช้ my-animation.gif เป็นอินพุต ซึ่งระบุด้วยแฟล็ก -i และแปลงเป็นวิดีโอชื่อ my-animation.mp4

ตัวเข้ารหัส libx264 จะทำงานกับไฟล์ที่มีขนาดเป็นเลขคู่เท่านั้น เช่น 320 x 240 พิกเซล หาก GIF อินพุตมีขนาดเป็นเลขคี่ คุณสามารถใส่ฟิลเตอร์ครอบตัดเพื่อหลีกเลี่ยงไม่ให้ FFmpeg แสดงข้อผิดพลาด "height/width not divisible by 2" ดังนี้

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

สร้างวิดีโอ WebM

แม้ว่า MP4 จะมีมาตั้งแต่ปี 1999 แต่ WebM เป็นรูปแบบไฟล์ที่ค่อนข้างใหม่ซึ่งเปิดตัวครั้งแรกในปี 2010 วิดีโอ WebM มีขนาดเล็กกว่าวิดีโอ MP4 มาก แต่เบราว์เซอร์บางตัวไม่รองรับ WebM จึงควรสร้างทั้ง 2 รูปแบบ

หากต้องการใช้ FFmpeg เพื่อแปลง my-animation.gif เป็นวิดีโอ WebM ให้เรียกใช้คำสั่งต่อไปนี้ในคอนโซล

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

เปรียบเทียบความแตกต่าง

การประหยัดค่าใช้จ่ายระหว่าง GIF กับวิดีโออาจมีนัยสำคัญ

การเปรียบเทียบขนาดไฟล์แสดง 3.7 MB สำหรับ GIF, 551 KB สำหรับ MP4 และ 341 KB สำหรับ WebM

ในตัวอย่างนี้ GIF เริ่มต้นมีขนาด 3.7 MB เทียบกับเวอร์ชัน MP4 ซึ่งมีขนาด 551 KB และเวอร์ชัน WebM ซึ่งมีขนาดเพียง 341 KB

แทนที่ GIF img ด้วยวิดีโอ

GIF แบบเคลื่อนไหวมีลักษณะสำคัญ 3 อย่างที่วิดีโอต้องจำลอง

  • เล่นโดยอัตโนมัติ
  • เล่นซ้ำอย่างต่อเนื่อง (โดยปกติ แต่ป้องกันการเล่นซ้ำได้)
  • ไม่มีเสียง

โชคดีที่คุณสามารถสร้างลักษณะการทำงานเหล่านี้ใหม่ได้โดยใช้ <video>

<video autoplay loop muted playsinline></video>

องค์ประกอบ <video> ที่มีแอตทริบิวต์เหล่านี้จะเล่นโดยอัตโนมัติ เล่นซ้ำไม่สิ้นสุด ไม่เล่นเสียง และเล่นแบบอินไลน์ (นั่นคือ ไม่เต็มหน้าจอ) ซึ่งเป็นลักษณะการทำงานที่คาดหวังของ GIF แบบเคลื่อนไหว 🎉

สุดท้าย องค์ประกอบ <video> ต้องมีองค์ประกอบย่อย <source> อย่างน้อย 1 รายการ ที่ชี้ไปยังไฟล์วิดีโอต่างๆ ที่เบราว์เซอร์เลือกได้ ทั้งนี้ขึ้นอยู่กับ การรองรับรูปแบบของเบราว์เซอร์ ให้ระบุทั้ง WebM และ MP4 เพื่อให้เบราว์เซอร์ที่ไม่รองรับ WebM สามารถใช้ MP4 แทนได้

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

ผลกระทบต่อ Largest Contentful Paint (LCP)

โปรดทราบว่าแม้ว่าองค์ประกอบ <img> จะเป็นผู้สมัคร LCP แต่องค์ประกอบ <video> ที่ไม่มี poster รูปภาพ จะไม่เป็น ผู้สมัคร LCP ในกรณีของการจำลอง GIF แบบเคลื่อนไหว วิธีแก้ปัญหา ไม่ใช่ การเพิ่ม poster ลงใน <video> เนื่องจากระบบจะไม่ใช้รูปภาพดังกล่าว

การเปลี่ยนแปลงนี้ส่งผลต่อเว็บไซต์ของคุณอย่างไร เราขอแนะนำให้ใช้ <video> แทน GIF ภาพเคลื่อนไหว แต่ต้องเข้าใจว่าสื่อดังกล่าวจะไม่เป็นผู้สมัคร LCP และระบบจะใช้ผู้สมัครที่มีขนาดใหญ่ที่สุดถัดไปแทน เนื่องจาก GIF และ <video> มักจะมีขนาดใหญ่กว่าและดาวน์โหลดได้ช้ากว่า การเปลี่ยนไปใช้ผู้สมัคร LCP รายอื่นจึงน่าจะช่วยปรับปรุง LCP ของเว็บไซต์ได้ด้วย