جایگزینی GIF با ویدئو برای سرعت بیشتر

خوشبختانه، تبدیل GIF به ویدئو نیاز به زمان و هزینه زیادی ندارد و با تبدیل تصاویر متحرک بزرگ به ویدئو، می‌توانید علاوه بر افزایش سرعت سایت در پهنای باند کاربران نیز صرفه‌جویی کنید.

اگر تصاویر GIF موجود در سایت‌های معروفی مانند Imgur  یا  Gfycat را با developer options مرورگر خود بررسی کنید خواهید دید که در واقع فرمت آنها mp4 (ویدئو) است. به نظر شما چرا چنین سایت‌هایی از فرمت ویدئو به‌جای GIF استفاده می‌کنند؟ مهم‌ترین دلیل برای جایگزینی تصاویر متحرک GIF با ویدئوها حجم بالای آنهاست. این امر به وضوح در تصویر زیر قابل درک است.

خوشبختانه، تبدیل فایل‌های متحرک گیف به ویدئو نیاز به زمان و هزینه زیادی ندارد و با تبدیل GIFهای بزرگ به ویدئو، می‌توانید علاوه بر افزایش سرعت سایت در پهنای باند کاربران نیز صرفه‌جویی کنید.

یافتن فایل‌های GIF بزرگ

از Lighthouse جهت بررسی سایت خود برای یافتن GIFهایی که می‌توانند به ویدئو تبدیل شوند، استفاده کنید. در DevTools، روی تب Audits کلیک کنید و کادر Performance را علامت بزنید. سپس Lighthouse را اجرا کنید و گزارش را بررسی کنید. اگر فایل‌های گیف قابل تبدیل داشته باشید در گزارش و در بخش “Use video formats for animated content” به شما تذکر داده خواهد شد.

تبدیل GIF به MPEG

روش‌های مختلفی برای تبدیل فایل‌های GIF به ویدئو وجود دارد، FFmpeg ابزاری است که ما در این مقاله استفاده می‌شود. برای استفاده از FFmpeg و تبدیل my-animation.gif به ویدئوی MP4، دستور زیر را در کنسول خود اجرا کنید:

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

این دستور به FFmpeg می‌گوید که فایل my-animation.gif را به‌عنوان ورودی که با پرچم -i مشخص می‌شود، بگیرد و آن را به ویدئویی به نام my-animation.mp4 تبدیل کند.

رمزگذار libx264 فقط با فایل‌هایی کار می‌کند که ابعاد یکنواختی دارند، مانند 320 در 240 پیکسل. اگر GIF ورودی دارای ابعاد عجیب‌وغریب است، می‌توانید یک فیلتر برش اضافه کنید تا FFmpeg خطای ‘height/width not divisible by 2’ را ایجاد نکند:

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

تبدیل GIF به WebM

برخلاف MP4 که از سال 1999 ایجاد شده است، WebM یک فرمت فایل نسبتاً جدید است که ابتدا در سال 2010 منتشر شد. ویدئوهای WebM بسیار کوچک‌تر از ویدئوهای MP4 هستند، اما همه مرورگرها از WebM پشتیبانی نمی‌کنند، بنابراین تولید هر دو فرمت منطقی به نظر می‌رسد.

جهت استفاده از FFmpeg برای تبدیل my-animation.gif به ویدئوی WebM، دستور زیر را در کنسول خود اجرا کنید:

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

مقایسه فرمت‌های مختلف ویدئو

تفاوت در اندازه خروجی یک فایل gifدر مقابل نسخه ویدئویی همان فایل می‌توان بسایر قابل توجه باشد.

تگ <img> را با تگ <video> جایگزین کنید

گیف‌های متحرک دارای سه ویژگی کلیدی هستند که یک ویدئو باید آنها را تکرار کند:

•      آنها به طور خودکار شروع به پخش می‌کنند.
•      آنها به طور مداوم تکرار می‌شوند.
•      gif ها صامت هستند

خوشبختانه، می‌توانید این رفتارها را با استفاده از عنصر <video> بازسازی کنید.

<video autoplay loop muted playsinline></video>

یک عنصر <video> با این ویژگی‌ها به طور خودکار پخش می‌شود، بی‌پایان حلقه می‌زند، صدا پخش نمی‌کند، و به صورت درون خطی پخش می‌شود (یعنی نه تمام صفحه)، همه رفتارهای مورد انتظار از GIF‌ های متحرک! 🎉

در نهایت، عنصر <video> به یک یا چند عنصر <source> نیاز دارد که به فایل‌های ویدیویی مختلفی اشاره می‌کنند که مرورگر می‌تواند بسته به پشتیبانی از فرمت مرورگر، از بین آنها انتخاب کند. شما می‌توانید هم WebM و هم MP4 را اضافه کنید تا اگر مرورگری از WebM پشتیبانی نمی‌کند، به MP4 برگردد.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

مرورگرها نمی‌توانند بهترین و بهینه‌ترین <source> را انتخاب کنند، بنابراین ترتیب قرارگرفتن <source> مهم است. برای مثال، اگر ابتدا یک ویدیوی MP4 را مشخص کنید و مرورگر از WebM پشتیبانی کند، مرورگرها از منبع WebM صرف نظرکرده و به‌جای آن از MPEG-4 استفاده می‌کنند. اگر ترجیح می‌دهید ابتدا از <منبع> WebM استفاده شود، ابتدا آن را مشخص کنید!

سوالات متداول