แทนที่ GIF ด้วยวิดีโอ

Rob Dodson

ในโค้ดแล็บนี้ เราจะปรับปรุงประสิทธิภาพด้วยการแทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ

วัดก่อน

ก่อนอื่นให้วัดประสิทธิภาพของเว็บไซต์ โดยทำดังนี้

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
2. กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
3. คลิกแท็บ Lighthouse
4. ตรวจสอบว่าได้เลือกช่องทําเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
5. คลิกปุ่มสร้างรายงาน

เมื่อดำเนินการเสร็จแล้ว คุณควรเห็นว่า Lighthouse แจ้งว่า GIF เป็นปัญหาในการตรวจสอบ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว"

ดาวน์โหลด FFmpeg

คุณสามารถแปลง GIF เป็นวิดีโอได้หลายวิธี โดยคู่มือนี้ใช้ FFmpeg โปรแกรมนี้ติดตั้งอยู่ใน VM ของ Glitch อยู่แล้ว และหากต้องการ คุณสามารถทำตามวิธีการเหล่านี้เพื่อติดตั้งโปรแกรมในเครื่องของคุณเองได้เช่นกัน

เปิดคอนโซล

ตรวจสอบอีกครั้งว่า FFmpeg ติดตั้งและทํางานอยู่

1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
2. คลิก Terminal (หมายเหตุ: หากปุ่ม Terminal ไม่แสดง คุณอาจต้องใช้ตัวเลือก "เต็มหน้าจอ")
3. ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้

which ffmpeg

คุณควรได้รับเส้นทางไฟล์กลับคืนมา

/usr/bin/ffmpeg

เปลี่ยน GIF เป็นวิดีโอ

• ในคอนโซล ให้เรียกใช้ cd images เพื่อเข้าสู่ไดเรกทอรีรูปภาพ
• เรียกใช้ ls เพื่อดูเนื้อหา

คุณควรเห็นข้อมูลในลักษณะนี้

$ ls
cat-herd.gif

• ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้

ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

ซึ่งจะบอกให้ FFmpeg นำอินพุตที่แสดงด้วย Flag -i ของไฟล์ cat-herd.gif และแปลงเป็นวิดีโอชื่อ cat-herd.mp4 ซึ่งจะใช้เวลาประมาณ 1 วินาที เมื่อคำสั่งเสร็จสิ้นแล้ว คุณควรจะพิมพ์ ls อีกครั้งได้ และจะเห็นไฟล์ 2 ไฟล์ดังนี้

$ ls
cat-herd.gif  cat-herd.mp4

สร้างวิดีโอ WebM

แม้ว่า MP4 จะใช้มาตั้งแต่ปี 1999 แต่ WebM เพิ่งเปิดตัวครั้งแรกในปี 2010 วิดีโอ WebM มีขนาดเล็กกว่าวิดีโอ MP4 มาก จึงควรสร้างทั้ง 2 รูปแบบ แต่โชคดีที่องค์ประกอบ <video> ให้คุณเพิ่มแหล่งที่มาได้หลายแหล่ง ดังนั้นหากเบราว์เซอร์ไม่รองรับ WebM ก็จะเปลี่ยนไปใช้ MP4 ได้

• ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้

ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm

• หากต้องการตรวจสอบขนาดไฟล์ ให้เรียกใช้คำสั่งต่อไปนี้

ls -lh

คุณควรมี GIF 1 รายการและวิดีโอ 2 รายการ ดังนี้

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

โปรดทราบว่า GIF ต้นฉบับมีขนาด 3.7 ล้าน ในขณะที่เวอร์ชัน MP4 มีขนาด 551 KB และเวอร์ชัน WebM มีขนาดเพียง 341 KB ประหยัดไปได้เยอะเลย

อัปเดต HTML เพื่อสร้างเอฟเฟกต์ GIF อีกครั้ง

GIF แบบเคลื่อนไหวมีลักษณะสำคัญ 3 ประการที่วิดีโอต้องจำลองให้ได้

• โดยระบบจะเล่นโดยอัตโนมัติ
• โดยปกติแล้ววิดีโอจะเล่นวนซ้ำอย่างต่อเนื่อง แต่คุณก็ป้องกันไม่ให้เล่นวนซ้ำได้
• ไม่มีการตอบกลับ

แต่คุณสร้างลักษณะการทำงานเหล่านี้อีกครั้งได้โดยใช้องค์ประกอบ <video>

• ในไฟล์ index.html ให้แทนที่บรรทัดที่มี <img> ด้วยข้อความต่อไปนี้

<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

องค์ประกอบ <video> ที่ใช้แอตทริบิวต์เหล่านี้จะเล่นโดยอัตโนมัติ เล่นซ้ำแบบไม่สิ้นสุด ไม่มีเสียง และเล่นในบรรทัด (ไม่ใช่แบบเต็มหน้าจอ) ซึ่งเป็นลักษณะการทำงานทั้งหมดที่ GIF แบบเคลื่อนไหวควรมี 🎉

ระบุแหล่งที่มา

ขั้นตอนสุดท้ายคือระบุแหล่งที่มาของวิดีโอ องค์ประกอบ <video> ต้องมีองค์ประกอบย่อย <source> อย่างน้อย 1 รายการที่ชี้ไปยังไฟล์วิดีโอต่างๆ ที่เบราว์เซอร์จะเลือกได้ ทั้งนี้ขึ้นอยู่กับการรองรับรูปแบบ อัปเดต <video> ด้วยองค์ประกอบ <source> ที่ลิงก์ไปยังวิดีโอฝูงแมว

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Preview

• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ

ประสบการณ์การใช้งานควรมีลักษณะเหมือนเดิม จนถึงตอนนี้ทุกอย่างเรียบร้อยดี

ยืนยันด้วย Lighthouse

เมื่อเปิดเว็บไซต์เวอร์ชันที่เผยแพร่อยู่ ให้ทำดังนี้

1. กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
2. คลิกแท็บ Lighthouse
3. ตรวจสอบว่าได้เลือกช่องทําเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
4. คลิกปุ่มสร้างรายงาน

คุณควรเห็นว่าการตรวจสอบ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว" ผ่านแล้ว ไชโย 💪