คุณเคยเห็น 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>
ผลต่อ Largest Contentful Paint (LCP)
โปรดทราบว่าแม้องค์ประกอบ <img> จะเป็นตัวเลือกสำหรับ LCP แต่องค์ประกอบ <video> ที่ไม่มีรูปภาพ poster ไม่ใช่ตัวเลือก LCP วิธีแก้ปัญหาในกรณีการเลียนแบบ GIF แบบเคลื่อนไหวคือไม่ควรเพิ่มแอตทริบิวต์ poster ลงในองค์ประกอบ <video> เพราะระบบจะไม่ใช้รูปภาพนั้น
ผลกระทบต่อเว็บไซต์ ขอแนะนำให้ใช้ <video> แทน GIF แบบเคลื่อนไหว ทั้งนี้เนื่องจากเข้าใจดีว่าสื่อดังกล่าวจะไม่ใช่ตัวเลือกที่เหมาะสมสำหรับ LCP และจะมีการใช้สื่อขนาดใหญ่รองลงมาแทน เนื่องจาก GIF และ <video> มักมีขนาดใหญ่และช้ากว่าการดาวน์โหลดอย่างมาก การเปลี่ยนไปใช้ตัวเลือก LCP อื่นอาจปรับปรุง LCP ของเว็บไซต์ได้ด้วย