تقنيات

يستخدم هذا الإمتداد لحفظ الصور التي تحوي حركة | GIF أم WebP أم APNG؟ الدليل الشامل

Admin

عند البحث عن العبارة "يستخدم هذا الإمتداد لحفظ الصور التي تحوي حركة" المقصود عادة الامتدادات التي تدعم الصور المتحركة (animated images). في هذا الدليل نوضح الامتدادات الشائعة (مثل GIF، Animated WebP، APNG، وأحيانًا WebM/MP4 كبدائل فيديو)، نُقارن بينها عمليًا من حيث الجودة، الحجم، دعم المتصفحات، والحالات المناسبة لاستخدام كلٍ منها.

الإجابة المختصرة

التقليدي: GIF — إذ يُستخدم GIF تاريخيًا لحفظ الصور المتحركة. الحديث: إذا أردت جودة أعلى وحجم أصغر فـAnimated WebP أو APNG أفضل. وللحركات الطويلة أو الخلفيات عالية الجودة يُفضَّل استخدام WebM أو MP4 (فيديو) لأنهما أصغر وأفضل من حيث الجودة مقابل الحجم.

الامتدادات الشائعة وخصائصها

GIF (Graphics Interchange Format)

  • أول صيغة انتشرت للصور المتحركة على الويب.
  • تدعم فقط حتى 256 لونًا لكل إطار → قد تُظهر banding وlossy في التدرجات.
  • تدعم الشفافية (بدون قناة ألفا حقيقية).
  • مدعومة في كل المتصفحات والمنصات (أقصى توافق).
  • أحجام الملفات عادةً أكبر مقارنة بالخيارات الحديثة لنفس الجودة.

Animated WebP

  • دعم ألوان 24-بت + ألفا، ويمكن أن يكون أقل حجمًا من GIF بنفس الجودة.
  • يدعم Lossy وLossless.
  • مدعوم في معظم المتصفحات الحديثة (Chrome, Firefox, Edge, Opera) — تحقق من دعم Safari حسب نسخته.
  • مناسب للويب عندما تحتاج حجمًا أصغر وجودة أعلى.

APNG (Animated PNG)

  • امتداد PNG المحسّن للحركة — يدعم ألوان 24-بت وقناة ألفا حقيقية.
  • جودة أعلى من GIF لكن قد يكون الحجم أكبر من WebP في بعض الحالات.
  • دعم جيد جدًا في المتصفحات الحديثة.
  • مثالي عندما تحتاج شفافية Alpha وجودة lossless.

WebM / MP4 (فيديو)

  • ليست "صور" تقنيًا، لكنها تستخدم كثيرًا كبديل للصور المتحركة: جودة عالية جدًا وحجم أصغر بكثير للحركات الطويلة أو المعقدة.
  • WebM مع VP9/AV1 يقدم توازنًا ممتازًا؛ MP4 (H.264) مدعوم على نطاق واسع.
  • يدعم الصوت أيضاً — مفيد للـ animated banners أو مقاطع قصيرة تحتاج صوتًا.

جدول مقارنة سريع

الميزة GIF APNG Animated WebP WebM / MP4
الألوان حتى 256 لون 24-بت (16.7M) 24-بت كامل (تعتمد على الترميز)
شفافية (Alpha) نعم (binary) نعم (alpha حقيقية) نعم (alpha حقيقية) نادرًا (عادة لا)
حجم الملف (تقريبًا) أكبر متوسط/أكبر أصغر غالبًا أصغر بكثير للحركات الطويلة
دعم المتصفحات واسع جدًا جيد جدًا جيد في معظم المتصفحات الحديثة واسع (Video tag)
أفضل للاستخدام ميمز/حركات قصيرة بسيطة حركات قصيرة بجودة مرتفعة مع شفافية حركات صغيرة وبحجم منخفض لموقع الويب حركات طويلة/خلفيات/مقاطع مع صوت

متى تختار كل امتداد؟ — إرشادات عملية

  • إذا تريد أقصى توافق (أقدم متصفح أو مشاركة في منصات كثيرة): استخدم GIF.
  • إذا تحتاج جودة ألوان وشفافية أفضل وحجم أقل: جرب Animated WebP أو APNG.
  • إذا الحركة طويلة أو تريد صوتًا وتحكم تشغيل (play/pause): استخدم WebM أو MP4 مع <video> (أو استخدام صور WebP كفيديو قصير إذا أردت).
  • لوسائط التواصل الاجتماعي: تحقق من متطلبات المنصة — بعض المنصات تدعم WebP/MP4 مباشرة بينما تفضل منصات أخرى صيغة GIF.

كيفية إنشاء صورة متحركة وحفظها — أدوات وأوامر

أدوات رسومية (واجهة مستخدم)

  • Adobe Photoshop: Export → Save for Web (GIF) أو تصدير إلى WebP عبر Plugin أو أحدث الإصدارات.
  • GIMP: File → Export As → اختر GIF أو APNG عبر plugin.
  • Cloudinary / Squoosh / EZGIF (مواقع ويب) لتحويل وتحسين وحفظ Animated WebP / APNG / GIF.

أدوات سطر الأوامر (ffmpeg وcwebp)

من GIF إلى WebM/MP4 أو العكس استخدم ffmpeg:

# GIF → WebM
ffmpeg -i input.gif -c:v libvpx-vp9 -b:v 0 -crf 30 output.webm
# GIF → MP4 (H.264)
ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4
# GIF → Animated WebP
ffmpeg -i input.gif -vcodec libwebp -lossless 0 -qscale 75 -preset default -loop 0 -an -vsync 0 output.webp

لتحويل صور متتابعة إلى GIF أو Animated WebP:

# صور numbered: frame001.png frame002.png ...
ffmpeg -framerate 15 -i frame%03d.png -vf "scale=800:-1:flags=lanczos" -c:v libvpx-vp9 -crf 30 out.webm

نصائح SEO، الوصولية، والأداء

  • استخدم alt وصفياً للصور المتحركة (مهم للوصولية وSEO).
  • لأداء أفضل استخدم Animated WebP أو WebM عند الإمكان لأنها أصغر حجمًا.
  • إذا استخدمت <video> كبديل، ضع خصائص مثل playsinline muted loop وقدم عنصر بديل بصيغة GIF أو WebP كـ fallback.
  • استخدم loading="lazy" أو دفعة تحميل ذكية (lazy-loading) لتأخير تحميل ملفات الصور المتحركة الثقيلة.
  • قدم نسخة ثابتة (poster) لعرضها عند إيقاف الحركة أو للزوار الذين يفضلون تجربة ثابتة.

الأسئلة الشائعة (FAQ)

س: ما الامتداد الذي يستخدم لحفظ الصور التي تحوي حركة عادة؟

الجواب: تاريخيًا يستخدم GIF لحفظ الصور المتحركة. لكن اليوم يوجد خيارات أفضل مثل Animated WebP وAPNG، كما يُستخدم WebM/MP4 للفيديو القصير كبديل أكثر كفاءة.

س: هل Animated WebP مدعوم في كل المتصفحات؟

مدعوم في معظم المتصفحات الحديثة (Chrome, Firefox, Edge, Opera). دعم Safari تحسَّن لكن تحقق من نسخ المستخدمين واعتبر توفير بديل GIF أو APNG عند الضرورة.

س: متى أستخدم WebM بدلاً من GIF؟

عندما تكون الحركة طويلة أو تحتاج جودة أعلى وحجمًا أصغر — WebM (أو MP4) هو خيار الفيديو الأفضل للويب.

مصادر ومراجع موثوقة

تعديل المقال
الأقسام



حجم الخط
+
16
-
تباعد السطور
+
2
-