هل سبق لك أن رأيت صورة 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
يؤدي هذا الأمر إلى توجيه FFmpeg إلى my-animation.gif باعتباره الإدخال، الذي يُشار إليه بواسطة الرمز
إبلاغ -i، وتحويله إلى فيديو باسم my-animation.mp4.
لا يعمل برنامج الترميز libx264 إلا مع الملفات ذات الأبعاد الزوجية مثل 320 بكسل. بمقدار 240 بكسل. إذا كان ملف GIF الذي تم إدخاله يحتوي على أبعاد فردية، يمكنك تضمين فلتر اقتصاص تجنب رمي FFmpeg لقيمة "height/العرض غير قابل للقسمة على 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 وملفات <video> تكون عادةً أكبر حجمًا وأبطأ سرعة في تنزيلها، من المحتمل أن يؤدي الانتقال إلى ملف مرشّح آخر لسرعة عرض أكبر محتوى مرئي (LCP) إلى تحسين سرعة عرض أكبر جزء من المحتوى على الموقع الإلكتروني.