دليل صيغ الصور الشامل: JPG وPNG وWEBP وAVIF — أيها تختار ومتى؟
أربع صيغ، أربعة استخدامات مختلفة. دليل واحد يجمع كل ما تحتاج معرفته لاختيار الصيغة الصحيحة بدل التخمين في كل مرة.
عند رفع أي صورة إلى موقعك يظهر سؤال بسيط لكنه مهم: أي صيغة أختار؟ القرار الخاطئ هنا قد يعني صفحة بطيئة، أو صورة بجودة أقل من المطلوب، أو حجم ملف أكبر من الحاجة بلا مبرر. هذا الدليل يجمع الصيغ الأربع الأكثر استخدامًا على الويب في مكان واحد، بدل مقارنة كل زوج منها في مقال منفصل.
JPG: الخيار الكلاسيكي للصور الفوتوغرافية
الأقدم والأكثر انتشارًا، وهو الخيار الافتراضي لصور المنتجات والأشخاص والمناظر الطبيعية وأي صورة بتدرجات لونية كثيرة. يعتمد على ضغط "فاقد للجودة" (Lossy) يحذف تفاصيل غير ملحوظة للعين لتقليل الحجم.
نقطة القوة: حجم صغير نسبيًا مع جودة مقبولة. نقطة الضعف: لا يدعم الشفافية، والفقدان تراكمي مع كل حفظ متكرر.
PNG: الدقة والشفافية أولًا
مصمم لحالات تحتاج دقة كاملة بلا فقدان (Lossless)، وأبرز ميزاته دعم الشفافية — لذلك يُستخدم بكثرة في الشعارات والأيقونات ولقطات الشاشة. المشكلة الرئيسية حجمه؛ لأنه لا يفقد أي بيانات فحجمه أكبر بكثير من JPG لنفس الصورة الفوتوغرافية تقريبًا.
WEBP: التوازن الحديث
طوّرته جوجل ليكون بديلاً أخف من JPG وPNG معًا: يدعم كلا نوعي الضغط، ويدعم الشفافية مثل PNG، لكن بحجم أصغر بشكل ملحوظ — قد يصل التوفير إلى 25-35% مقارنة بـ JPG بجودة مقاربة. التوافق مع المتصفحات القديمة كان التحدي الوحيد، وهو اليوم شبه معدوم.
AVIF: الجيل الأحدث، بشرط اختباره
مبني على ترميز AV1 ويمكن أن يقدّم كفاءة ضغط ممتازة في حالات كثيرة، لكنه قد يكون أثقل في الترميز وأقل بساطة في سير العمل. لا تعتمد على نسبة توفير ثابتة تراها في اختبار عام؛ النتيجة تختلف حسب الصورة والأبعاد وأداة التصدير. إذا كان سير عملك يحتاج AVIF تحديدًا، اختبره على عينة حقيقية من صور موقعك أولًا — أداة ضوء تركّز حاليًا على JPG وPNG وWEBP.
عند المقارنة بين WebP وAVIF، ثبّت المتغيرات: نفس الأبعاد، نفس مستوى الجودة المستهدف، ونفس الصورة. مقارنة ملف WebP لصورة 1600 بكسل بملف AVIF لصورة 1200 بكسل لا تعطي نتيجة عادلة. وهناك جانب تشغيلي أيضًا: إذا كانت أدواتك أو منصة النشر لا تدعم صيغة معينة بسهولة، فسهولة سير العمل قد تكون أهم من مكسب صغير في الحجم.
حالة خاصة: الشعارات ولقطات الشاشة
هذه الملفات مختلفة عن الصور الفوتوغرافية: مساحات لون صافية، حواف حادة، ونصوص صغيرة. الضغط الفاقد الشديد قد ينتج هالات حول الحروف أو خطوطًا أقل وضوحًا. إذا احتاج الشعار خلفية شفافة، فـ PNG أو WebP بشفافية خيار منطقي. أما لقطة الشاشة التي لا تحتاج شفافية، فجرّب WebP مع مراقبة وضوح النص تحديدًا — وليس فقط الحجم النهائي.
PNG ليس أصغر دائمًا: هو ممتاز للرسومات البسيطة، لكنه قد يصبح ضخمًا مع الصور الفوتوغرافية. لا تقارن الصيغ بالاسم فقط؛ صدّر الملف وقارن الحجم والنتيجة البصرية.
كيف تقرر عمليًا؟
- حدد وظيفة الصورة: فوتوغرافية، رسومية بشفافية، أم نص/لقطة شاشة؟
- للصور الفوتوغرافية بلا شفافية: ابدأ بـ WebP، وقارنه بـ JPG إذا احتجت أقصى توافق.
- للشعارات والرسومات ذات الشفافية أو الحواف الحادة: اختبر PNG أو WebP بشفافية.
- إذا كانت كفاءة الحجم أولوية قصوى ونظامك يدعمها: اختبر AVIF على عينة قبل التعميم.
- قارن الحجم والوضوح دائمًا على نفس حجم العرض الفعلي، وليس عند التكبير.
يمكنك تجربة الصيغ الثلاث المدعومة (JPG وPNG وWEBP) على نفس الصورة عبر أداة ضوء ومقارنة الحجم والجودة مباشرة قبل التنزيل.