صورة فوتوغرافية، شعار شفاف، لقطة شاشة فيها نص صغير: الثلاثة صور، لكن تخزينها بالطريقة نفسها قرار سيئ. أحيانًا تدفع الثمن في الحجم، وأحيانًا في الحواف والوضوح. الاختيار الصحيح يبدأ من المهمة التي ستؤديها الصورة.
محتويات المقال
داخل الدليل
متى تختار JPG؟
أين يتفوق PNG؟
لماذا WebP؟
مقارنة عملية
الأبعاد أهم مما تظن
قرار سريع
المصادر الرسمية
الخطأ المعتاد بسيط: شخص يسمع أن WebP أخف، فيحوّل كل شيء إليه. شخص آخر يثق في PNG لأنه «يحافظ على الجودة»، فيرفع صورًا فوتوغرافية ضخمة إلى موقعه. وثالث يحفظ لقطة شاشة مليئة بالنصوص بصيغة JPG مضغوطة بقوة ثم يتساءل لماذا أصبحت الحروف مهزوزة.
الصيغة ليست ميدالية جودة. هي طريقة لتخزين بيانات الصورة، ولكل طريقة نقاط قوة وحدود. حتى المقارنة بين ملفين لا تكون عادلة إذا اختلفت أبعادهما أو إعدادات الضغط. وإذا كان هدفك الأساسي هو تخفيف الملف، فدليل تقليل حجم الصور دون إفساد الجودة يفصل بين أثر الأبعاد والصيغة ومستوى الضغط.
الاختيار بين JPG وPNG وWebP
JPG: ممتاز للصور الفوتوغرافية، لا لكل شيء
لجنة JPEG الرسمية، وهي مجموعة عمل مشتركة ضمن ISO/IEC وبالتعاون مع ITU، تصف JPEG 1 الأساسي بأنه نظام يعتمد على ترميز DCT الفقدي في الاستخدام المعروف للصيغة، مع وجود أوضاع أخرى ضمن المعيار نفسه. هذه الخلفية تفسر لماذا يناسب JPEG الصور ذات التدرجات والتفاصيل الطبيعية بصورة جيدة، ولماذا تظهر آثار الضغط أسرع حول النصوص والحواف الدقيقة. [المصدر: لجنة JPEG الرسمية]
في صورة شخص أو شارع أو طعام، مقدار معقول من الضغط قد يمر بصريًا بلا مشكلة. في لقطة شاشة، الوضع يتغير. الحروف والخطوط المستقيمة لا تخفي عيوب الضغط بالطريقة نفسها.
صورة منتج التقطتها بالكاميرا ولا تحتاج خلفية شفافة. هنا يستحق JPG المقارنة مع WebP. لا تحكم بالاسم؛ صدّر نسختين بالحجم نفسه تقريبًا، ثم قارن الوزن والتفاصيل عند المقاس الذي سيشاهده الزائر.
PNG: عندما تكون الدقة غير الفقدية والشفافية جزءًا من المهمة
مواصفة PNG الصادرة عن W3C تعرف PNG كصيغة نقطية تستخدم ضغطًا غير فقدي، وتدعم أنماط ألوان متعددة وقناة Alpha اختيارية للشفافية. هذا وصف معياري، لا رأي تحريري. [المصدر: W3C — PNG Specification, Third Edition]
هذا يجعل PNG مناسبًا للشعارات، الرسومات البسيطة، وبعض لقطات الشاشة التي يجب أن تبقى حوافها نظيفة. لكنه لا يمنحك تصريحًا لرفع كل صورة بصيغة PNG. صورة فوتوغرافية كبيرة يمكن أن تتحول إلى ملف ضخم بلا مكسب يراه الزائر.
WebP: ليس سحرًا، لكنه قوي جدًا على الويب
Google، الجهة التي طورت WebP وتنشر وثائقه المرجعية، توضح أن الصيغة تدعم الضغط الفقدي وغير الفقدي والشفافية. وتذكر في اختبارات منشورة لديها أن WebP غير الفقدي كان أصغر من PNG، وأن WebP الفقدي حقق أحجامًا أقل من JPEG في مقارنات جودة محددة. هذه أرقام من اختبارات Google نفسها، وليست قاعدة تضمن النتيجة نفسها لكل صورة. [المصدر: Google for Developers — WebP]
هذه النقطة مهمة: لا نأخذ نسبة من دراسة ونحولها إلى وعد. صورة JPG مضبوطة جيدًا قد تكون بالفعل خفيفة. PNG فوتوغرافي سيئ الاختيار قد يستفيد كثيرًا من التحويل. الاختبار على الملف الحقيقي هو الحكم.
مقارنة عملية قبل أن تحفظ الملف
| نوع الصورة | ابدأ بالمقارنة بين | ما الذي تراقبه؟ |
|---|---|---|
| صورة فوتوغرافية | WebP وJPG | تفاصيل الوجه/المنتج مقابل حجم الملف. |
| شعار شفاف | WebP وPNG | حواف الشعار والشفافية والحجم. |
| لقطة شاشة فيها نص | PNG وWebP غير فقدي | حدة الأحرف والخطوط الدقيقة. |
| صورة منتج | WebP وJPG | لا توفر الحجم على حساب تفاصيل تؤثر في قرار الشراء. |
| أيقونة أو رسم بسيط | PNG/WebP، أو SVG إن كان الرسم متجهيًا | الحواف والتوافق وطبيعة الأصل. |
PNG وJPEG وWebP: متى تختار كل صيغة؟
بدل مقارنة آلية قد تختلف نتيجتها بين المتصفحات، صممنا هذه الصورة خصيصًا للمقال لتلخص الاستخدام العملي لكل صيغة بصورة مباشرة.
أحيانًا المشكلة ليست الصيغة أصلًا
يمكنك تحويل الصورة إلى WebP ثم تظل ثقيلة لأنك أبقيتها بعرض 5000 بكسل وهي ستظهر داخل المقال بعرض 1100. هنا أنت تحاول إصلاح المشكلة من الطرف الخطأ.
نسخة الويب يجب أن تخدم مساحة العرض الفعلية. احتفظ بالأصل الكبير للأرشيف أو التحرير، وأنشئ نسخة مناسبة للموقع. تقليل عدد البكسلات غير الضرورية قد يعطي فرقًا أكبر من التنقل بين الامتدادات.
مثال بالأرقام، من دون ادعاء نسبة ثابتة
لديك صورة أصلية 4000×2667. مكان العرض في المقال لا يتجاوز تقريبًا 1200 بكسل. اصنع نسخة في حدود المقاس الذي تحتاجه، ثم جرّب JPG وWebP بإعدادات متقاربة بصريًا. إذا كانت نسخة WebP أخف بوضوح ولا ترى فرقًا مهمًا، استخدمها. إذا كان JPG أصلًا صغيرًا ونظيفًا، لا توجد جائزة لتحويله بالقوة.
الشفافية تختصر نصف النقاش
إذا كنت تحتاج خلفية شفافة، JPEG التقليدي ليس اختيارك. PNG يدعم قناة Alpha حسب مواصفة W3C، وWebP يدعم الشفافية بحسب وثائق Google الرسمية. يبقى السؤال: أيهما يعطي النتيجة التي تحتاجها بحجم منطقي؟
في شعار واحد صغير قد يكون الفرق غير مهم. في عشرات أو مئات الصور الشفافة داخل متجر أو واجهة، تبدأ الكيلوبايتات في التراكم.
ومتى يكون SVG أفضل من PNG أو WebP؟
SVG مختلف عن الصيغ الثلاث السابقة لأنه صيغة متجهية تصف الرسومات رياضيًا بدل تخزين شبكة بكسلات فقط. مواصفة W3C تعرف SVG كلغة لوصف الرسومات المتجهية ثنائية الأبعاد، ولهذا يناسب الشعارات والأيقونات والرسوم البسيطة التي يجب أن تبقى حادة عند التكبير. لكنه ليس بديلًا معتادًا للصور الفوتوغرافية. [المصدر: W3C — SVG 2]
التحويل المتكرر لا يعيد ما فُقد
إذا ضغطت صورة بصيغة فقدية بقوة ثم حولتها إلى صيغة أخرى، الصيغة الجديدة لا تستعيد التفاصيل المحذوفة. ولهذا من الأفضل الاحتفاظ بالأصل الجيد، والعودة إليه كلما أردت إنشاء نسخة جديدة للويب.
التحويل بين الامتدادات ليس تحسينًا بحد ذاته. يمكن أن تنتج ملفًا أكبر أو أقل جودة إذا كانت الإعدادات غير مناسبة.
قرار عملي في أقل من دقيقة
- صورة فوتوغرافية ولا شفافية؟ قارن WebP مع JPG.
- شعار أو عنصر شفاف؟ قارن WebP مع PNG.
- لقطة شاشة فيها كتابة دقيقة؟ ابدأ بخيار غير فقدي، ثم اختبر.
- الملف ما زال ثقيلًا؟ راجع الأبعاد قبل أن تخفض الجودة أكثر.
- الفرق البصري واضح؟ ارجع خطوة. ليست كل كيلوبايت تستحق التضحية بالتفاصيل.
اختبر صورتك بدل الاعتماد على قاعدة عامة
أداة الصور في تولاتي تسمح لك بتغيير الصيغة والأبعاد والجودة، ثم مقارنة الحجم قبل وبعد. هكذا تتخذ القرار على ملفك أنت، لا على مثال نظري.
المصادر الرسمية المستخدمة
- W3C — Portable Network Graphics (PNG) Specification, Third Edition: المرجع المعياري لخصائص PNG والضغط غير الفقدي وقناة Alpha.
- Google for Developers — WebP: الوثائق الرسمية للصيغة، أوضاع الضغط، الشفافية، ونتائج المقارنات المنشورة من Google.
- JPEG Committee — JPEG 1: الموقع الرسمي للجنة JPEG التابعة لـISO/IEC JTC 1/SC 29/WG 1 وبالتعاون مع ITU، مع وصف نظام JPEG 1 الأساسي.
- W3C — Scalable Vector Graphics (SVG) 2: المرجع الرسمي لصيغة SVG والرسومات المتجهية ثنائية الأبعاد.