هل سبق لك أن رأيت صورة GIF متحركة على خدمة مثل Imgur أو Gfycat، ثم فحصتها باستخدام أدوات المطوّرين، واكتشفت أنّها في الواقع فيديو؟ وهناك سبب وجيه لذلك. يمكن أن يكون حجم صور GIF المتحركة كبيرًا.
لحسن الحظ، هذا أحد مجالات أداء التحميل التي يمكنك فيها بذل جهد بسيط نسبيًا لتحقيق مكاسب كبيرة. من خلال تحويل ملفات GIF الكبيرة إلى فيديوهات، يمكنك توفير الكثير من معدل نقل البيانات للمستخدمين.
القياس أولاً
استخدِم Lighthouse للتحقّق من موقعك الإلكتروني بحثًا عن ملفات GIF يمكن تحويلها إلى فيديوهات. في DevTools، انقر على علامة التبويب "عمليات التدقيق" (Audits) وضَع علامة في مربّع الاختيار "الأداء" (Performance). بعد ذلك، شغِّل 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
يطلب هذا الأمر من FFmpeg استخدام my-animation.gif كـ إدخال، ويتم الإشارة إلى ذلك باستخدام العلامة -i، وتحويله إلى فيديو باسم my-animation.mp4.
لا يعمل برنامج الترميز libx264 إلا مع الملفات التي تحتوي على أبعاد زوجية، مثل 320 بكسل × 240 بكسل. إذا كانت صورة GIF المدخلة تتضمّن أبعادًا فردية، يمكنك تضمين فلتر اقتصاص لتجنُّب ظهور الخطأ "لا يمكن تقسيم الارتفاع/العرض على 2" في FFmpeg:
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 وعناصر <video> تكون عادةً أكبر حجمًا وبالتالي أبطأ في التنزيل، من المرجّح أنّ يؤدي الانتقال إلى عنصر مرشّح مختلف لـ LCP إلى تحسين LCP للموقع الإلكتروني.