أيّها لسرعة الموقع: PNG أم WEBP أم AVIF؟

السؤال أعقد مما يبدو

الأجوبة التي تُعطى لسؤال «أي صيغة صور أستخدم لموقعي؟» تُعلن فائزًا في العادة. والحقيقة أن هذا السؤال لا يمكن الإجابة عنه بفائز واحد، لأن الصيغ الثلاث قوية في مواضع مختلفة، ولأن أكبر متغيّر في الويب — جهاز الزائر ومتصفحه — ليس تحت سيطرتك.

في هذا المقال نقارن بين الصيغ الثلاث على معايير حقيقية، ثم نشرح الاستراتيجية العملية التي ينبغي أن تطبّقها معظم المواقع.

صورة موجزة عن الصيغ الثلاث

PNG

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

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

موضع ضعفها: المحتوى الفوتوغرافي. فالملمس الطبيعي والتدرّجات اللونية المتصلة لا يمكن ترميزها بكفاءة بخوارزميات بلا فقد؛ ويخرج حجم الصورة الفوتوغرافية بصيغة PNG كبيرًا إلى حد مدهش. وهذا يعني على الويب صفحة بطيئة مباشرةً.

WEBP

الجيل الشائع الأول من الصيغ الحديثة. تستطيع العمل في الوضعين مع الفقد وبلا فقد، وتدعم قناة alpha. وهي أكفأ بوضوح من JPG.

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

موضع ضعفها: ليست بكفاءة AVIF. فهي تنتج ملفات أكبر عادةً عند الجودة البصرية نفسها.

AVIF

صيغة من الجيل الجديد قائمة على الترميز داخل الإطار في مرمِّز الفيديو AV1. تدعم قناة alpha وHDR والمجال اللوني الواسع والعمق اللوني العالي. ولها وضعان: مع فقد وبلا فقد.

موضع قوتها: كفاءة الضغط. فهي تنتج ملفات أصغر بوضوح من JPG عند جودة بصرية متقاربة — ونسبة النصف تقريبًا التي كثيرًا ما تُذكَر تعميم، لكن اتجاهها صحيح — وهي أكفأ من WEBP عادةً أيضًا. ويصير الفارق لافتًا في المحتوى الفوتوغرافي.

موضع ضعفها: التوافق. فالمتصفحات الرئيسية الحديثة تدعمها، لكن الأجهزة القديمة وأنظمة التشغيل القديمة وكثيرًا من برامج سطح المكتب وبعض المنصات لا تدعمها. كما أن عملية الترميز أثقل من الناحية الحسابية؛ فإنتاج الملف يستغرق وقتًا أطول.

جدول المقارنة

| المعيار | PNG | WEBP | AVIF | |---|---|---|---| | كفاءة الضغط | منخفضة (في الصور الفوتوغرافية) | جيدة | الأفضل | | وضع بلا فقد | دائمًا | موجود | موجود | | الشفافية | نعم | نعم | نعم | | دعم المتصفحات | عالمي | واسع جدًا | المتصفحات الحديثة | | دعم برامج سطح المكتب | عالمي | واسع | محدود | | سرعة الترميز | سريعة | سريعة | أبطأ |

إدراك حاسم: هذا ليس سؤال «إمّا/أو»

إن قرأت إلى هنا فقد لاحظت توترًا. فـ AVIF الأكفأ لكنها الأخطر. وPNG الأأمن لكنها الأبطأ. والوقوف في المنتصف لا يبدو حلًا أيضًا.

والحل ليس الاختيار بين الصيغ، بل تقديمها كلها معًا.

وعنصر picture في HTML موجود لهذا الغرض بالضبط. فأنت تعرّف أكثر من نسخة للصورة نفسها؛ فيختار المتصفح أكفأ صيغة يدعمها، ويتخطى بهدوء ما لا يدعمه. ولا يلاحظ الزائر شيئًا — بل يجد التحميل أسرع فحسب في المتصفح الحديث.

وتُبنى سلسلة احتياطية نموذجية على النحو الآتي:

1. AVIF — تنال المتصفحات الداعمة لها أصغر ملف
2. WEBP — تنزل إليها البيئات الحديثة التي لا تدعم AVIF
3. JPG أو PNG — شبكة الأمان الأخيرة للبيئات الأقدم

وثمن هذه المقاربة أن تنتج بضع نسخ من كل صورة وتخزّنها. أما مكسبها فالسرعة وإمكان الوصول معًا؛ فلا تضحّي بأحدهما من أجل الآخر.

فماذا لو كنت مضطرًا إلى اختيار صيغة واحدة؟

في بعض السياقات لا تستطيع استخدام آلية picture — كالنشرة البريدية، والرفع إلى بعض المنصات، ومشاركة الملفات مباشرةً. وفي تلك الحال يُتخذ القرار بحسب المحتوى والجمهور:

• محتوى فوتوغرافي وجمهور ويب حديث ← AVIF أو WEBP. فـ WEBP أأمن، وAVIF أسرع.
• محتوى فوتوغرافي وملمح الجمهور غير معروف ← ما زالت JPG الخيار العالمي الأأمن.
• شعار أو أيقونة أو رسم حادّ الحواف ← PNG. فهي بلا فقد، وشفافيتها متسقة، وتُفتح في كل مكان، وحجمها صغير أصلًا في هذا المحتوى.
• لقطة شاشة أو نص كثيف ← PNG، أو WEBP عالية الجودة. فقابلية القراءة أهم معيار.
• الشفافية مطلوبة والملف يجب أن يكون صغيرًا ← WEBP أو AVIF؛ فكلتاهما تدعم قناة alpha.

خطأ شائع: التضحية بالمصدر

توجد في نقاش الصيغ نقطة كثيرًا ما تُتخطّى. فالملفات المحسَّنة التي تنتجها للويب نسخ تسليم، لا النسخة الأصلية.

فحين تنتج ملف WEBP أو AVIF مع فقد لا تعود البيانات المطروحة. وإذا احتجت مستقبلًا إلى إعادة تحجيم الصورة أو إنتاجها بإعداد جودة مختلف أو تحويلها إلى صيغة أخرى فستحتاج إلى مصدر بلا فقد.

ولذلك لا تحذف ملف PNG الأصلي عند تحويل PNG إلى AVIF. فليبقَ المصدر بلا فقد؛ أما نسخة العرض فتعيد إنتاجها ما شئت.

ما لا تستطيع الصيغة حلّه

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

فإن كنت تقدّم بعرض 4000 بكسل صورةً تظهر على الشاشة بعرض 400 بكسل، فجعل الصيغة AVIF لا يزيل هذا الهدر — بل يحزم الهدر بكفاءة أعلى قليلًا فحسب. وإنتاج الصور بمقاس مناسب للمقاس الذي تُستخدم به يحقق في الغالب مكسبًا أكبر من تغيير الصيغة.

وكذلك فإن التحميل المؤجل لصور الجزء غير الظاهر من الشاشة، وإخراج الصور غير الضرورية من الصفحة، مكسبان مستقلان عن الصيغة أيضًا.

الخلاصة

AVIF الأكفأ، وWEBP الأكثر توازنًا، وPNG الأأمن وما زالت الخيار الأصوب في المحتوى حادّ الحواف. لكن الجواب الحقيقي ليس اختيار إحداها: بل بناء سلسلة صيغ احتياطية والسماح للمتصفح باختيار الأفضل لنفسه. وفي كل موضع تستطيع فعل ذلك فيه تنال السرعة وإمكان الوصول في آن واحد. أما في المواضع التي لا تستطيع فيها ذلك فنوع المحتوى وملمح جمهورك هما اللذان يقرّران — ولا تنسَ في كل الأحوال حفظ مصدرك بلا فقد.