วิธีใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว (แถมทำไมต้องกังวล)

เหตุใดจึงต้องใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว

ก่อนที่เราจะแสดงวิธีการใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว เรามาคุยกัน ว่าทำไม คุณถึงต้องการทำเช่นนั้น ประการแรก มีเหตุผลมากมายในการรวมภาพเคลื่อนไหวไว้ในไซต์ของคุณ คุณอาจต้องการใช้เพื่อสร้างความบันเทิง มีส่วนร่วม หรือแม้แต่แจ้งให้ผู้ใช้ทราบ

รูปแบบการแลกเปลี่ยนกราฟิก (GIF) เป็นประเภทไฟล์ยอดนิยมที่แสดงเนื้อหาภาพเคลื่อนไหว คุณอาจคุ้นเคยกับไลบรารี GIF ยอดนิยม GIPHY:

อย่างไรก็ตาม ไฟล์ GIF อาจมีขนาดใหญ่ ทำให้ต้องใช้แบนด์วิธจำนวนมากเพื่อให้ทำงานได้ ส่งผลให้ความเร็วของเว็บไซต์ของคุณอาจลดลง

หน้าเว็บที่โหลดช้าอาจสร้างประสบการณ์ที่ไม่ดีแก่ผู้ใช้ ยิ่งไปกว่านั้น หากไซต์ของคุณทำงานได้ไม่ดี อาจส่งผลต่อคะแนน Core Web Vitals และลดอันดับในผลการค้นหา

หากคุณกังวลเกี่ยวกับประสิทธิภาพไซต์ของคุณอยู่แล้ว คุณอาจพบว่า GIF เป็นต้นเหตุของปัญหาเมื่อใช้ PageSpeed ​​Insights เครื่องมือยอดนิยมนี้ให้คำแนะนำแก่ผู้ใช้เกี่ยวกับวิธีปรับปรุงความเร็วไซต์ คำแนะนำทั่วไปประการหนึ่งคือ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว" นอกจากนี้ คุณอาจได้รับคำแนะนำเดียวกันในส่วนโอกาส หากคุณใช้เครื่องมือ Lighthouse ของ Google

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

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

วิธีใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว

ตอนนี้คุณรู้แล้วว่าทำไมคุณถึงต้องการใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว เราจะแนะนำคุณผ่านสามขั้นตอนในการทำเช่นนั้น!

• ขั้นตอนที่ 1: สร้างวิดีโอ MP4
• ขั้นตอนที่ 2: สร้างวิดีโอ WebM
• ขั้นตอนที่ 3: กำหนดค่าวิดีโอของคุณเป็น GIF

ขั้นตอนที่ 1: สร้างวิดีโอ MP4

หากคุณต้องการใช้วิดีโอแทน GIF ขั้นตอนแรกคือการแปลงไฟล์ภาพเคลื่อนไหวเป็นไฟล์วิดีโอ MP4 เป็นหนึ่งในรูปแบบไฟล์วิดีโอที่ใช้บ่อยที่สุด ดังนั้นจึงเป็นจุดเริ่มต้นที่ดี

คุณสามารถแปลงรูปแบบไฟล์ต่างๆ ได้อย่างง่ายดายโดยใช้เครื่องมือพัฒนาฟรี เช่น FFmpeg:

โปรดทราบว่า FFmpeg ช่วยให้คุณสามารถแปลงรูปแบบไฟล์โดยใช้บรรทัดคำสั่ง ดังนั้น หากคุณต้องการใช้วิธีนี้ จะเป็นการดีที่สุดหากคุณมีประสบการณ์กับโปรแกรมประเภทนี้มาบ้างแล้ว

เมื่อคุณติดตั้ง FFmpeg บนระบบปฏิบัติการของคุณแล้ว ให้ไปที่เครื่องมือบรรทัดคำสั่งและเรียกใช้สิ่งต่อไปนี้:

ffmpeg -i your-animation.gif your-animation.mp4

ตรวจสอบให้แน่ใจว่าได้สลับชื่อสำหรับไฟล์อินพุตและเอาต์พุตของคุณเอง แทนที่ your-animation.gif และ your-animation.mp4

สิ่งนี้จะแปลง GIF ของคุณเป็นวิดีโอ MP4

ขั้นตอนที่ 2: สร้างวิดีโอ WebM

ดังที่ได้กล่าวไว้ก่อนหน้านี้ ไฟล์วิดีโอมีขนาดเล็กและมีประสิทธิภาพมากกว่ารูปแบบไฟล์แอนิเมชันยอดนิยม เช่น GIF อย่างไรก็ตาม คุณสามารถเลือกไฟล์วิดีโอได้หลายประเภท MP4 อาจเป็นที่นิยมมากที่สุด แต่ไฟล์วิดีโอ WebM มีขนาดเล็กกว่า

ไม่ใช่เว็บเบราว์เซอร์ทั้งหมดที่รองรับรูปแบบไฟล์ WebM แต่ก็ยังควรสร้างทั้งไฟล์ .mp4 และ .webm ด้วยวิธีนี้ คุณจะใช้แหล่งวิดีโอใดก็ได้ในขั้นตอนถัดไป

ข่าวดีก็คือคุณสามารถสร้างไฟล์วิดีโอ WebM โดยใช้ FFmpeg เพียงป้อนรหัสต่อไปนี้ในเครื่องมือบรรทัดคำสั่งของคุณ:

ffmpeg -i your-animation.gif -c vp9 -b:v 0 -crf 41 your-animation.webm

ตรวจสอบให้แน่ใจอีกครั้งว่าได้สลับชื่อไฟล์เฉพาะของคุณ

ขั้นตอนที่ 3: กำหนดค่าวิดีโอของคุณเป็น GIF

หลังจากที่คุณสร้างไฟล์แล้ว ขั้นตอนสุดท้ายคือการแสดงวิดีโอของคุณ หากคุณใช้ WordPress หรือแพลตฟอร์มอื่นใดที่อนุญาตให้คุณฝังโค้ดได้ คุณสามารถใช้องค์ประกอบ html <video> แบบธรรมดาได้ นอกจากนี้ คุณสามารถกำหนดค่าการฝังวิดีโอของคุณให้ทำงานเหมือน GIF ได้อย่างง่ายดายโดยเพิ่มคุณสมบัติบางอย่าง

โดยเฉพาะอย่างยิ่ง คุณอาจต้องการตรวจสอบว่าตั้งค่าเป็นเล่นอัตโนมัติ เล่นวนซ้ำ และไม่มีเสียง หากต้องการเลียนแบบลักษณะเหล่านี้ เพียงใช้ข้อมูลโค้ดต่อไปนี้:

<video autoplay loop muted playsinline>

<source src="your-animation.webm" type="video/webm"/>

<source src="your-animation.mp4" type="video/mp4"/>

</video>

อย่างที่คุณเห็น คุณสามารถใช้แหล่งวิดีโอสองแหล่งได้ การดำเนินการนี้อาจดูซ้ำซ้อน แต่เบราว์เซอร์จะใช้แหล่งใดก็ตามที่สามารถระบุได้ก่อน หมายความว่าหากรองรับไฟล์ WebM ก็จะใช้ตัวเลือกนั้นก่อน

เมื่อคุณฝังโค้ดข้างต้นบนไซต์ของคุณแล้ว คุณอาจต้องการทดสอบเพื่อให้แน่ใจว่าโค้ดทำงานอย่างถูกต้องในส่วนหน้า แค่นั้นแหละ! นอกจากนี้ คุณอาจต้องการกลับไปที่ PageSpeed ​​Insights หรือ Lighthouse เพื่อดูว่าคะแนนความเร็วไซต์ของคุณดีขึ้นมากน้อยเพียงใดหลังจากทำการเปลี่ยนแปลงนี้

ทางลัดสำหรับการใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว

ดังที่เราได้เห็นแล้ว การแปลงไฟล์แอนิเมชันเป็นวิดีโอด้วยตนเองสามารถทำได้ค่อนข้างง่ายเมื่อคุณใช้เครื่องมือเช่น FFmpeg อย่างไรก็ตาม หากคุณไม่คุ้นเคยกับการใช้บรรทัดคำสั่ง การเริ่มต้นอาจทำได้ยาก ยิ่งไปกว่านั้น หากคุณไม่มีเหตุผลอื่นที่จะใช้มัน การเรียนรู้ทักษะนี้อาจไม่สมเหตุสมผล

ในกรณีนั้น คุณอาจกำลังมองหาทางลัดสำหรับใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว ข่าวดีก็คือคุณสามารถใช้ Image Content Delivery Network (CDN) เพื่อให้ได้ผลลัพธ์เดียวกัน ยิ่งไปกว่านั้น เมื่อคุณใช้ WordPress คุณจะได้รับ CDN อิมเมจพร้อมปลั๊กอินเพิ่มประสิทธิภาพ

Optimole ช่วยให้คุณปรับแต่งทุกอย่างที่เกี่ยวข้องกับรูปภาพด้วย Image CDN และเครื่องมืออื่นๆ ดังนั้นจึงเป็นทางออกที่ดีสำหรับงาน:

ในการเริ่มต้นใช้งาน Optimole ให้ติดตั้งและเปิดใช้งานปลั๊กอินในแดชบอร์ด WordPress ของคุณ จากนั้น คุณจะได้รับแจ้งให้สร้างบัญชีกับ Optimole

จากนั้น คุณจะได้รับการยืนยันทางอีเมลที่มีรายละเอียดการเข้าสู่ระบบของคุณ รวมทั้งลิงก์เพื่อเปิดใช้งานบัญชีใหม่ของคุณ เมื่อคุณเปิดใช้งานบัญชีของคุณแล้ว คุณจะได้รับรหัส API ซึ่งคุณสามารถใช้เชื่อมต่อเว็บไซต์ของคุณกับบัญชีของคุณได้

จากนั้น คุณจะสามารถเข้าถึง Optimole ได้โดยตรงในแดชบอร์ด WordPress ของคุณ เพียงไปที่ Media > Optimole > Settings :

ในหน้าจอนี้ ให้เปิดตัวเลือก ขั้นสูง ของคุณ ภายใต้ การบีบอัด ให้ค้นหาแผง การแปลงเปิดใช้งาน Gif เป็นวิดีโอ และเพียงแค่สลับปุ่มเพื่อเปิดใช้งานคุณลักษณะนี้:

จากนั้นคลิกที่ บันทึกการเปลี่ยนแปลง มันง่ายเหมือนที่!

ตอนนี้ Optimole จะสแกนไซต์ของคุณและแปลงรูปภาพ GIF เป็นไฟล์วิดีโอโดยอัตโนมัติ ใช้ทั้งรูปแบบ MP4 และ WebM ซึ่งหมายความว่าเนื้อหาภาพเคลื่อนไหวของคุณจะแสดงในรูปแบบวิดีโอที่เหมาะสมที่สุดเสมอ!

สรุปวิธีใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว

เมื่อคุณรวมเนื้อหาภาพที่สะดุดตาบนเว็บไซต์ของคุณ คุณอาจมีแนวโน้มที่จะดึงความสนใจของผู้ใช้และสื่อข้อความของคุณไปทั่ว การเพิ่มแอนิเมชั่นในเพจของคุณเป็นวิธีที่ยอดเยี่ยมในการบรรลุเป้าหมายนี้ อย่างไรก็ตาม หากคุณใช้ GIF ขนาดใหญ่ อาจทำให้เว็บไซต์ของคุณช้าลงและสร้างประสบการณ์การใช้งานที่ไม่ดี

โชคดีที่คุณสามารถใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหวได้ นี่เป็นวิธีที่มีประสิทธิภาพมากขึ้นในการแสดงภาพเคลื่อนไหว เนื่องจากสามารถช่วยให้ไซต์ของคุณทำงานได้อย่างราบรื่น คุณสามารถแปลง GIF ของคุณให้เป็นวิดีโอได้ด้วยตนเองโดยใช้บรรทัดคำสั่ง แต่อาจเป็นเรื่องที่น่าเบื่อ อีกทางเลือกหนึ่ง คุณอาจต้องการใช้ปลั๊กอินเพิ่มประสิทธิภาพ เช่น Optimole ปลั๊กอินนี้ใช้ Image CDN และมีการตั้งค่าที่คุณสามารถเปิดใช้งานเพื่อแปลง GIF เป็นวิดีโอโดยอัตโนมัติ

คุณมีคำถามเกี่ยวกับวิธีการใช้รูปแบบวิดีโอสำหรับเนื้อหาที่เป็นภาพเคลื่อนไหวหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!