ส่วนโอกาสในรายการรายงาน Lighthouse GIF แบบเคลื่อนไหวทั้งหมด พร้อมกับค่าใช้จ่ายที่ประหยัดได้โดยประมาณในหน่วยวินาที ด้วยการแปลง GIF เหล่านี้ให้เป็นวิดีโอ
เหตุผลที่คุณควรแทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ
GIF ขนาดใหญ่ไม่มีประสิทธิภาพในการแสดงเนื้อหาภาพเคลื่อนไหว การแปลง GIF ขนาดใหญ่เป็นวิดีโอช่วยให้คุณประหยัดเงินของผู้ใช้ได้เป็นอย่างมาก แบนด์วิดท์ พิจารณาใช้วิดีโอ MPEG4/WebM สำหรับภาพเคลื่อนไหวและ PNG/WebP สำหรับภาพนิ่งแทน GIF เพื่อประหยัดไบต์ของเครือข่าย
สร้างวิดีโอ MPEG
การแปลง GIF เป็นวิดีโอทำได้หลายวิธี
FFmpeg เป็นเครื่องมือที่ใช้ในคู่มือนี้
หากต้องการใช้ FFmpeg เพื่อแปลง GIF my-animation.gif เป็นวิดีโอ MP4 ให้เรียกใช้คำสั่งต่อไปนี้ในคอนโซล
ffmpeg -i my-animation.gif my-animation.mp4
ซึ่งจะบอกให้ FFmpeg ใช้ my-animation.gif เป็นอินพุต ดังที่ระบุโดย Flag -i และแปลงเป็นวิดีโอชื่อ my-animation.mp4
สร้างวิดีโอ WebM
วิดีโอ 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 ประการที่วิดีโอจะต้องจำลองมีดังนี้
- รูปภาพจะเล่นโดยอัตโนมัติ
- โดยปกติแล้ววิดีโอจะเล่นวนซ้ำอย่างต่อเนื่อง แต่คุณก็ป้องกันไม่ให้เล่นวนซ้ำได้
- เสียงเงียบ
โชคดีที่คุณสามารถสร้างลักษณะการทำงานเหล่านี้ขึ้นมาอีกครั้งได้โดยใช้เอลิเมนต์ <video>
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
ใช้บริการที่แปลง GIF เป็นวิดีโอ HTML5
CDN สำหรับรูปภาพจำนวนมากรองรับการแปลง GIF เป็นวิดีโอ HTML5 คุณอัปโหลด GIF ไปยัง CDN รูปภาพ และ CDN สำหรับรูปภาพแสดงวิดีโอ HTML5
คำแนะนำเฉพาะสแต็ก
AMP
สำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว ให้ใช้
amp-anim เพื่อลด CPU
ใช้เมื่อเนื้อหาไม่อยู่ในหน้าจอ