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