كيف يعمل ضغط الصور: شرح JPEG وPNG وWebP

Last updated: June 27, 2026

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

إجابة سريعة: كيف يعمل ضغط الصور؟

يقوم كل تنسيق لصور الويب بمهمتين: التنبؤ بقيم البكسل حتى تنهار البيانات المتكررة، ثم تشفير أخطاء التنبؤ بكفاءة. تقوم التنسيقات الخاسرة (Lossy) (مثل JPEG و WebP lossy و AVIF) أيضًا بـ الكمّية (quantize) — أي تقريب التفاصيل عالية التردد التي بالكاد يدركها البشر. أما التنسيقات غير الخاسرة (Lossless) (مثل PNG و WebP lossless)، فتتجاوز عملية الكمّية وتحافظ على كل بكسل.

القرار العملي:

اقرأ مقارنة AVIF مقابل WebP مقابل JPEG لاتخاذ قرار التنسيق؛ تركز هذه المقالة على ما يحدث داخل كل مُشفِّر (encoder).

ما الفرق بين الخسارة وغير الخسارة؟

يُعيد ضغط Lossless بناء البكسل الأصلي بكسلًا تلو الآخر. يعمل عن طريق العثور على التكرار: سلاسل من الألوان المتطابقة، أو الأنماط المكررة، أو التدرجات القابلة للتنبؤ. يستخدم PNG و GIF و WebP-lossless هذا النهج. الحد الأقصى هو إنتروبيا الصورة — فالضوضاء العشوائية بالكاد يتم ضغطها على الإطلاق.

يُتخلص ضغط Lossy من المعلومات بشكل دائم. تكمن الحيلة في التخلص من المعلومات التي يلاحظها نظامك البصري بأقل قدر: النسيج الدقيق عالي التردد والفروق اللونية الخفيفة. يقوم JPEG و WebP-lossy و AVIF بذلك. والمقابل هو ملفات أصغر بكثير — غالبًا ما تكون أصغر بمقدار 5–10× من غير الخاسر للصور الفوتوغرافية.

تستخدم التنسيقات تقنيات محددة:

كيف يعمل ضغط JPEG بالفعل؟

JPEG هو خط أنابيب خاسر نموذجي. تمر خمس مراحل بترتيب:

السبب وراء أن JPEG يضبب النص والحواف الحادة: تحمل معاملات التردد العالي الحواف، وتقوم عملية الكمّية بتصفيرها. إذا خفضت الجودة بما يكفي سترى تشوهات الكتل 8×8.

يمكنك رؤية عمل الكمّية على قصعة مفردة التفاصيل الريشية. نفس المنطقة البالغة 500×280، المشفرة عند ثلاثة مستويات جودة، تظهر بالضبط ما يضحي به شريط تمرير الجودة:

عند q95، تبقى ريشات الريش واضحة. وبحلول q75، تبدأ الخيوط الدقيقة في التداخل معًا. وعند q50، تكون الكتل 8×8 مرئية بوضوح ويتلطخ النسيج — يصبح الملف أصغر، لكن الفاقد هو الآن شيء يلاحظه المشاهد.

كيف يعمل ضغط PNG؟

PNG غير خاسر ويعمل بشكل مختلف تمامًا. مرحلتان:

1. تصفية الصفوف (Row filtering). قبل الضغط، يتم تصفية كل خط مسح لجعله أكثر قابلية للتنبؤ. يحدد PNG خمسة فلاتر (None, Sub, Up, Average, Paeth)؛ ويختار المُشفِّر الأفضل لكل صف.

2. ضغط DEFLATE. تمر البايتات المصفاة عبر LZ77 (العثور على التسلسلات المكررة، واستبدالها بمراجع خلفية) بالإضافة إلى ترميز Huffman (رموز قصيرة للقيم الشائعة) — وهو نفس الخوارزمية التي يستخدمها ZIP.

نصائح تحسين PNG التي تساعد بالفعل:

• استخدم PNG-8 (فهرسي، ≤256 ألوان) للرسومات المسطحة — أصغر بكثير من PNG-24.
• إزالة الكتل غير الضرورية: EXIF، ملفات تعريف ICC غير المستخدمة، قناة ألفا إذا كانت الصورة معتمة.
• إعادة الضغط باستخدام optipng أو pngquant (الأخيرة تحول إلى 8 بت مع التلطيخ لتوفير كبير في الصور الفوتوغرافية التي يجب أن تظل PNG).

لماذا WebP أصغر من كليهما؟

يمتلك WebP وضعين مستقلين:

• WebP lossy يستعير من برنامج ترميز الفيديو VP8. يستخدم التنبؤ بالكتل عبر الإطار بأكمله (وليس فقط داخل كتل 8×8 مثل JPEG)، وتحويلات 4×4 و 8×8، وترميز إنتروبي حسابي أفضل. والنتيجة هي أنها أصغر بنحو 25–34% من JPEG عند مطابقة الجودة.
• WebP lossless يستخدم ما يصل إلى 13 وضع تنبؤ، وتحويل مساحة اللون لإزالة الارتباط بين القنوات، ومتغير LZ77. وعادةً ما يكون أصغر بنحو 20–26% من PNG لنفس المحتوى.

يتجاوز AVIF ذلك باستخدام أدوات الإطار الداخلي لبرنامج ترميز الفيديو AV1، متفوقًا على WebP lossy بمقدار 20–30% آخر. التكلفة هي سرعة الترميز — فـ AVIF بطيء الإنتاج. راجع دليل بدائل TinyPNG للحصول على أدوات تقوم بتصدير WebP و AVIF.

كيف تقيس جودة الضغط؟

يهيمن مقياسان. وكلاهما ليس مثاليًا؛ استخدم كليهما.

من السهل حساب PSNR ولكنه يتجاهل ما يلاحظه البشر؛ بينما يرتبط SSIM بشكل أفضل بالإدراك ولكنه لا يزال يقلل من تقدير التشوهات المشتتة (الرنين بالقرب من النص). للقرارات العملية للمنتجات، انظر إلى النتيجة بالعين عند حجم العرض المقصود بدلاً من الثقة في رقم واحد.

تنشر دراسة جودة JPEG من Mozilla ودراسة ضغط WebP من Google المنهجية والصور النموذجية إذا كنت ترغب في تكرار المقارنات.

ما إعدادات الجودة التي يجب أن تستخدمها؟

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

قاعدتان أهم من الرقم:

• قارن بجودة بصرية مطابقة، وليس بأرقام جودة مطابقة. تبدو AVIF q60 و WebP q75 و JPEG q85 متشابهة تقريبًا. مقارنة الثلاثة عند "q80" لا معنى لها.
• قم بتغيير الحجم قبل الضغط. صورة أصلية للكاميرا بحجم 4000px مضغوطة إلى JPEG q80 هي لا تزال تنزيل بحجم 4000px. قم بتقليل حجمها أولاً لتناسب حجم العرض — هذا يوفر بايتات أكثر من أي تعديل على الجودة.

يُظهر منحنى الحجم مقابل الجودة لماذا أن النطاق 75–85 هو التوصية المعتادة. في نفس قصعة التفاصيل الريشية، ينخفض حجم الملف بشدة أولاً، ثم يتسطح — ويتسارع الانخفاض المرئي للجودة تحت q75. دفع الأمر إلى ما بعد تلك النقطة يوفر بايتات قليلة ولكنه يكلف تفاصيل حقيقية:

كيف تضغط الصور جيدًا عمليًا؟

1. ابدأ من المصدر الأصلي الصحيح. التقط RAW أو JPEG عالي الجودة؛ فالضغط يتراكم، لذا تجنب إعادة تشفير ملف هو بالفعل خاسر.
2. غيّر الحجم أولاً. طابق الصندوق الموجود في الصفحة باستخدام Image Resizer قبل أي خطوة أخرى.
3. اختر التنسيق حسب المحتوى. صورة فوتوغرافية → WebP/AVIF lossy؛ نص/واجهة مستخدم → PNG أو WebP lossless.
4. قم بالتشفير بجودة معقولة. ابدأ بـ 75–80 للصور في Image Compressor.
5. أزل البيانات الوصفية (metadata) للويب العام (احتفظ بـ EXIF للأرشيفات)؛ يقوم Image Converter بالصيغة + البيانات الوصفية في تمريرة واحدة.
6. افحص عند حجم العرض وقدم احتياطي <picture> حتى يحصل العملاء القدامى على JPEG.

الأخطاء الشائعة

• إعادة ضغط ملفات JPEG المضغوطة بالفعل. يضيف كل تشفير خاسر تشوهات. احتفظ بنسخة أصلية (master).
• تجاهل Chroma subsampling للنص. 4:2:0 جيد للصور ولكنه يضبب النص الملون. استخدم 4:4:4 (أو PNG) للرسومات الثقيلة بالنصوص.
• الثقة برقم جودة واحد عبر التنسيقات. يعني الرقم أشياء مختلفة في JPEG و WebP و AVIF.
• التحسين قبل تغيير الحجم. قم دائمًا بتغيير الحجم أولاً — إنه أكبر توفير للبايتات على الإطلاق.
• تقديم AVIF/WebP بدون احتياطي JPEG. لا تعرض المتصفحات القديمة وعملاء البريد الإلكتروني شيئًا.

أدلة ذات صلة

• AVIF vs WebP vs JPEG: Which Format Should You Use?
• Compress Images Without Losing Quality
• TinyPNG Alternatives Compared
• Image SEO Optimization Checklist
• Complete Image Optimization Checklist

الأسئلة المتداولة

كيف يعمل ضغط الصور؟

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

ما الفرق بين الخسارة وغير الخسارة؟

يحافظ غير الخاسر على كل بكسل بالضبط وينعكس بشكل مثالي (PNG, WebP lossless). يتخلص الخاسر من التفاصيل لتصغير الملف ولا يمكن عكسه (JPEG, WebP lossy). يفوز الخاسر في الحجم للصور الفوتوغرافية؛ ويفوز غير الخاسر في الجودة للرسومات والمواد الأصلية.

أي تنسيق يضغط الصور أفضل؟

AVIF (الأصغر، والمتصفحات الحديثة)، ثم WebP، ثم JPEG. PNG هو الأكبر للصور لأنه غير خاسر. لتوصيل الويب، WebP هو الخيار الافتراضي الآمن؛ و AVIF عندما يمكنك تشفيره ويكون جمهورك يستخدم متصفحات حديثة.

هل يقلل الضغط من الجودة؟

نعم يفعل ذلك، ولكن عند جودة 80–85 يكون الفقد غير مرئي عند حجم المشاهدة. الفخ هو إعادة ضغط ملف خاسر بشكل متكرر (فقدان الأجيال)، مما يؤدي إلى تراكم التشوهات. اضغط مرة واحدة من مصدر أصلي غير خاسر.

حقوق الصور (Image credits)

• الغلاف — Source code on a monitor، صورة بواسطة Leonid Altman على Pexels (محولة إلى WebP).
• سلم جودة JPEG ومنحنى الحجم مقابل الجودة — تم إنشاؤه بواسطة المؤلف من صورة ريش طائر المكاو (Pexels #36720663، صورة بواسطة Kaca Skok) لإظهار مخرجات JPEG المقاسة الفعلية عبر مستويات الجودة.