يسرد قسم "الفرص" في تقرير Lighthouse جميع ملفات GIF المتحركة، بالإضافة إلى عمليات التوفير المقدّرة في الثواني التي يتم تحقيقها من خلال تحويل ملفات GIF هذه إلى فيديو:
أهمية استخدام الفيديو بدلاً من صور GIF المتحركة
ملفات 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 بفيديو
تتضمّن ملفات 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 إلى شبكة توصيل محتوى الصورة، وتعرض شبكة توصيل المحتوى للصورة فيديو HTML5.
إرشادات خاصة بحِزم البيانات
AMP
بالنسبة إلى محتوى الصور المتحركة، استخدِم amp-anim لتقليل استخدام وحدة المعالجة المركزية (CPU) عندما يكون المحتوى خارج الشاشة.