GIF أم MP4 أم WEBP للحركة القصيرة؟ مقارنة واقعية

ستشارك حركة قصيرة صامتة تعمل في تكرار مستمر. وتقول بحكم العادة «سأصنع GIF»، لكن أمامك في الحقيقة أربعة خيارات، وGIF أسوأها في معظم السيناريوهات. نقارن في هذا المقال بين الصيغ في ظروف الاستخدام الفعلية.

الخيارات الأربعة

GIF: صيغة من عام 1987، محدودة بـ 256 لوناً، وقائمة على لوحة ألوان. تعمل في كل مكان.

فيديو MP4 / WEBM: مرمّزات فيديو حديثة. وتتصرف مثل GIF بخصائص autoplay muted loop.

WEBP المتحرك: ألوان كاملة، وشفافية ألفا، وضغط جيد. ومدعوم في المتصفحات الحديثة.

APNG: النسخة المتحركة من PNG. ويقدم ألواناً كاملة وشفافية ألفا حقيقية.

جدول المقارنة

لمحتوى مدته 5 ثوانٍ بدقة 480×270 و15 إطاراً/ث، تقريبياً:

| المعيار | GIF | MP4/WEBM | WEBP متحرك | APNG | |---|---|---|---|---| | الحجم النمطي | 3–8 ميجابايت | 200–500 كيلوبايت | 800 كيلوبايت–2 ميجابايت | 2–5 ميجابايت | | اللون | 256 | كامل | كامل | كامل | | شفافية ألفا | ثنائية (موجود/غير موجود) | لا | نعم | نعم (8 بت) | | الصوت | لا | نعم (يمكن كتمه) | لا | لا | | دعم المتصفحات | شامل | شامل | حديثة | حديثة | | دعم البريد الإلكتروني | جيد | لا يوجد | لا يوجد | جزئي | | تطبيقات المراسلة | دعم خاص | جيد | ضعيف | ضعيف | | المنتديات/الويكي | جيد | متفاوت | ضعيف | ضعيف | | التشغيل التلقائي | أصيل | يحتاج خاصية | أصيل | أصيل |

السيناريو 1: سأضع حركة على موقعي الإلكتروني

مقطع متكرر قصير يعرض خاصية في المنتج، ويعمل تلقائياً في الصفحة.

الفائز: فيديو MP4 + WEBM، بلا جدال.

فلا توجد أي حجة تقنية تدافع عن GIF في هذا السيناريو. إذ يعطي الفيديو الصورة نفسها بعُشر الحجم وبجودة لونية أفضل بكثير.

التطبيق:

<video autoplay muted loop playsinline poster="preview.jpg">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

الخصائص:

• autoplay muted — الفيديوهات الصامتة يمكنها العمل تلقائياً (تمنع المتصفحات التشغيل التلقائي بصوت).
• loop — تكرار لا نهائي.
• playsinline — يمنع الانتقال إلى ملء الشاشة على الجوال. وهو إلزامي للسلوك الشبيه بـ GIF.
• poster — الصورة التي تُعرض إلى أن يُحمَّل الفيديو.

والفارق في سرعة الصفحة حقيقي: فاستبدال فيديو بحجم 400 كيلوبايت بملف GIF بحجم 5 ميجابايت يوفر ثوانٍ على اتصالات الجوال.

السيناريو 2: سأضع حركة في نشرة بريدية

الفائز: GIF.

فعملاء البريد الإلكتروني لا يشغّلون الفيديو تقريباً. ولأسباب أمنية وتوافقية لا يعمل وسم <video> في معظم العملاء.

أما GIF فمدعوم على نطاق واسع — لكن مع تنبيه: بعض العملاء يعرض الإطار الأول فقط. ويُلاحَظ هذا السلوك في بعض إصدارات Outlook خصوصاً.

ولذلك القاعدة العملية: صمّم الإطار الأول ليكون ذا معنى بمفرده. بحيث تصل رسالتك حتى لو لم تظهر الحركة. فاسم المنتج والعرض ودعوة الإجراء ينبغي أن تكون في الإطار الأول.

وتحكّم في الحجم أيضاً: فـ 200 كيلوبايت حد أعلى معقول لمرفقات البريد والصور المضمّنة. وقد يلزمك لبلوغه خفض المدة إلى 2–3 ثوانٍ، والدقة إلى 300–400 بكسل، ومعدل الإطارات إلى 10 إطارات/ث.

السيناريو 3: سأشارك عبر تطبيق مراسلة

واتساب، تلغرام، سلاك، ديسكورد.

الفائز: حسب الحالة — لكن الفيديو أفضل عموماً.

تتعامل هذه التطبيقات مع GIF كنوع خاص وتقدم مكتبات بحث له. لكن ثمة حقيقة مفارِقة: كثير منها يحوّل ملف GIF الذي ترفعه إلى MP4 في الخلفية ثم يعرضه لك على أنه «GIF».

أي أنك حين ترفع GIF تتكبد خسارتين: تخفض أنت الجودة أولاً إلى 256 لوناً، ثم تعيد المنصة ترميز تلك النتيجة منخفضة الجودة.

وإرسال ملف MP4 قصير مباشرة يوفر عادةً جودة أفضل ورفعاً أسرع. فالتطبيقات تشغّل الفيديوهات القصيرة الصامتة في تكرار أصلاً.

السيناريو 4: سأضيفها إلى منتدى أو ويكي

برمجية منتدى قديمة أو ويكي مؤسسي.

الفائز: GIF.

فهذه البيئات لا تدعم عادةً إلا وسوم الصور ولا تسمح بوسم <video>. وGIF يعمل بلا مشكلات لأنه يتصرف كصورة.

وانتبه إلى الحجم: فحدود الرفع في المنتديات والويكي صارمة، ويستهلك المستخدمون الآخرون عرض نطاق عند فتح الصفحة. و1–2 ميجابايت حد أعلى معقول.

السيناريو 5: سأشارك على وسائل التواصل الاجتماعي

تويتر/إكس، إنستغرام، لينكدإن، فيسبوك.

الفائز: الفيديو.

فكل هذه المنصات تعيد ترميز المحتوى المرفوع إلى صيغها الخاصة. ورفع GIF يعني خفض الجودة مرتين بلا داعٍ.

ارفع فيديو مباشرة. وتحقّق من متطلبات المنصة: فبعضها يشترط حداً أدنى للمدة، وبعضها يفضّل نسب أبعاد معينة.

السيناريو 6: أحتاج إلى حركة بخلفية شفافة

حركة شعار أو عنصر واجهة، وسيظهر المحتوى خلفه.

الفائز: APNG أو WEBP المتحرك.

وهذا هو الشيء الوحيد الذي تعجز عنه صيغ الفيديو. فـ MP4 وWEBM لا يدعمان شفافية ألفا عملياً (ثمة تهيئات خاصة لكن التوافق فيها إشكالي).

وشفافية GIF ثنائية: فالبكسل إما شفاف تماماً أو معتم تماماً. ولا قيمة وسطى. والنتيجة مظهر مسنّن عند الحواف.

أما APNG وWEBP فيقدمان ألفا بـ 8 بت: إذ يمكن أن يكون لكل بكسل واحد من 256 مستوى شفافية. فتبدو الحواف ناعمة والظلال طبيعية.

وملفات APNG أكبر من WEBP لكن دعم المتصفحات لها أوسع قليلاً. وإن كنت تختار بينهما، فـ WEBP يعطي عادةً توازناً أفضل بين الحجم والجودة.

السيناريو 7: مؤشر تحميل بسيط (spinner)

حركة صغيرة دورية قليلة الألوان.

الفائز: حركة SVG أو CSS.

نضع هذا السيناريو في القائمة لأن استخدام ملف صورة لحركات الواجهة البسيطة أمر لا داعي له.

فدائرة دوّارة، أو نقاط متقافزة، أو شريط تقدم — تُصنع بحركة CSS أو SVG في بضعة أسطر، ولا يُنزَّل أي ملف، وتبقى حادة في كل دقة، ويصير تغيير اللون عملاً من سطر واحد.

والحالة التي تلزمك فيها ملف صورة هي حين تكون الحركة معقدة فعلاً أو مصدرها فيديو.

إذا كنت ستنتج GIF: التحكم في الحجم

إن كان GIF ضرورياً فعلاً، فحجمه يحدده حاصل ضرب ثلاثة إعدادات:

| الإعداد | الأثر | التوصية | |---|---|---| | المدة | خطي | 2–6 ثوانٍ | | معدل الإطارات | خطي | 10–15 إطاراً/ث | | الدقة | تربيعي | عرض 320–480 بكسل |

والعامل الرابع هو مقدار الحركة: فالمشهد الثابت يخرج أصغر بكثير، لأن GIF يستطيع الاستفادة من تحسين الإطار الجزئي.

وهناك أيضاً عدد الألوان: فإن سمحت الأداة، يخفض استخدام 128 أو 64 لوناً بدل 256 حجمَ الملف. ولا يكاد الفرق يُرى في تسجيلات الشاشة والرسوم البيانية؛ لكنه يُحدث تشوهاً واضحاً في المحتوى الفوتوغرافي.

خلاصة القرار

• موقعك الإلكتروني ← فيديو MP4 + WEBM بخصائص autoplay muted loop playsinline.
• البريد الإلكتروني ← GIF، وصمّم الإطار الأول ليكون ذا معنى، وأبقِ الحجم دون 200 كيلوبايت.
• وسائل التواصل ← فيديو، ولا ترفع GIF.
• المراسلة ← الفيديو أفضل عموماً.
• المنتديات / الويكي القديمة ← GIF.
• الخلفية الشفافة ← WEBP المتحرك أو APNG.
• حركة واجهة بسيطة ← CSS أو SVG، ولا تستخدم ملفاً.

والمبدأ العام: استخدم GIF في البيئات التي لا بديل فيها فحسب. ففي كل موضع آخر يوجد خيار أصغر وأجود وأسرع.