هل سبق لك أن رأيت ملف GIF متحرّكًا على خدمة مثل Imgur أو Gfycat، وتم فحصه في أدوات مطوّري البرامج لمعرفة أنّ ملف GIF كان عبارة عن فيديو في الواقع؟ هناك سبب وجيه لذلك. يمكن أن تكون ملفات GIF المتحركة ضخمة جدًا.
لحسن الحظ، هذا أحد مجالات أداء التحميل التي يمكنك فيها القيام بعمل بسيط نسبيًا لتحقيق مكاسب هائلة. من خلال تحويل ملفات GIF الكبيرة إلى فيديوهات، يمكنك خفض معدّل نقل بيانات المستخدمين بشكل كبير.
القياس أولاً
استخدِم Lighthouse للتحقق من موقعك الإلكتروني بحثًا عن ملفات GIF يمكن تحويلها إلى فيديوهات. في "أدوات مطوري البرامج"، انقر على علامة التبويب "عمليات التدقيق" وضَع علامة في مربّع اختيار "الأداء" شغِّل بعد ذلك Lighthouse واطّلِع على التقرير إذا كان لديك أي ملفات GIF يمكن تحويلها، من المفترض أن يظهر لك اقتراح يشير إلى "استخدام تنسيقات الفيديو لمحتوى الصور المتحركة":
إنشاء فيديوهات MPEG
تتوفر عدة طرق لتحويل ملفات GIF إلى فيديو،
وتكون الأداة FFmpeg هي الأداة المستخدمة في هذا الدليل.
لاستخدام أداة FFmpeg لتحويل ملف GIF أو my-animation.gif إلى فيديو MP4، عليك تشغيل الأمر التالي في وحدة التحكم:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
يؤدي ذلك إلى أن يتم تحويل my-animation.gif إلى الإدخال، الذي يُشار إليه بعلامة-i، وأن يحوّله إلى فيديو باسم my-animation.mp4.
لا يعمل برنامج الترميز libx264 إلا مع الملفات ذات الأبعاد الزوجية، مثل 320 × 240 بكسل. إذا كان إدخال GIF يحتوي على أبعاد فردية، يمكنك تضمين فلتر اقتصاص لتجنُّب ظهور خطأ "الارتفاع/العرض غير قابل للقسمة على 2":
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
إنشاء فيديوهات WebM
على الرغم من توفُّر MP4 منذ عام 1999، إلّا أنّ WebM هو تنسيق ملف جديد نسبيًا تم إصداره في البداية في عام 2010. مقاطع فيديو 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 الأولي 3.7 ميغابايت، مقارنةً بإصدار MP4 الذي يبلغ 551 كيلوبايت، وإصدار WebM بحجم 341 كيلوبايت فقط.
استبدال صورة GIF بفيديو
تتضمّن ملفات GIF المتحركة ثلاث سمات رئيسية يجب تكرارها في الفيديو:
- ويتم تشغيلها تلقائيًا.
- يستمر التكرار (عادةً ما يكون ذلك، ولكن من الممكن منع التكرار).
- كتم الصوت.
لحسن الحظ، يمكنك إعادة إنشاء هذه السلوكيات باستخدام العنصر <video>.
<video autoplay loop muted playsinline></video>
إنّ العنصر <video> الذي يتضمّن هذه السمات يتمّ تشغيله تلقائيًا، ويتم تكراره إلى ما لا نهاية،
وبدون صوت، وتشغيله مضمّنًا (أي، ليس في وضع ملء الشاشة)، وجميع السلوكيات
المتوقعة من ملفات GIF المتحركة. 🎉
أخيرًا، يتطلب العنصر <video> عنصرًا ثانويًا واحدًا أو أكثر من عناصر <source> للإشارة إلى ملفات فيديو مختلفة يمكن للمتصفح الاختيار من بينها بناءً على توافق المتصفّح مع التنسيق. عليك توفير كل من تنسيق WebM وMP4، فإذا كان المتصفّح
لا يتيح استخدام WebM، يمكن استخدامه بدلاً من تنسيق MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
التأثير في سرعة عرض أكبر محتوى مرئي (LCP)
وتجدر الإشارة إلى أنّه على الرغم من أنّ عناصر <img> مرشّحة لسرعة LCP، فإنّ عناصر <video> التي لا تتضمّن صورة poster ليست مرشحة لمقياس LCP. في حال محاكاة ملفات GIF المتحركة، لا يضيف السمة poster إلى عناصر <video>، لأنّ هذه الصورة لن يتم استخدامها.
ما تأثير ذلك في موقعك الإلكتروني؟ ننصح بالاستمرار في استخدام <video> بدلاً من ملف GIF متحرّك، ولكن مع العلم أنّ هذه الوسائط لن تكون مؤهّلة لمقياس LCP وسيتم استخدام أكبر مرشح ثاني بدلاً من ملف GIF. بما أنّ ملفات GIF و<video> هي عادةً أكبر حجمًا وأبطأ من اللازم، قد يؤدي الانتقال إلى استخدام مرشّح مختلف لسرعة عرض أكبر محتوى مرئي (LCP) إلى تحسين سرعة LCP للموقع الإلكتروني.