دليل نسبة ضغط الصور: الجودة والحجم

Last updated: July 12, 2026

تخبرك نسبة ضغط الصورة بمدى صغر حجمها بعد التصدير. وهي مفيدة، ولكن فقط عندما تقترن بالتحقق البصري. يمكن أن تكون نسبة 12:1 ممتازة لصورة خلفية ناعمة وغير مقبولة لقطة شاشة منتج تحتوي على نص صغير.

يقدم لك هذا الدليل الصيغة، ونطاقات الجودة المعتادة، وقائمة مراجعة للنشر الخاصة بـ WebP و JPEG و PNG و AVIF. استخدمه عندما تحتاج إلى صفحات أصغر دون جعل الصور "مُبهمة" (mushy).

الإجابة السريعة: ما هي نسبة ضغط الصورة الجيدة؟

تعد نسبة الضغط الجيدة هي أقل انخفاض في البايتات التي لا تزال تبدو نظيفة عند حجم العرض النهائي. قم بحسابها كالتالي: حجم الملف الأصلي مقسومًا على حجم الملف المضغوط. صورة بحجم 4 MB مضغوطة إلى 500 KB لديها نسبة 8:1.

بالنسبة لصور الويب، غالبًا ما يكون الهدف العملي هو 5:1 إلى 12:1 بعد تغيير الحجم والتصدير إلى WebP أو AVIF. أما بالنسبة لقطات الشاشة الغنية بالنص، والشعارات، وصور واجهة المستخدم (UI)، فإن النسب الأقل طبيعية لأن الحواف الحادة والألوان المسطحة تحتاج إلى حماية. قد ينتج PNG غير الفاقد للبيانات (lossless) أو WebP غير الفاقد للبيانات نسبة تتراوح بين 1.2:1 و 3:1 فقط.

لا تحكم على الضغط بالاعتماد على النسبة وحدها. افحص الوجوه، وحواف المنتجات، والتدرجات اللونية (gradients)، والنصوص الصغيرة. إذا لاحظ المستخدمون وجود تشويش التكتل (blocking)، أو الهالة (ringing)، أو التلطيخ (smearing)، أو التبقع (banding)، فإن النسبة مفرطة العدوانية حتى لو بدا حجم الملف جذابًا.

كيف تحسب نسبة ضغط الصورة؟

استخدم الحجم الأصلي بالبايتات والحجم النهائي بالبايتات بعد جميع خطوات النشر الفعلية: القص، وتغيير الحجم، وإزالة البيانات الوصفية (metadata stripping)، وتحويل التنسيق، وتعيين الجودة. إذا قمت بالحساب قبل تغيير الحجم، فمن المحتمل أن يكون الرقم مضللاً.

استخدم عدد البايتات الدقيق عندما تقوم بضبط مسار العمل (build pipeline). استخدم KB أو MB المقربة عندما تقوم بتوثيق الإعدادات التحريرية. القرار لا يتغير: الأصغر مفيد فقط طالما أن الصورة ما زالت توصل مهمتها.

يؤكد إرشاد جوجل للصور على كل من السرعة والجودة: غالبًا ما تقود الصور وزن الصفحة، لكن الصور الباهتة أو غير الواضحة سيئة للمستخدمين ومعاينات البحث. كما يوصي بعناصر صور HTML القابلة الزحف (crawlable)، والنص البديل الوصفي (alt text)، والتنسيقات المدعومة مثل JPEG و PNG و WebP و SVG و AVIF في Google Images best practices.

ما هي النسبة التي يجب استخدامها لـ WebP، JPEG، PNG، و AVIF؟

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

تلاحظ إرشادات MDN لتنسيقات الصور أن WebP يمكن أن يكون فاقدًا للبيانات (lossy) أو غير فاقد للبيانات (lossless)، بينما يستخدم WebP المفقود والـ WebP غير المفقود تمثيلات داخلية مختلفة. ولهذا السبب، لا توجد "نسبة WebP" واحدة؛ فالإعداد الصحيح يعتمد على ما إذا كان المحتوى يمكنه تحمل الفقدان أم لا. راجع image file type and format guide الخاص بـ MDN لمعرفة سلوك التنسيق.

بالنسبة لهذه المقالة، قمت بتشفير أربع رسومات بأبعاد 1400 × 788 محليًا باستخدام ImageMagick و WebP. تم نشر الملفات بحجم 23 KB و 28 KB و 35 KB و 40 KB. هذه أحجام صغيرة بشكل غير عادي لأن الأصول هي رسوم بيانية نظيفة، وليست صور كاميرا؛ استخدم الأرقام كدليل على أن الرسوم البيانية المسطحة تضغط بشكل مختلف عن التفاصيل الفوتوغرافية.

لمقارنة المفاضلات العامة للتنسيقات، قارن هذه المقالة بـ AVIF vs WebP Comparison. إذا كنت بحاجة إلى تفاصيل الخوارزميات وراء الآثار (artifacts)، اقرأ How Image Compression Works.

لماذا تتوقف إعدادات الجودة عن التوفير بالكثير بعد نقطة معينة؟

تحتوي معظم برامج الترميز على مكسب مبكر حاد ومقايضة متألمة في وقت لاحق. الانتقال من ملف كاميرا أصلي إلى WebP q80 قد يزيل الكثير من البيانات غير المرئية. أما الانتقال من q70 إلى q55 فقد يوفر بايتات أقل بينما يجعل الآثار أكثر وضوحًا.

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

استخدم هذا الترتيب عند ضبط الجودة:

1. قم بتغيير الحجم إلى أوسع عرض مُعرض فعليًا.
2. صدر WebP واحدًا عند q85، وواحدًا عند q80، وواحدًا عند q75.
3. افتحها بجوار الأصل بالحجم المعروض المقصود.
4. افحص الوجوه، والنص، وحواف المنتجات، والظلال، والتدرجات اللونية السلسة.
5. اختر أصغر نسخة لا تبدو متدهورة.
6. سجل النسبة الناتجة لهذا النوع من المحتوى.

إذا كانت الصورة مرجحة أن تكون عنصر "أكبر محتوى قابل للتنطيط" (LCP)، فإن الضغط هو جزء فقط من الحل. يوصي إرشاد web.dev الخاص بـ LCP بإعطاء الأولوية لصور LCP المحتملة باستخدام fetchpriority="high" والتحقق من اكتشاف الموارد في شلال الشبكة في Optimize Largest Contentful Paint.

كيف يجب أن تقارن نسب الضغط عبر التنسيقات؟

قارن بين التنسيقات عند جودة مرئية متطابقة، وليس أرقام منزلقة متطابقة. يمكن لـ JPEG q82 و WebP q78 و AVIF q55 جميعها أن تكون مخرجات معقولة من نفس المصدر. هذه الأرقام هي عناصر تحكم في برنامج الترميز، وليست درجات جودة عالمية.

هنا غالبًا ما يسيء الفرق قراءة النسب. قد يكون JPEG بنسبة 5.7:1 أسوأ من WebP بنسبة 8:1 إذا بدا كلاهما متطابقًا على الشاشة. وقد يكون WebP غير الفاقد للبيانات بنسبة 2:1 أفضل من WebP المفقود بنسبة 10:1 إذا كان الأصل عبارة عن لقطة شاشة جدول أسعار.

للعمليات الدفعية (batch work)، قم بإنشاء مخرجات متعددة من نفس المصدر الرئيسي واجعل القرار مرئيًا في أسماء الملفات أو سجلات البناء. يغطي Batch Resize Guide سير عمل تغيير الحجم أولاً، ويوفر Complete Image Optimization Checklist عملية تمرير نهائية قبل النشر.

متى تكون نسبة الضغط العالية علامة سيئة؟

تعد النسبة العالية علامة تحذير عندما تحتوي الصورة على تفاصيل يفحصها الناس. يلاحظ أصحاب المتاجر نسيج المنتج. ويلاحظ المصممون النص الناعم. ويلاحظ المشترون حواف المجوهرات المعكرة. في هذه الحالات، يمكن أن تكلف "أصغر ملف" أكثر مما توفره.

تستحق النسب العالية فحصًا إضافيًا عندما تتضمن الصورة:

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

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

ما هو سير العمل الذي يعطي أفضل حجم دون فقد مرئي للجودة؟

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

استخدم تسلسل النشر هذا:

1. احتفظ بملف رئيسي لم يتم إعادة ترميزه بشكل متكرر.
2. قم بالقص لحالة الاستخدام النهائية قبل تغيير الحجم.
3. غيّر الحجم إلى أوسع عرض مُعرض، مع متغيرات استجابة إذا لزم الأمر.
4. اختر التنسيق حسب المحتوى: WebP أو AVIF للصور الفوتوغرافية، وغير فاقد للبيانات (lossless) للرسومات الغنية بالنص.
5. صدر اثنين أو ثلاثة مرشحين للجودة.
6. أزل البيانات الوصفية من النسخ العامة ما لم يكن ذلك مطلوبًا قانونيًا أو تحريريًا.
7. قارن المرشحين عند الحجم المعروض على سطح المكتب والجوال.
8. افحص صورة LCP المحتملة بشكل منفصل عن الصور تحت الطي (below-fold).
9. انشر إلى عنوان URL مستقر لـ CDN وتحقق من HTTP 200.
10. سجل البايتات النهائية، والنسبة، والإعداد حتى يكون الدفعة التالية أسرع.

إذا كنت تستهدف ميزانية حجم صارمة، ابدأ بسير العمل الموجود في Compress Image to 100KB أو Compress Image to 200KB. بالنسبة لصفحات الجوال، قم بإقران قرار النسبة بـ Mobile Image Optimization Guide.

كيف يتكامل كل من نسبة الضغط و SEO؟

تساعد نسبة الضغط تحسين محركات البحث (SEO) بشكل غير مباشر. تقلل الصور الأصغر حجم النقل، مما يمكن أن يحسن أداء التحميل، خاصة عندما تكون الصورة المضغوطة ذات حجم صحيح أيضًا. لكن لا يزال محركو البحث والمستخدمون بحاجة إلى صورة مفيدة، وعنوان URL مستقر، ونص محيط مقروء، ونص بديل وصفي.

لا ترسل صورة صغيرة تبدو مكسورة في معاينات البحث أو بطاقات التواصل الاجتماعي. توصي جوجل صراحة باختيار صورة تمثيلية للبيانات الوصفية وتجنب الصور العامة للبيانات المهيكلة أو og:image عندما تكون هناك صورة أكثر صلة. يجب أن تكون الصورة سريعة وواضحة.

بالنسبة لمنشور مدونة، فهذا يعني عادةً ما يلي:

• استخدم غلاف WebP فريدًا في البيانات الوصفية الأمامية وبيانات Open Graph.
• حافظ على الغلاف مقروءًا عند حجم معاينة وسائل التواصل الاجتماعي.
• ضع الصورة بالقرب من النص الذي يشرح الخلاصة المستخلصة.
• استخدم نص بديل وصفي، وليس حشو الكلمات المفتاحية (keyword stuffing).
• قدم الأصل النهائي من عنوان URL لـ CDN قابل للزحف.
• تجنب استبدال عناوين URL للصور المفهرسة ما لم يكن الأصل خاطئًا.

النسبة هي سطر واحد في سجل النشر. يجب أن يجلس بجوار العرض المعروض، والتنسيق، وإعداد الجودة، وحجم البايتات، والملاحظات البصرية.

قائمة مراجعة نسبة الضغط

قبل النشر، قم بتشغيل هذه المراجعة القصيرة:

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