آیا تا به حال یک فایل 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 فقط با فایلهایی کار میکند که ابعاد زوج دارند، مانند ۳۲۰ پیکسل در ۲۴۰ پیکسل. اگر GIF ورودی ابعاد فرد دارد، میتوانید یک فیلتر برش اضافه کنید تا از نمایش خطای «ارتفاع/عرض بر ۲ قابل تقسیم نیست» توسط FFmpeg جلوگیری شود:
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 از سال ۱۹۹۹ وجود داشته است، WebM یک فرمت فایل نسبتاً جدید است که در ابتدا در سال ۲۰۱۰ منتشر شد. ویدیوهای 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 اولیه ۳.۷ مگابایت است، در حالی که حجم نسخه MP4 آن ۵۵۱ کیلوبایت و حجم نسخه WebM آن تنها ۳۴۱ کیلوبایت است!
تصویر 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> نیست ، زیرا آن تصویر بلااستفاده خواهد ماند.
این برای وبسایت شما چه معنایی دارد؟ توصیه این است که به جای GIF متحرک، از <video> استفاده کنید، اما با این درک که چنین رسانههایی کاندیدای LCP نخواهند بود و به جای آن از بزرگترین کاندیدای بعدی استفاده خواهد شد. از آنجایی که GIFها و <video> ها معمولاً بزرگتر و دانلود آنها کندتر است، تغییر به یک کاندیدای LCP متفاوت احتمالاً LCP سایت را نیز بهبود میبخشد.