هل تختار PNG أم JPG لصور موقع الويب؟

اختيار الصيغة قرار يتعلق بالسرعة

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

في هذا المقال نقارن PNG بـ JPG في سياق الويب: أيهما يتفوق في كل نوع من المحتوى، وما الأسئلة التي ينبغي طرحها عند اتخاذ القرار، وما الذي يجب الانتباه إليه عند إجراء تحويل جماعي.

أولاً السؤال الفاصل: هل الشفافية مطلوبة؟

قبل الشروع في المقارنة، ثمة سؤال واحد يجب الإجابة عنه: هل يجب أن تكون خلفية الصورة شفافة؟

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

وإن كان الجواب لا، فحينئذ تصبح المقارنة ذات معنى ويُتخذ القرار بحسب نوع المحتوى.

نوع المحتوى: العامل الحاسم فعلاً

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

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

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

ما مدى أهمية فارق الحجم فعلياً

يؤثر وزن الصفحة مباشرة في زمن التحميل، ويؤثر زمن التحميل بدوره في بقاء الزائر في الصفحة من عدمه. ويصبح هذا الفارق ملموساً على وصلات الهاتف المحمول خصوصاً.

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

أخطاء ينبغي تجنّبها عند التحويل

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

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

اختيار إعداد الجودة عشوائياً. إذا رفعت إعداد جودة JPG كثيراً فقدت مكسب الحجم، وإذا خفضته كثيراً ظهر تشوه مرئي. افحص المخرَج بعد التحويل عند تكبير 100% وانظر خصوصاً إلى الانتقالات اللونية الصلبة والحواف الحادة.

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

مسار عملي لاتخاذ القرار

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

هذا المسار الثلاثي الخطوات يمنحك القرار الصحيح للغالبية العظمى من صور الويب دون حاجة إلى تفكير مطوّل.

الخلاصة

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