شرح صيغ الصور: JPEG، PNG، WebP، GIF، SVG، AVIF

تاريخ آخر تحديث: June 27, 2026

لا يوجد صيغة صورة واحدة هي الأفضل على الإطلاق — فكل منها موجود لأنه يحل مشكلة مختلفة. يقوم JPEG بضغط الصور الفوتوغرافية، ويحافظ PNG على الحواف الحادة والشفافية، بينما تقوم WebP و AVIF بتقليص حجم الصور أكثر، وتتوسع SVG دون فقدان البكسلات، وتقوم GIF بالتحريك (الأنيميشن). اختيار الصيغة المناسبة هو قرار يتعلق بالمحتوى، وليس تفضيلاً شخصياً. يغطي هذا الدليل ما تفعله كل صيغة، مع أحجام ملفات فعلية ومقاسة من صورة مصدر واحدة.

إجابة سريعة: ما هي الصيغة التي يجب أن تستخدمها؟

طابق الصيغة بمحتوى الصورة والمكان الذي سيتم عرضها فيه:

للحصول على تحليل مفصل للمقارنة بين الصيغ، راجع مقارنة AVIF مقابل WebP مقابل JPEG.

كيف تقارن الصيغ؟

الفروقات في حجم الملفات كبيرة ومتسقة. عند القياس على صورة فوتوغرافية واحدة بحجم 1400×933:

يبرز حجم PNG البالغ 853 KB: فالتخزين بدون فقدان للبيانات لصورة فوتوغرافية يكلف تقريباً 8× أكثر من JPEG و 19× أكثر من AVIF. لهذا السبب، فإن استخدام PNG غير مناسب لصور الصفحة الكاملة حتى لو كان قادراً تقنياً على تخزينها.

JPEG — حصان العمل للصور الفوتوغرافية

JPEG (1992) هو التنسيق القائم على الفقد (lossy format) للصور الفوتوغرافية. إنه يتخلص من التفاصيل عالية التردد التي بالكاد تراها العين، ولهذا السبب يقلص حجم الصور بشكل كبير ولكنه يضبب النصوص الحادة والخطوط الرفيعة.

• الأفضل لـ: الصور الفوتوغرافية، والتدرجات اللونية (gradients)، والمشاهد الواقعية المعقدة.
• تجنبه في: النصوص، ولقطات واجهات المستخدم (UI screenshots)، ورسومات الخطوط الحادة، وأي شيء يتطلب شفافية (لا يحتوي JPEG على قناة ألفا).
• احذر من: آثار التكتل المرئية بحجم 8×8 تحت جودة ~70.

استخدم الجودة 80–85 لصور الويب. راجع كيفية ضغط JPEG.

PNG — الحواف الحادة والشفافية

PNG هو تنسيق بدون فقدان للبيانات (lossless) ويدعم قناة ألفا كاملة، لذلك يحافظ على كل بكسل وأي شفافية. التكلفة هي حجم الملف: فهو لا يضغط الصور الفوتوغرافية جيداً.

• الأفضل لـ: الرسوم البيانية ذات الحواف الحادة، والنصوص، والشعارات، ولقطات واجهات المستخدم، والصور الشفافة.
• تجنبه في: صور الصفحة الكاملة (استخدم WebP/AVIF/JPEG بدلاً من ذلك — انظر الجدول أعلاه).
• احذر من: الملفات الضخمة على الصور الفوتوغرافية. قلل الحجم باستخدام PNG-8 (≤256 ألوان) للرسوم البيانية المسطحة.

لمزيد من التفاصيل حول الشفافية، راجع كيفية إنشاء صور شفافة.

WebP — الإعداد الافتراضي الحديث للويب

WebP (2010) يقوم بالضغط القائم على الفقد والضغط بدون فقدان للبيانات، ويدعم ألفا، ويتفوق على JPEG بنسبة ~25–35% عند مطابقة الجودة. دعم المتصفحات الحديثة يبلغ حوالي 98%.

• الأفضل لـ: الصور الفوتوغرافية وصور الويب الشفافة حيث تكون البايتات مهمة.
• تجنبه في: البريد الإلكتروني والعملاء القدامى جداً (استخدم JPEG/PNG كخيار احتياطي).
• يتم تقديمه مع: خيار احتياطي لـ JPEG/PNG داخل عنصر <picture>.

AVIF — أصغر الصور

AVIF (2019) يستخدم أدوات الإطار الداخلي (intra-frame tools) من برنامج ترميز الفيديو AV1 ويتفوق على WebP بنسبة 20–30% أخرى. الدعم يبلغ حوالي 96% ومتزايد.

• الأفضل لـ: الصور الفوتوغرافية حيث تكون البايتات الأصغر أهمية (صور الأبطال، LCP).
• تجنبه في: عندما لا يمكنك تحمل عملية الترميز البطيئة، أو لأقدم المتصفحات جداً (استخدم خيار احتياطي <picture>).
• احذر من: تلطيخ الملمس الدقيق عند الجودة المنخفضة جداً (<q40).

SVG — متجهات تتوسع

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

• الأفضل لـ: الشعارات، والأيقونات، والرسوم التوضيحية البسيطة، وأي شيء يجب أن يتوسع.
• تجنبه في: الصور الفوتوغرافية (لا يمكن لـ SVG تمثيلها بكفاءة).
• احذر من: التعقيد — قد يكون ملف SVG المفصل كبيراً؛ قم بتحويله إلى صورة نقطية إذا لزم الأمر.

GIF — إرث التحريك

يقوم GIF بالتحريك ويدعم شفافية 1 بت، ولكنه يقتصر على 256 لوناً وأكبر بكثير من التنسيقات المتحركة الحديثة لنفس المحتوى.

• الأفضل لـ: لا شيء حديث — استبدله بـ WebP أو AVIF متحرك.
• تجنبه في: أي شيء حساس للألوان (الحد الأقصى 256 لوناً) أو الحجم.
• احذر من: الملفات الكبيرة؛ غالباً ما يكون ملف GIF مدته 3 ثوانٍ أكبر من ملف MP4 لنفس المقطع.

كيف تختار تحت الضغط؟

استخدم مسار اتخاذ القرار القصير هذا:

1. هل هي صورة فوتوغرافية؟ → WebP/AVIF (مع خيار احتياطي JPEG).
2. هل تحتاج إلى شفافية؟ → PNG أو WebP (ألفا).
3. هل هو شعار/أيقونة/رسم توضيحي يتوسع؟ → SVG.
4. هل هو نص/واجهة مستخدم حاد؟ → PNG.
5. هل هو تحريك (أنيميشن)؟ → WebP/AVIF متحرك، وليس GIF.
6. هل هو للبريد الإلكتروني؟ → JPEG أو PNG (لا يوجد WebP/AVIF).

بالنسبة لمعظم الصور الفوتوغرافية على الويب، فإن الإجابة الآن هي "WebP أو AVIF مع خيار احتياطي JPEG". يظل JPEG موجوداً فقط بسبب التوافق العالمي، وليس لأنه الخيار الأفضل.

كيف تقدم صيغ متعددة؟

استخدم عنصر <picture> بحيث يحصل كل متصفح على أفضل صيغة يدعمها:

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="الوصف" width="800" height="600" loading="lazy">
</picture>

يختار المتصفح أول نوع يدعمه ويتجاهل البقية. احتفظ دائماً بـ <img> حقيقي يحتوي على src بصيغة JPEG كخيار احتياطي نهائي. راجع دليل صيغ الصور على MDN لمعرفة جدول الدعم الحالي لكل متصفح.

الأخطاء الشائعة

• استخدام PNG للصور الفوتوغرافية. إنه يعمل، لكن الملف أكبر بـ 8–19× مما هو مطلوب.
• استخدام JPEG للنصوص أو الشعارات. يسبب الضغط ضبابية في الحواف الحادة. استخدم PNG أو SVG.
• تقديم صيغة واحدة بدون خيار احتياطي. تحتاج AVIF/WebP إلى خيار احتياطي لـ JPEG للعملاء القدامى.
• التحريك باستخدام GIF. WebP/AVIF المتحرك أصغر بكثير ويدعم ألواناً أكثر.
• تجاهل SVG للشعارات. الشعار المحول إلى صورة نقطية يكون ضبابياً عند DPI عالٍ؛ يظل SVG حاداً بأي حجم.

الأسئلة المتكررة

ما هي صيغة الصورة التي يجب أن أستخدمها؟

JPEG للصور الفوتوغرافية، وPNG للرسوم البيانية ذات الحواف الحادة أو الشفافية، وWebP كالإعداد الافتراضي الحديث للويب (أصغر من كليهما)، وAVIF لأصغر الصور على المتصفحات الحديثة، وSVG للشعارات والأيقونات. طابق الصيغة مع المحتوى.

هل WebP أفضل من JPEG؟

بالنسبة لتوصيل الويب، نعم — WebP أصغر بنسبة 25 إلى 35 في المائة عند جودة متساوية ويتم دعمه في جميع المتصفحات الحالية. احتفظ بـ JPEG كخيار احتياطي فقط للمتصفحات القديمة جداً. راجع دليل محول WebP.

متى يجب أن أستخدم AVIF؟

عندما يمكنك ترميزه ويكون جمهورك في الغالب يستخدم متصفحات حديثة — فإن AVIF أصغر بنسبة 50% تقريباً من JPEG. المقايضة هي الترميز الأبطأ والفجوات في المتصفحات القديمة. قم بإرسال AVIF مع خيار احتياطي WebP عبر عنصر <picture>.

هل يدعم PNG الشفافية؟

نعم — يحتوي PNG على قناة ألفا كاملة، ولهذا السبب هو التنسيق للرسوم البيانية والشعارات ذات الشفافية. لا يدعم JPEG الشفافية. كما أن WebP و AVIF يدعمان ألفا، ولكن بأحجام أصغر لتوصيل الويب.

ما هي أصغر صيغة للصور الفوتوغرافية؟

AVIF (الأصغر على المتصفحات الحديثة)، ثم WebP، ثم JPEG. PNG هو الأكبر للصور لأنه بدون فقدان للبيانات. بالنسبة لتوصيل الويب، فإن WebP هو الإعداد الافتراضي الآمن؛ و AVIF عندما يمكنك ترميزه ويكون جمهورك يستخدم متصفحات حديثة.

ما هي أصغر صيغة للصورة؟

AVIF للصور على المتصفحات الحديثة (أصغر بنسبة 50% تقريباً من JPEG)، ثم WebP. PNG هو الأكبر للصور لأنه بدون فقدان للبيانات. بالنسبة للرسوم البيانية ذات الشفافية، يتفوق WebP أو AVIF على PNG. طابق الصيغة مع المحتوى ودعم المتصفح لجمهورك.

ما الفرق بين الضغط القائم على الفقد (Lossy) والضغط بدون فقدان للبيانات (Lossless)؟

الضغط بدون فقدان للبيانات (PNG، WebP بدون فقدان البيانات) يحافظ على كل بكسل بالضبط ويتم عكسه بشكل مثالي — لا يتم فقدان أي جودة. الضغط القائم على الفقد (JPEG، WebP القائم على الفقد، AVIF) يتخلص من التفاصيل التي لا تلاحظها العين لتقليص الملف، والفقد دائم. يفوز الضغط القائم على الفقد في الحجم للصور الفوتوغرافية؛ ويفوز الضغط بدون فقدان للبيانات في الجودة للرسوم البيانية والنصوص والنسخ الرئيسية التي ستقوم بتعديلها مرة أخرى. اختر حسب المحتوى.

ما هي أصغر صيغة للرسوم البيانية ذات الشفافية؟

WebP أو AVIF، وكلاهما يدعم قناة ألفا ويضغط بشكل أصغر بكثير من PNG. بالنسبة للشعارات والأيقونات على المتصفحات الحديثة، يقلل WebP أو AVIF حجم الملف بشكل كبير مقارنة بـ PNG مع الحفاظ على الشفافية. قم بتوفيرها بخيار احتياطي PNG عبر عنصر <picture> للمتصفحات الأقدم التي تفتقر إلى الدعم.

حقوق الصورة (Image credits)

• مقارنة حجم الصيغ ومخطط الأعمدة — تم إنشاؤها بواسطة المؤلف من صورة فوتوغرافية بأسلوب التجارة الإلكترونية (Pexels #16675632، صورة بواسطة Mikael Blomkvist) لإظهار أحجام الملفات المقاسة الفعلية عبر PNG و JPEG و WebP و AVIF.