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