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

Houssein Djirdeh

Jeremy Wagner

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

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

วัดก่อน

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

สร้างวิดีโอ 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 และวิดีโอได้ค่อนข้างมาก

ในตัวอย่างนี้ 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>

ลองเลย: แทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ

หมายเหตุ: เบราว์เซอร์จะไม่คาดเดาว่า <source> ใดเหมาะสมที่สุด ดังนั้นลำดับของ <source> จึงมีความสำคัญ ตัวอย่างเช่น หากคุณระบุวิดีโอ MP4 ก่อนและเบราว์เซอร์รองรับ WebM เบราว์เซอร์จะข้าม WebM <source> และใช้ MPEG-4 แทน หากคุณต้องการใช้ WebM <source> ก่อน โปรดระบุก่อน

ผลต่อ Largest Contentful Paint (LCP)

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

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