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

في أي حال، أنت الآن تتساءل عن الفرق بين تنسيقات الصور JPG وPNG وWebP، وأي واحد كان من المفترض استخدامه.

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

صور JPEG: مصممة للصور الفوتوغرافية

تستخدم صيغة JPG (أو JPEG) ضغطًا خساريًا. ويعني ذلك أنها تقلل حجم الملف عن طريق التخلص من التفاصيل التي من غير المرجح أن يلاحظها عينك، ولا يمكن استرداد هذه التفاصيل. وبالنسبة لصورة فوتوغرافية، ذات آلاف التدرجات الدقيقة، هذا مناسب تمامًا: تحصل على ملف صغير لا يزال يشبه الصورة.

• تكافح تنسيقات الصور JPEG (JPG) عند التعامل مع الحواف الحادة والألوان المسطحة: النصوص، والشعارات، وصور الشاشة، والرسومات الخطية. إن نفس الضغط الذي يُلطف السماء ويُقلص حجم الملف يترك بقعًا مرئية تُعرف بالآثار حول الحدود الحادة. لا تدعم JPEG الشفافية أيضًا. كل صورة JPEG هي مستطيل متجانس، لذلك فإن حفظ شعار كملف JPG سيأتي مع مربع أبيض خلفه.

استخدم تنسيق JPG للصور، وبالفعل فقط للصور.

صورة PNG: مصممة للرسومات والشفافية

استخدام تنسيق PNG للضغط غير المفقود

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

تتمثل قوة ملفات PNG الأخرى في الشفافية. يمكن أن يكون لـ PNG خلفية شفافة، لذلك يتم وضع الشعار نظيفًا فوق أي لون أسفل بدلاً من الجلوس في صندوق أبيض.

المشكلة تكمن في حجم الملف. حيث يحتفظ تنسيق PNG بكل بكسل، لذا يمكن أن يكون ملف صورة PNG أكبر عدة مرات من نفس الصورة بتنسيق JPG، دون أي فائدة مرئية. تم تصميم PNG للرسومات وليس للصور الفوتوغرافية.

ويب بي: المتعدد الاستخدامات الحديث

WebP هو تنسيق أحدث يمكنه أداء المهمتين معًا

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

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

عندما يعض التنسيق الخاطئ

• احتفظ بكل تنسيق Markdown بالضبط (العناوين، النص الجريء، الروابط، إلخ).
• احتفظ بالأسماء الخاصة والعلامات التجارية كما هي.

هنا النسخة المختصرة:

	JPG	PNG	WebP
ضغط البيانات	ضار	غير ضار	ضار أو غير ضار
الشفافية	لا	نعم	نعم
الأنسب لـ	صور	رسومات، نص، شعارات	أي صور على الإنترنت
حجم الملف لالصورة	صغير	كبير	الأصغر

المصمم الذي لن يتم تحميل شعاره

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

الصورة التي خرجت ضبابية

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

تحويل ما بينهما

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

كيف يحصل المصمم على شعار التحميل

بالنسبة للشعار الثقيل للمصمم، الحل هو تحويل صورة PNG إلى WebP (/image/image-to-webp): يحافظ على الشفافية ويقلل حجم الملف من الميجابايتات إلى بضعة مئات من الكيلوبايتات، مما يجعل الصفحة تُحمل بشكل أسرع. بنفس المظهر وحجم أصغر بكثير.

كيف يقوم المصمم بتصحيح النص الضبابي

بالنسبة للقطة شاشة مصممة، يعمل الإصلاح في الاتجاه المعاكس. يقومون بتحويلها مرة أخرى إلى PNG (/image/image-to-png) وتستعيد النص حوافه النظيفة مرة أخرى، لأن PNG يحتفظ بكل بيكسل بدلاً من التخمين.

وعندما يرفض نظام ما أي شيء آخر، وهو ما لا يزال يحدث مع نماذج التحميل القديمة وبعض الطابعات، يمكن تحويل ملف PNG أو WebP أو HEIC إلى JPG (/image/image-to-jpg)، الصيغة التي تقبلها كل المواقع والطابعات.

النسخة المختصرة

قواعد استخدام تنسيقات الصور

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

هل لديك ملف بتنسيق خاطئ؟ تحويله إلى WebP مجاناً → [/image/image-to-webp]

هل تحتاجها بالطريقة الأخرى؟ تحويل إلى PNG → رابط الصورة و تحويل الصورة إلى JPG → رابط الصورة متاحان أيضًا.