ส่วนโอกาสของรายงาน 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 ซึ่งระบุด้วยแฟล็ก -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 เมื่อเนื้อหาไม่ได้อยู่บนหน้าจอ