يتكرر سؤال الطلاب والمصممين: لحفظ الصور المتحركة نستخدم امتداد ماذا بالضبط؟ الإجابة التقليدية هي GIF، لكن اليوم هناك بدائل أكثر كفاءة مثل WebP وAPNG، وأحيانًا يكون الفيديو (MP4/WebM) أفضل لحجم أصغر وجودة أعلى. في هذا الدليل نوضح الفرق، ومتى تختار كل امتداد، مع جداول منظمة وروابط مرجعية موثوقة.
الإجابة المختصرة: ما الامتداد الأشهر لحفظ الصور المتحركة؟
تاريخيًا، لحفظ الصور المتحركة نستخدم امتداد GIF (رسوم متحركة بسيطة، 256 لونًا، شفافية بدائية). اليوم، لملفات أصغر وجودة أعلى يُفضَّل:
- WebP (Animated WebP): جودة أفضل وحجم أقل غالبًا من GIF، يدعم الشفافية.
- APNG: بديل GIF بجودة 24-بت وشفافية Alpha حقيقية، دعم متصفحات جيد.
- WebM/MP4: للأطوال الطويلة أو الخلفيات المتحركة؛ غالبًا أصغر بكثير من أي صورة متحركة.
نظرة عامة: ما الامتدادات التي تدعم الحركة؟
GIF (Graphics Interchange Format)
الأشهر تاريخياً. يدعم الحركة والشفافية بنمط on/off، لكن حده 256 لونًا لكل إطار، ما يسبب عرض نطاق لوني محدود وتحبُّب (Banding) في التدرجات.
APNG (Animated PNG)
امتداد PNG يدعم الحركة مع عمق لوني عالٍ (حتى 24-بت) وشفافية Alpha تامة. غالبًا أجود من GIF، لكن قد يكون الحجم أكبر من WebP في بعض الحالات.
WebP المتحرك (Animated WebP)
يدعم Lossy/Lossless، ألوان أكثر، وشفافية. عادةً حجمه أصغر من GIF/APNG لجودة مماثلة. مدعوم في معظم المتصفحات الحديثة.
WebM/MP4 (فيديو)
ليس "صورة" تقنيًا لكنه خيار عملي لعرض حركة سلسة بجودة عالية وحجم صغير جدًا مقارنة بالصور المتحركة، ممتاز للخلفيات والواجهات، مع تحكم في التشغيل (loop/auto-play/mute).
جدول مقارنة: GIF vs APNG vs WebP vs WebM/MP4
الميزة | GIF | APNG | WebP (Animated) | WebM / MP4 |
---|---|---|---|---|
نوع التقنية | صورة متحركة | صورة متحركة | صورة متحركة | فيديو |
الألوان | حتى 256 لونًا/إطار | حتى 24-بت (16.7M لون) | حتى 24-بت | كامل (حسب الترميز) |
الشفافية | بدائية (on/off) | Alpha حقيقية | Alpha حقيقية | لا شفافية عادةً |
الحجم عادةً | أكبر | متوسط | أصغر غالبًا | أصغر كثيرًا |
الدعم في المتصفحات | واسع جدًا | جيد جدًا (حديثًا) | واسع (حديثًا) | واسع |
أفضل استخدام | ميمز/أيقونات بسيطة | حركة بجودة عالية + شفافية | بديل GIF محسّن | خلفيات وحركات طويلة |
كيف تختار الامتداد المناسب؟ (قرارات سريعة)
أحتاج صورة متحركة شفافة بجودة ألوان عالية
اختر APNG أو WebP المتحرك. إن كان الحجم أولوية قصوى جرب WebP أولًا.
ميم قصير أو حركة بسيطة ومتوافق في كل مكان
يمكن استخدام GIF، لكن جرّب WebP لتقليل الحجم إذا كانت المنصة تدعمه.
خلفية متحركة طويلة أو حركة معقدة
اختر WebM أو MP4 (فيديو) — غالبًا أصغر وأعلى جودة من أي صورة متحركة.
أدوات حفظ وتحويل مفيدة
من Photoshop/Illustrator
- GIF: Export → Save for Web (Legacy) → GIF.
- APNG/WebP: قد تحتاج إضافة/Plugin أو استخدام أدوات خارجية للتحويل.
أدوات مجانية شائعة (GUI)
- Squoosh (متصفح): لتحويل WebP وتحسين الملفات.
- ezgif.com: إنشاء وتحويل GIF/WEBP/APNG بسهولة.
أوامر سطرية (للمتقدمين)
ffmpeg لتحويل GIF ← WebM/MP4 أو WebP متحرك:
# GIF → MP4 (فيديو صغير)
ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p -vf "fps=25,scale=iw:-2" out.mp4# GIF → WebM (VP9)ffmpeg -i input.gif -c:v libvpx-vp9 -b:v 0 -crf 35 -vf "fps=25,scale=iw:-2" out.webm# GIF → WebP (Animated)ffmpeg -i input.gif -vf "fps=15,scale=iw:-2" -loop 0 -c:v libwebp -lossless 0 -q:v 60 out.webp
الأسئلة الشائعة (FAQ)
لحفظ الصور المتحركة نستخدم امتداد ماذا؟
GIF هو الامتداد الكلاسيكي. لكن لملف أصغر وجودة أفضل يُنصح بـ WebP المتحرك أو APNG، وللمقاطع الطويلة استخدم WebM/MP4.
هل GIF يدعم الشفافية؟
يدعم شفافية ثنائية فقط (بكسل شفاف/غير شفاف). للحصول على شفافية حقيقية (Alpha) استخدم APNG أو WebP.
هل WebP مدعوم في المتصفحات؟
نعم في معظم المتصفحات الحديثة. تحقق من توافق جمهورك، ويمكن توفير Fallback بصيغة GIF أو PNG إذا لزم.
ما الفرق بين APNG وWebP المتحرك؟
كلاهما يدعمان ألوانًا كاملة وAlpha. WebP غالبًا أصغر حجمًا، بينما APNG قد يحتفظ بجودة Lossless أعلى في بعض الحالات.
متى أستخدم الفيديو بدلًا من الصورة المتحركة؟
عند الحركات الطويلة أو الشاشات الكبيرة أو الحاجة للصوت/التحكم (تشغيل/إيقاف) — الفيديو (WebM/MP4) عادة أفضل.