استخدام تنسيقات الفيديو لمحتوى الصور المتحركة

يسرد قسم "فرص التحسين" في تقرير Lighthouse جميع ملفات GIF المتحركة، بالإضافة إلى الوقت المقدَّر الذي يمكنك توفيره بالثواني من خلال تحويل ملفات GIF هذه إلى فيديو:

لقطة شاشة لاستخدام تنسيقات الفيديو في تدقيق المحتوى المتحرّك في Lighthouse

أسباب استبدال ملفات 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 إلى خدمة تتيح تضمينه كفيديو.

الموارد