ส่วนโอกาสของรายงาน 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 ขณะที่เนื้อหาไม่ได้อยู่ในหน้าจอ
Drupal
ลองอัปโหลด GIF ไปยังบริการที่ฝัง GIF เป็นวิดีโอได้