بخش فرصتها در گزارش لایتهاوس شما، همه گیفهای متحرک را همراه با صرفهجویی تخمینی در ثانیه که با تبدیل این گیفها به ویدیو به دست میآید، فهرست میکند:
چرا باید GIF های متحرک را با ویدیو جایگزین کنید؟
گیف های بزرگ برای ارائه محتوای متحرک ناکارآمد هستند. با تبدیل GIF های بزرگ به ویدیو، می توانید در پهنای باند کاربران صرفه جویی زیادی کنید. استفاده از ویدئوهای MPEG4/WebM را برای انیمیشنها و PNG/WebP برای تصاویر ثابت به جای GIF برای ذخیره بایتهای شبکه در نظر بگیرید.
ویدیوهای MPEG ایجاد کنید
روش های مختلفی برای تبدیل فایل های GIF به ویدیو وجود دارد. FFmpeg ابزار مورد استفاده در این راهنما است. برای استفاده از FFmpeg برای تبدیل GIF، my-animation.gif به یک ویدیو MP4، دستور زیر را در کنسول خود اجرا کنید:
ffmpeg -i my-animation.gif my-animation.mp4
این به FFmpeg میگوید که my-animation.gif به عنوان ورودی که با پرچم -i مشخص میشود، بگیرد و آن را به ویدیویی به نام my-animation.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 را با یک ویدیو جایگزین کنید
گیف های متحرک دارای سه ویژگی کلیدی هستند که یک ویدیو باید آنها را تکرار کند:
- آنها به طور خودکار بازی می کنند.
- آنها به طور مداوم حلقه می زنند (معمولا، اما می توان از حلقه زدن جلوگیری کرد).
- اونا ساکتن
خوشبختانه، می توانید این رفتارها را با استفاده از عنصر <video> بازسازی کنید.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
از سرویسی استفاده کنید که GIF ها را به ویدیوهای HTML5 تبدیل می کند
بسیاری از CDN های تصویر از تبدیل ویدیوی GIF به HTML5 پشتیبانی می کنند. شما یک GIF را روی CDN تصویر آپلود می کنید و CDN تصویر یک ویدیوی HTML5 را برمی گرداند.
راهنمایی مخصوص پشته
AMP
برای محتوای متحرک، از amp-anim برای به حداقل رساندن استفاده از CPU در زمانی که محتوا خارج از صفحه است، استفاده کنید.