PNG مقابل WebP مقابل AVIF: اختيار تنسيق الصورة المناسب في 2026

ترفع صورةً إلى موقعك فتجد نفسك فورًا أمام سؤال لا إجابة صحيحة شاملة له: أي تنسيق يجب أن تكون؟ PNG موجود في كل مكان ويعمل دائمًا. WebP يُقلّص ثلثَ حجم الملف. AVIF يضغط أعمق لكنه يُرمَّز ببطء. JPEG XL يتربّص في الأفق. وفي هذه الأثناء يتراجع مؤشر Lighthouse لأنك اخترتَ من باب العادة لا القصد.

يقطع هذا الدليل الضجيج. في نهايته ستعرف بالضبط أي تنسيق تختار — ولماذا — بناءً على نوع محتواك وجمهورك وقيود الأداء لديك.

التنسيقات في لمحة سريعة

قبل الخوض في المفاضلات الفردية، إليك مرجعًا مقارنًا جنبًا إلى جنب للتنسيقات التي يتناولها هذا المقال.

أرقام دعم المتصفحات تقريبية اعتبارًا من مطلع 2026 مصدرها بيانات Can I Use.

JPEG: المرجع الشامل

يُعدّ JPEG التنسيق الافتراضي للصور الفوتوغرافية على الويب منذ منتصف تسعينيات القرن الماضي. هذه القدرة على البقاء هي قوته وسقفه في الوقت ذاته.

ما يتقنه JPEG

يستخدم JPEG ضغط المتحولات الكوساينية المتقطعة (DCT) للتخلص من المعلومات البصرية الأقل حساسية للعين البشرية. للصور ذات النبرات المتصلة — الصور الفوتوغرافية والتدرجات والمشاهد ثلاثية الأبعاد المُصيَّرة — يعمل هذا بشكل ممتاز. عند إعدادات الجودة في حدود 75–85 تكاد صور JPEG تكون غير قابلة للتمييز عن الأصل لمعظم المشاهدين.

دعم المتصفحات 100% فعليًا. كل عميل بريد إلكتروني وكل منصة تواصل اجتماعي وكل جهاز على وجه الأرض يقرأ JPEG دون إشكال.

أين يقصر JPEG

لا يستطيع JPEG تخزين قناة شفافية (ألفا). أي صورة تحتاج خلفية شفافة — شعار يُوضع على بطاقة ملونة، صورة منتج على خلفية مجهولة — لا يمكن أن تكون بتنسيق JPEG.

يُعالج JPEG أيضًا الحواف الحادة والكتل ذات اللون الموحّد بشكل سيئ. اضغط لقطة شاشة لكود برمجي أو مخططًا ذا نص واضح وستظهر لك تشوهات كتلية حول كل حافة. لأي شيء به تباينات حادة، JPEG هو الأداة الخاطئة.

بالنسبة للصور المحفوظة بـ PNG بدلًا من JPEG، تكون عقوبة الحجم صارمة: ملفات PNG للصور عادةً ما تكون أكبر بـ 5–10 أضعاف من نظيراتها بتنسيق JPEG، مع صفر فائدة ملحوظة في الجودة.

PNG: الدقة بلا فقدان حين يكون ذلك مهمًا

يخزّن PNG (Portable Network Graphics) كل بكسل تمامًا كما حُفظ. لا شيء يُضاع. المفاضلة هي حجم الملف — يستخدم PNG ضغطًا بلا فقدان، مما يعني أن الصور ذات الألوان المعقدة (الصور الفوتوغرافية) تبقى كبيرة الحجم.

ما يتقنه PNG

PNG هو التنسيق الصحيح حين تكون الدقة الكاملة للبكسل مهمة:

• الشعارات والعلامات التجارية — حواف حادة وألوان مسطحة وشفافية للوضع على أي خلفية
• لقطات الشاشة — عناصر واجهة المستخدم ومقتطفات الكود والنص يُصيَّر بوضوح عند أي مستوى تكبير
• المخططات والرسوم التوضيحية — الرسوم البيانية والمخططات الانسيابية ومجموعات الأيقونات ذات الحواف المحددة
• الصور التي ستُعدَّل مجددًا — كل حفظ لـ JPEG يُعيد ضغطه ويُدهور جودته؛ PNG يتنقل ذهابًا وإيابًا دون فقدان

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

أين يقصر PNG

لا تحفظ صورة فوتوغرافية بتنسيق PNG إن كنت تعتزم تقديمها على الويب. صورة DSLR عالية الدقة قد تكون 3 ميغابايت كـ JPEG بجودة 85 و25 ميغابايت كـ PNG. لن يُقدّر هذا القرار لا المستخدم ولا فاتورة النطاق الترددي. للمحتوى الفوتوغرافي، PNG هو التنسيق الخاطئ في كل مرة تقريبًا.

WebP: الحل العملي متعدد المزايا

قدّمت Google تنسيق WebP عام 2010 وأمضت العقد التالي في دمجه في كل متصفح. اعتبارًا من 2026، يبلغ دعم المتصفحات العالمي نحو 97%، مما يعني عمليًا أنك تستطيع استخدامه دون صورة احتياطية لمعظم الجماهير.

أرقام الضغط

كشف بحث Google الأصلي المقارن بين WebP وJPEG عند جودة SSIM مكافئة أن WebP أصغر من JPEG بنسبة 25–34%. أكدت دراسات مستقلة لاحقًا أن هذا النطاق يسري عبر مكتبات صور متنوعة. لموقع يقدّم آلاف الصور شهريًا، هذا التخفيض يتحول مباشرةً إلى تكاليف CDN أقل وأوقات تحميل أسرع.

يدعم WebP النمطين ذا الفقدان وبلا فقدان، مما يجعله بديلًا حقيقيًا لكل من JPEG (النمط ذا الفقدان) وPNG (النمط بلا فقدان) في معظم الحالات. الأهم أنه يدعم أيضًا شفافية ألفا الكاملة في كلا النمطين — وهو ما يعجز عنه JPEG تمامًا.

متى تستخدم WebP

• الصور العامة على الويب حيث التوافق الواسع هو الأولوية
• استبدال JPEG لصور المنتجات والصور التحريرية والصور الرئيسية
• استبدال PNG للشعارات والرسومات حين تريد الشفافية بحجم أصغر من PNG
• أي موقف تريد فيه قرار تنسيق واحدًا يعمل مع مكتبة صورك بأكملها

يمكنك ضغط الصور إلى WebP أو تحويل تنسيقات الصور بين PNG وJPEG وWebP مباشرةً في المتصفح دون تثبيت أي شيء.

الحالات الاستثنائية التي يقصر فيها WebP

قد يُدخل النمط ذو الفقدان في WebP تدرجًا خفيًا في التدرجات السلسة عند إعدادات ضغط عدوانية — أكثر من JPEG عند أحجام ملفات مكافئة. لبعض المحتوى الفوتوغرافي، ولا سيما ظلال الجلد وتدرجات السماء، يُنتج AVIF نتائج أنظف بحجم ملف مماثل.

AVIF: أقصى ضغط ودعم متنامٍ

AVIF (AV1 Image File Format) مشتق من مرمّز الفيديو AV1 الذي طورته Alliance for Open Media. ويمثّل قفزة جيلية في كفاءة الضغط.

أرقام الضغط

تُظهر الدراسات المقارنة بين AVIF وJPEG عند جودة بصرية مكافئة باستمرار تخفيضًا في حجم الملف بنسبة 50% أو أكثر. يمكن في الغالب إعادة إنتاج JPEG بحجم 200 كيلوبايت كـ AVIF بحجم 90–100 كيلوبايت لا يمكن تمييزه عند مسافات المشاهدة العادية. نشرت Netflix — التي تُرمّز كميات ضخمة من صور المصغّرات والمعاينة — نتائج تُظهر أن AVIF يخفض النطاق الترددي للصور بنسبة 50% مقارنةً بـ JPEG.

لتوصيل الصور بحجم كبير — كتالوجات منتجات التجارة الإلكترونية ومنصات التواصل الاجتماعي والمواقع الإخبارية الغنية بالصور — هذه المدخرات ليست هامشية. إنها تؤثر تأثيرًا ملموسًا على إنفاق CDN وأوقات تحميل الصفحات.

دعم HDR ونطاق الألوان الواسع

يدعم AVIF بشكل أصلي HDR (النطاق الديناميكي العالي) ونطاقات الألوان الواسعة مثل Display P3. على الشاشات المتوافقة، يمكن لصور AVIF إظهار إضاءات أكثر سطوعًا وظلال أعمق من تنسيقات SDR. لعروض التصوير ومحافظ التصميم وأي موقع تهم فيه دقة الصورة على الشاشات المتميزة، هذا عامل تمييز حقيقي.

مشكلة سرعة الترميز

ضعف AVIF هو وقت الترميز. مقارنةً بـ JPEG أو WebP، يكون ترميز AVIF أبطأ بشكل ملحوظ — في الغالب أبطأ بمعدل 5–10 أضعاف عند إعدادات الجودة المكافئة. في خطوط بناء تُعالج آلاف الصور، يتراكم هذا. تخفّف معظم الفرق من هذا بترميز AVIF في وقت البناء أو كمهمة دُفعية لمرة واحدة لا عند الطلب.

سرعة فك الترميز (ما يفعله المتصفح عند تصيير الصورة) سريعة وليست مصدر قلق للمستخدم على الأجهزة الحديثة.

دعم المتصفحات في 2026

يبلغ دعم AVIF نحو 93% عبر المتصفحات في مطلع 2026، مما يعني أنه لا يزال ينبغي تقديم صورة WebP أو JPEG احتياطية لتغطية كاملة. النمط القياسي:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="وصف" />
</picture>

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

JPEG XL: جدير بالمتابعة، لكنه لم يكتمل بعد

JPEG XL (.jxl) هو التنسيق الأكثر قدرة من الناحية التقنية في هذه القائمة. يُعادل AVIF في الضغط أو يتخطاه، ويدعم إعادة ترميز ملفات JPEG الموجودة دون فقدان جودة (مما يجعله مفيدًا بشكل فريد للأرشفة)، ويتعامل مع HDR ونطاق الألوان الواسع والرسوم المتحركة. صممه فريق JPEG بوصفه بديلًا طويل الأمد لكامل منظومة JPEG.

المشكلة هي دعم المتصفحات. اعتبارًا من مطلع 2026، لا يزال JPEG XL خلف أعلام تجريبية في معظم المتصفحات ولا يكون مفعَّلًا افتراضيًا في أي مكان عدا Safari (الذي أضاف الدعم عام 2022). أزال Chromium دعمه التجريبي عام 2022 رغم أن النقاش لا يزال نشطًا في متعقّب مشكلات Chromium.

توصيتنا: لا تستخدم JPEG XL لتوصيل الويب اليوم. راقبه. إن كنت تبني خط أرشفة للتصوير أو تعمل مع تطبيقات منظومة Apple، فإنه يستحق الانتباه. للعمل على الويب في الإنتاج، AVIF + الصورة الاحتياطية بـ WebP هي المزيج الصحيح الآن.

شجرة القرار

استخدم هذا لاتخاذ قرار سريع بشأن التنسيق.

هل تحتاج إلى شفافية؟

نعم — استخدم WebP (النمط بلا فقدان) تنسيقًا رئيسيًا لك. يمنحك الشفافية بملفات أصغر من PNG. إن احتجت دقة بلا فقدان مثالية البكسل (شعارات تُعاد للطباعة، أصول المصدر)، استخدم PNG. JPEG ليس خيارًا.

لا — تابع أدناه.

أهذه صورة فوتوغرافية أم رسم توضيحي؟

صورة فوتوغرافية (نبرات متصلة، ألوان معقدة):

• إن احتجت أوسع دعم ممكن للمتصفحات: JPEG
• إن أردت ملفات أصغر بشكل ملموس مع دعم شبه شامل: WebP (النمط ذو الفقدان)
• إن كنت تُحسّن النطاق الترددي على نطاق واسع وتستطيع تقديم صورة احتياطية: AVIF مع WebP احتياطية

رسم توضيحي (شعار، مخطط، لقطة شاشة، نص):

• استخدم WebP (النمط بلا فقدان) أو PNG تبعًا لما إذا كان حجم الملف أو توافق الأدوات أهم بالنسبة لك
• لا تستخدم JPEG أبدًا للرسومات ذات الحواف الحادة أو مناطق اللون المسطح

هل تقدّم الخدمة على نطاق واسع؟

إن كان موقعك يُوصّل أكثر من بضعة آلاف طلب صور يوميًا، تصبح فجوة الضغط بين JPEG وAVIF ذات أهمية في التكاليف الفعلية. نفّذ عنصر <picture> مع صور احتياطية AVIF + WebP + JPEG. تكلفة الهندسة منخفضة؛ والمدخرات في البنية التحتية تتراكم مع الوقت.

ملخص المرجع السريع

كيفية التحويل بين التنسيقات

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

ImageMagick (سطر الأوامر):

# تحويل JPEG إلى WebP
magick input.jpg -quality 82 output.webp
 
# تحويل JPEG إلى AVIF
magick input.jpg -quality 60 output.avif
 
# تحويل PNG إلى WebP بلا فقدان
magick input.png -define webp:lossless=true output.webp

Squoosh (مستند إلى المتصفح): يتيح لك تطبيق Squoosh من Google مقارنة التنسيقات جنبًا إلى جنب بشريط جودة ومعاينة حية لحجم الملف — مفيد لمعايرة إعدادات الضغط بصريًا قبل الالتزام بتحويل دُفعي.

FileCrank: يمكنك تحويل تنسيقات الصور مباشرةً في متصفحك دون تثبيت أي شيء — مفيد للتحويلات الفردية أو عند العمل على جهاز دون أدوات محلية.

للمعالجة الجماعية وتقليل الحجم، تتولى أداة ضغط الصور تحويل التنسيق وتحسين الجودة في خطوة واحدة.

العلاقة بين اختيار التنسيق والضغط

اختيار التنسيق الصحيح هو نصف الصورة فحسب. قد يتباين ملفان WebP بإعدادات جودة مختلفة بمقدار 3 أضعاف في حجم الملف مع فارق مرئي ضئيل. إن أردت التعمق في معايرة الجودة مقابل الحجم، يتناول مقال كيفية ضغط الصور دون فقدان الجودة الآليات العملية لإعدادات الجودة والتحميل التدريجي ومقاييس الجودة الإدراكية كـ SSIM وDSSIM.

للاطلاع على شرح مؤسسي لسبب إنتاج الضغط بالفقدان وبلا فقدان لنتائج مختلفة جدًا، ومتى يكون كل نهج مناسبًا، راجع الضغط بالفقدان مقابل بلا فقدان — شرح مفصّل.

الخلاصة

يتلخص قرار التنسيق في ثلاثة أسئلة: هل تحتاج إلى شفافية؟ هل هي صورة فوتوغرافية أم رسم توضيحي؟ هل تُحسّن من أجل أقصى ضغط؟

للغالبية العظمى من مشاريع الويب الحديثة في 2026، الإجابة العملية هي:

• WebP تنسيقك الافتراضي — يتعامل مع الشفافية ويعمل بكلا النمطين ذي الفقدان وبلا فقدان، وله دعم شبه شامل من المتصفحات وأصغر من JPEG بنسبة 25–34%
• AVIF حين تكون مدخرات النطاق الترددي في أعلى أهمية — مع صورة <picture> احتياطية بـ WebP أو JPEG للمتصفحات الـ 7% المتبقية
• PNG فقط حين تقتضي ذلك الدقة بلا فقدان أو توافق الأدوات تحديدًا
• JPEG آخر الخيارات، وما زال الاختيار الصحيح للبريد الإلكتروني

اختر بناءً على نوع المحتوى وسياق التوصيل لا بناءً على العادة. الفرق بين AVIF بحجم 200 كيلوبايت وPNG بحجم 600 كيلوبايت للصورة ذاتها غير مرئي للزوار، لكنه واضح جدًا في أوقات تحميل صفحاتك وتكاليف البنية التحتية.

هل أنت مستعد للتطبيق؟ حوّل صورك إلى WebP أو AVIF، أو اضغط الصور الحالية لترى كم يمكنك استرداده من خيارات التنسيق الحالية.