مقارنة ضغط الصور: الصيغ وإعدادات الجودة وواقع أحجام الملفات
1. ما الصيغة ومستوى الجودة الأنسب لاختيارك؟ إجابة سريعة
يعتمد اختيار الصيغة المثلى ومعامل الجودة على نوع المحتوى البصري واحتياجات التوزيع:
- الصور الفوتوغرافية والمشاهد متدرجة الألوان: صيغة WebP (بجودة 75% – 80%) أو JPEG (بجودة 75% – 80%). ضمن هذا النطاق، ينخفض حجم الملف بنسبة تتراوح بين 80% و95% دون أن تتمكن العين البشرية من ملاحظة أي تدهور بصري.
- الرسومات ذات الخلفية الشفافة والأيقونات والشعارات: صيغة WebP (مع الحفاظ الكامل على قناة ألفا، بجودة 75% – 80%) أو PNG (غير فاقدة للجودة). تجنب تماماً حفظ الصور الشفافة بصيغة JPEG؛ حيث لا تدعم JPEG الشفافية وتقوم بملء المساحات الشفافة بخلفية بيضاء مصمتة.
- لقطات الشاشة والمخططات والنصوص الدقيقة: صيغة PNG أو صيغة WebP غير الفاقدة للجودة. تتسبب خوارزمية ضغط JPEG في إحداث تشوهات هالية (ringing artifacts) وضبابية حول الحروف والحدود عالية التباين.
لماذا يتغير حجم الملف دون تغيير أبعاد البكسل؟ حتى مع بقاء أبعاد البكسل (العرض × الارتفاع) ثابتة، فإن برمجيات الترميز الفاقدة للجودة (مثل JPEG DCT وWebP VP8) تستبعد التباينات اللونية المكانية عالية التردد التي تعجز العين البشرية عن ملاحظتها باستخدام مصفوفات التكميم، ثم تخزن المتبقي عبر الترميز الإنتروبي بعدد بايتات أقل بكثير. في المقابل، تحافظ الصيغ غير الفاقدة (PNG) على كافة بيانات البكسلات، وتكتفي بضغط التكرارات الرياضية. وفي الصور متناهية الصغر، قد تتجاوز ترويسة الحاوية الثابتة حجم البيانات المستبعدة، مما يؤدي إلى زيادة حجم الملف (+%X).
2. مصفوفة مقارنة الصيغ
سلوك صيغ الإخراج المدعومة وخصائصها التشغيلية في ضاغط الصور من GoToolstack:
| الصيغة | نوع الضغط | شفافية ألفا (Alpha) | تأثير شريط الجودة | حالات الاستخدام الموصى بها |
|---|---|---|---|---|
| WebP (.webp) | فاقد للجودة (VP8) وغير فاقد (VP8L) | مدعومة (حفظ كامل لقناة ألفا) | يتحكم مباشرة في حجم الملف ومستوى التكميم بالنمط الفاقد | المواقع الحديثة، واجهات المدونات، المتاجر الإلكترونية |
| JPEG (.jpg) | فاقد للجودة (تحويل جيب التمام المتقطع / DCT) | غير مدعومة (تُملأ المساحات الشفافة بالأبيض) | يحدد مستوى التكميم والدقة البصرية بين 0.10 و 1.00 | الصور الفوتوغرافية، المشاهد الطبيعية متصلة النغمات |
| PNG (.png) | غير فاقد للجودة (DEFLATE / LZ77) | مدعومة (شفافية 8 بت و 24 بت) | تتجاهله واجهة Canvas API (تصدير غير فاقد دائماً) | الشعارات، لقطات شاشة الواجهات، الرسوم البيانية |
| AVIF (.avif) | فاقد للجودة وغير فاقد (AV1) | مدعومة (تحفظ قناة ألفا) | يتحكم في معامل التكميم في المتصفحات الداعمة | المتصفحات الحديثة ذات الدعم الأصيل لصيغة AVIF |
3. أربعة فروق تقنية جوهرية
1. الصور الفوتوغرافية مقابل المحتوى الغني بالنصوص
يقوم معيار JPEG (المعيار ITU-T T.81) بتقسيم الرسوم إلى كتل بحجم 8×8 بكسل وتطبيق تحويل جيب التمام المتقطع (DCT). في الصور الفوتوغرافية الطبيعية ذات التدرجات الناعمة، تظل حدود الكتل غير ملحوظة للعين. لكن عند معالجة الحواف الحادة مثل الخطوط الطباعية الدقيقة والباركود وحدود واجهات المستخدم، يتسبب حذف المعاملات عالية التردد في ظهور تشوهات هالية (ringing artifacts) وضبابية موضعية. يتطلب المحتوى الغني بالنصوص استخدام PNG أو WebP غير الفاقد.
2. شفافية ألفا وفخ صيغة JPEG
لا تحتوي حاوية JPEG على أي مفهوم لقناة الشفافية (alpha channel). عندما يتم تحويل ملف PNG شفاف إلى JPEG، تملأ بيئة HTML5 Canvas 2D تلقائياً كافة المساحات الشفافة باللون الأبيض المصمت (#ffffff). للحفاظ على خلفية شفافة، يلزم اختيار WebP أو PNG.
3. تغيير الأبعاد (إعادة التحجيم) مقابل خفض معامل الجودة
يؤدي تغيير الأبعاد إلى تعديل شبكة البكسلات الفعلية (مثل تصغير 4000×3000 بكسل إلى 1200×900 بكسل). ينتج عن تقليص شبكة البكسلات التخفيض الأكبر في حجم البايتات. أما خفض الجودة، فيحافظ على أبعاد البكسل ثابتة ويكتفي بتوسيع مصفوفة التكميم لتقليل دقة الألوان المحفوظة. يحتفظ ضاغط الصور من GoToolstack بالأبعاد الأصلية ويعيد ترميز البيانات بالصيغة ومعامل الجودة المحددين.
4. كفاءة الضغط بحسب الصيغة (بيانات أبحاث Google WebP)
وفقاً للدراسات المعيارية الموثقة المنشورة من قبل Google Developers:
- صيغة WebP غير الفاقدة: تنتج ملفات أصغر بنسبة 26% مقارنة بملفات PNG المكافئة بفضل التحويلات المكانية المتقدمة والترميز الإنتروبي (المصدر: Google Developers, Comparative Study of WebP, JPEG and PNG).
- صيغة WebP الفاقدة: تتطلب بايتات أقل بنسبة 25% إلى 34% مقارنة بملفات JPEG القياسية عند نفس مؤشر التشابه الهيكلي (SSIM). يحلل التنبؤ الداخلي VP8 في WebP الكتل الكبرى المجاورة لتوقع انسياب الألوان الاتجاهي واستبعاد البيانات المتكررة.
4. قياسات المتصفح التجريبية عبر HTML5 Canvas
لإثبات الأرقام المعلنة، تم اختبار عينات الاختبار التجريبية في مستودع المشروع على محرك Chromium 154 (Chrome Headless) باستخدام واجهة برمجة HTML5 Canvas 2D toBlob() القياسية. أُجريت الاختبارات حصرياً على رسومات تجريبية دون أي ملفات خارجية أو بيانات مستخدمين.
المنهجية وقابلية التكرار: تم استخراج القياسات الموضحة أدناه عبر تحميل الملفين tests/fixtures/image-800x600-opaque.png و tests/fixtures/image-800x600-transparent.png مباشرة في الأداة. تعكس أرقام البايتات أنماطاً هندسية وطباعية خاضعة للمراقبة الدقيقة. تتميز الصور الواقعية بملفات إنتروبيا مكانية مختلفة وتظهر نسب ضغط متفاوتة؛ لذا تمثل هذه القيم معايير قياسية قابلة لإعادة الإنتاج بدقة وليست ضماناً أداء مطلقاً لجميع الملفات.
السيناريو (أ): رسم تجريبي مصمت (800×600 بكسل PNG، الحجم الأصلي: 297,270 بايت / 290.3 كيلوبايت)
| الصيغة المستهدفة | إعداد الجودة | الحجم الناتج | نسبة التغير المقاسة | التقييم البصري |
|---|---|---|---|---|
| WebP | 80% (موصى به) | 8,300 بايت (8.1 كيلوبايت) | انخفاض بنسبة -97.2% | حواف واضحة، لا تراجع ملحوظ في الألوان |
| WebP | 60% | 6,716 بايت (6.6 كيلوبايت) | انخفاض بنسبة -97.7% | تليين طفيف في مناطق التباين العالي |
| JPEG | 80% | 13,871 بايت (13.5 كيلوبايت) | انخفاض بنسبة -95.3% | تدرجات طبيعية، شبكة كتل طفيفة جداً |
| JPEG | 60% | 10,863 بايت (10.6 كيلوبايت) | انخفاض بنسبة -96.3% | ضبابية طفيفة على الخطوط الدقيقة |
| PNG (إعادة ترميز) | 100% غير فاقد | 297,270 بايت (290.3 كيلوبايت) | تغيير بنسبة 0.0% | تطابق رياضي تام بكسل ببكسل |
السيناريو (ب): رسم تجريبي شفاف (800×600 بكسل PNG، الحجم الأصلي: 28,766 بايت / 28.1 كيلوبايت)
| الصيغة المستهدفة | إعداد الجودة | الحجم الناتج | نسبة التغير المقاسة | الشفافية والدقة البصرية |
|---|---|---|---|---|
| WebP | 80% (موصى به) | 8,474 بايت (8.3 كيلوبايت) | انخفاض بنسبة -70.5% | الحفاظ الكامل على شفافية ألفا دون تشوهات |
| WebP | 60% | 7,664 بايت (7.5 كيلوبايت) | انخفاض بنسبة -73.4% | الحفاظ الكامل على شفافية ألفا، تليين طفيف |
| JPEG | 80% | 14,343 بايت (14.0 كيلوبايت) | انخفاض بنسبة -50.1% | فقدان الشفافية: ملء الخلفية باللون الأبيض (#ffffff) |
| PNG (إعادة ترميز) | 100% غير فاقد | 28,716 بايت (28.0 كيلوبايت) | انخفاض بنسبة -0.2% | بقاء شفافية ألفا ودقة الألوان سليمة تماماً |
5. لماذا يزداد حجم الملف أحياناً؟ (تفسير تنبيه +%X)
عند محاولة ضغط أيقونة صغيرة للغاية مسبقاً (أقل من 1–2 كيلوبايت) أو صورة ذات نطاق لوني محدود، قد تأتي النتيجة أحياناً بحجم أكبر (+10% إلى +40%) من الملف الأصلي. وتعود الأسباب التقنية وراء ذلك إلى:
- تتطلب مواصفات ملفات JPEG وWebP ترويسات حاوية إلزامية، وجداول تردد هوفمان، ومخططات ألوان، ومصفوفات تكميم ثابتة.
- إذا كانت الصورة المدخلة تحتوي على حمولة بيانات خام ضئيلة، فإن هذه الأعباء الإضافية الثابتة تتجاوز عدد البايتات المحذوفة بعملية الضغط.
- يكتشف ضاغط الصور في GoToolstack هذا السيناريو تلقائياً، ويعرض تنبيهاً باللون الأحمر بصيغة
+%X، ويتحول افتراضياً إلى إجراءتحميل الملف الأصليلضمان كفاءة التخزين.
6. قدرات الأداة، بنية المعالجة، والحدود التقنية للمتصفح
يعمل ضاغط الصور من GoToolstack بالكامل من جانب العميل على جهازك؛ حيث لا تُرسل صورك إلى أي خوادم خارجية على الإطلاق، وتتم عمليات الترميز محلياً عبر معالج جهازك.
حدود دقة واجهة Canvas: تتم معالجة الصور عبر محرك HTML5 Canvas 2D. على متصفحات الهواتف المحمولة (خاصة iOS Safari)، يؤدي التعامل مع لوحات Canvas التي تتجاوز 16.7 ميجابكسل (حوالي 4096×4096 بكسل) إلى استنفاد سعة ذاكرة GPU. قد تتطلب الصور فائقة الدقة تصغير أبعادها أولاً قبل بدء الترميز.
- الميزات المدعومة: رفع ملف فردي، واختيار صيغة الإخراج بين JPEG وWebP وPNG وAVIF، وشريط تحكم في الجودة من 0.10 إلى 1.00، وحساب فوري لمقدار التوفير في الحجم، وزران منفصلان لتحميل الملف الأصلي أو المضغوط.
- الوظائف غير المدعومة: لا توفر الأداة أرشفة مجمعة بصيغة ZIP، أو أشرطة تمرير للمقارنة المقسومة، أو ترميز JPEG التدريجي (progressive)، أو تحويل الصور إلى رسوم متجهة (SVG).
- بيانات EXIF الوصفية: يؤدي التصدير عبر محرك Canvas إلى تجريد البيانات الوصفية للكاميرا (إحداثيات GPS، طراز الكاميرا، إعدادات الغالق) تلقائياً، مما يحمي خصوصية المستخدم ويوفر مساحة إضافية.
- عمق الألوان: تعمل واجهة Canvas القياسية بنطاق 8 بت sRGB لكل قناة؛ ويتم تقييد ملفات HDR RAW ذات نطاق 10 بت أو 12 بت إلى معيار 8 بت الشائع.
7. المراجع والمعايير المعتمدة
- Google Developers (2025/2026): Comparative Study of WebP, JPEG and PNG و WebP Compression Techniques. وثائق معمارية حول التنبؤ الداخلي في VP8 وتقنيات WebP غير الفاقدة.
- توصية ITU-T T.81 / ISO/IEC 10918-1: Information Technology – Digital Compression and Coding of Continuous-tone Still Images (معيار تحويل DCT لصيغة JPEG وحدود قنوات ألفا).
- توصية رابطة الشبكة العالمية W3C: Portable Network Graphics (PNG) Specification (Second Edition) / ISO/IEC 15948 (خوارزمية DEFLATE غير الفاقدة وشفافية ألفا).
- المعيار الحي WHATWG: HTML Living Standard – HTMLCanvasElement toBlob() (المواصفات القياسية لتسلسل الصور محلياً داخل المتصفح).
