آیا تا به حال یک GIF متحرک در سرویسی مانند Imgur یا Gfycat دیده اید که آن را در ابزارهای توسعه دهنده خود بررسی کنید تا متوجه شوید که GIF واقعا یک ویدیو است؟ دلیل خوبی برای آن وجود دارد. GIF های متحرک می توانند کاملاً بزرگ باشند.
خوشبختانه، این یکی از آن حوزه‌هایی از عملکرد بارگیری است که در آن می‌توانید کار نسبتا کمی برای دستیابی به دستاوردهای بزرگ انجام دهید! با تبدیل GIF های بزرگ به ویدیو، می توانید در پهنای باند کاربران صرفه جویی زیادی کنید .
ابتدا اندازه گیری کنید
از Lighthouse برای بررسی سایت خود برای GIF هایی که می توانند به ویدیو تبدیل شوند، استفاده کنید. در DevTools، روی تب Audits کلیک کنید و کادر Performance را علامت بزنید. سپس Lighthouse را اجرا کنید و گزارش را بررسی کنید. اگر فایل‌های GIF قابل تبدیل دارید، باید پیشنهادی برای «استفاده از فرمت‌های ویدیویی برای محتوای متحرک» ببینید:
ویدیوهای MPEG ایجاد کنید
روش‌های مختلفی برای تبدیل فایل‌های GIF به ویدیو وجود دارد، FFmpeg ابزاری است که در این راهنما استفاده می‌شود. برای استفاده از FFmpeg برای تبدیل GIF، 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 خطای «ارتفاع/عرض قابل تقسیم بر 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
ویدیوهای 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 و یک ویدیو می تواند بسیار قابل توجه باشد.
در این مثال، GIF اولیه 3.7 مگابایت است، در مقایسه با نسخه MP4 که 551 کیلوبایت است و نسخه WebM که تنها 341 کیلوبایت است!
تصویر 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>
اثر روی بزرگترین رنگ محتوایی (LCP)
لازم به ذکر است که در حالی که عناصر <img> کاندید LCP هستند، عناصر <video> بدون تصویر poster کاندید LCP نیستند. راه حل در مورد شبیه سازی GIF های متحرک این است که ویژگی poster به عناصر <video> خود اضافه نکنید ، زیرا آن تصویر بلااستفاده خواهد ماند.
این برای وب سایت شما چه معنایی دارد؟ توصیه این است که از <video> به جای GIF متحرک استفاده کنید، اما با درک این موضوع که چنین رسانه ای کاندید LCP نخواهد بود و به جای آن از بزرگترین کاندید بعدی استفاده خواهد شد. از آنجایی که فایل‌های GIF و <video> معمولاً بزرگ‌تر هستند و دانلود آنها بسیار کندتر است، حرکت به یک نامزد LCP دیگر احتمالاً LCP سایت را بهبود می‌بخشد.