هل تستخدم PNG أم WEBP للشعارات والأيقونات؟

لماذا تختلف هذه المقارنة عن غيرها؟

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

في هذا المقال نقارن PNG بـ WEBP على هذه المحاور الثلاثة، ونوضّح أيهما الاختيار الصحيح في كل سيناريو.

الشفافية: كلتاهما تدعمها، لكن بفارق

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

وتدعم PNG ذلك منذ البداية. فهي تخزّن لكل بكسل قيمة شفافية من 256 مستوى؛ وبفضل ذلك تندمج حواف الشعار المائلة بالأرضية اندماجاً سلساً، وتبدو الظلال طبيعية.

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

أي إن كلتيهما كافية من حيث الشفافية، غير أن WEBP تقدّم خيارات أكثر.

جودة الحواف: البقاء عديم الفقد شرط

تتجلى الجودة المرئية للشعارات والأيقونات في حوافها. فأي هالة خفيفة أو تنعيم ينشأ عند حافة حادة يُلحظ فوراً عند المقاسات الصغيرة، ويجعل العلامة التجارية تبدو غير متقنة.

وبما أن PNG عديمة الفقد فلا وجود لهذه المخاطرة؛ إذ تُحفظ الصورة التي حفظتها كما هي تماماً.

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

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

حجم الملف: المكسب مرهون بالمقياس

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

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

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

التوافق: أقوى أوراق PNG

الشعار هو الصورة الأكثر نسخاً في أي موقع. فهو يدخل في الحقيبة الصحفية، ويُضاف إلى توقيع البريد الإلكتروني، ويُنشر في مواقع الشركاء، ويُلصق في العروض التقديمية والمستندات المكتبية، ويُرفع إلى منصات الطرف الثالث.

وتعمل PNG في هذه الأوساط جميعاً دون مشكلة. فتوافقها شامل؛ ولا يوجد سيناريو يعجز فيه نظام ما عن فتحها.

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

القرار بحسب السيناريو

الشعار المعروض في صفحات موقعك: يمكن استخدام WEBP، مع الاحتفاظ بنسخة PNG احتياطية. وابقَ في الوضع اللاضائع.

الحقيبة الصحفية، والمشاركة مع الشركاء، والملفات المؤسسية: PNG. فأنت لا تعرف بأي أداة سيفتحها الطرف الآخر؛ والتوافق يتقدم على المكسب.

توقيع البريد الإلكتروني والنشرات: PNG. فدعم WEBP في عملاء البريد الإلكتروني غير موثوق.

مجموعات أيقونات الواجهة: قيّم الصيغة المتجهية أولاً؛ فإن تعذّرت فاستخدم WEBP اللاضائعة أو PNG. وإذا كان الوزن الإجمالي لعدد كبير من الأيقونات مهماً، فإن WEBP تُحدث فرقاً معتبراً.

الشعارات المعقدة أو المظلَّلة أو المتدرجة: WEBP. فهذا بالضبط نوع المحتوى الذي تتعثر فيه PNG؛ وقد ترى مكسباً واضحاً حتى في الوضع اللاضائع.

صور ملفات التواصل الاجتماعي: انظر إلى الصيغة التي تقبلها المنصة؛ فأغلبها يطلب PNG أو JPG ويعيد معالجة الصورة المرفوعة إلى صيغته الخاصة.

عند إجراء التحويل

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

وبعد التحويل، ضع الشعار فوق أرضية فاتحة وأخرى داكنة وافحص الحواف بتكبيرها. وينبغي أن تكون الشفافية محفوظة والحواف نظيفة.

الخلاصة

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