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

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

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

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

วัดก่อน

ใช้ Lighthouse เพื่อตรวจสอบเว็บไซต์ว่ามี GIF ที่แปลงเป็นวิดีโอได้หรือไม่ ใน DevTools คลิกแท็บ การตรวจสอบ และเลือกช่องทำเครื่องหมายประสิทธิภาพ จากนั้นเรียกใช้ 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 เป็น input ซึ่งบ่งบอกด้วย -i ไม่เหมาะสม และแปลงเป็นวิดีโอชื่อ my-animation.mp4

โปรแกรมเปลี่ยนไฟล์ libx264 ใช้ได้เฉพาะกับไฟล์ที่มีขนาดเท่ากัน เช่น 320 พิกเซล x 240 พิกเซล หาก GIF ที่อินพุตมีขนาดคี่ คุณสามารถใส่ฟิลเตอร์ครอบตัด หลีกเลี่ยง FFmpeg การเขียน "ความสูง/ความกว้างไม่สามารถหารด้วย 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 เท่านั้น

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

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 ของเว็บไซต์ได้ด้วย