يسرد قسم "فرص التحسين" في تقرير 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) عندما يكون المحتوى خارج الشاشة.
Drupal
يمكنك تحميل ملف GIF إلى خدمة تتيح تضمينه كفيديو.