Fri Mar 27 2026 20:00:00 GMT-0400 (北美东部夏令时间)

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

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

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

Last updated: June 28, 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)، وتحويل التنسيق، وتعيين الجودة. إذا قمت بالحساب قبل تغيير الحجم، فمن المحتمل أن يكون الرقم مضللاً.

Original file Final file Calculation Compression ratio Size reduction
4.0 MB camera photo 512 KB WebP 4096 / 512 8:1 87.5% smaller
2.4 MB JPEG 300 KB WebP 2400 / 300 8:1 87.5% smaller
900 KB screenshot PNG 420 KB lossless WebP 900 / 420 2.1:1 53.3% smaller
160 KB logo PNG 118 KB WebP 160 / 118 1.4:1 26.3% smaller

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

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

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

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

Bar chart showing a 1600 pixel photo exported to WebP at q90, q80, q70, and q55 with shrinking file sizes

Image type Safer format Starting setting Typical ratio Watch for
Product photo WebP or AVIF WebP q80, AVIF q55-65 6:1 to 12:1 Texture loss, haloing around edges
Blog hero photo WebP or AVIF WebP q75-80 5:1 to 10:1 Banding in skies or gradients
Small thumbnail WebP q70-75 8:1 to 15:1 Over-sharpened faces, noisy backgrounds
UI screenshot PNG or WebP lossless Lossless first 1.5:1 to 4:1 Blurred text, color fringing
Logo or icon SVG, PNG, or WebP lossless Lossless 1:1 to 3:1 Soft edges, wrong transparency

تلاحظ إرشادات 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 جميعها أن تكون مخرجات معقولة من نفس المصدر. هذه الأرقام هي عناصر تحكم في برنامج الترميز، وليست درجات جودة عالمية.

Table-style graphic comparing JPEG q82, WebP q78, and AVIF q55 final sizes and ratios from a 2.4 MB source

Comparison mistake Better method Reason
Export JPEG, WebP, and AVIF all at q80 Tune each format until they look equally good Quality scales are not equivalent
Judge at 400% zoom only Judge at display size, then spot-check crops Users see the rendered image first
Compress before resizing Resize first, then encode Pixel count usually saves more bytes than quality tweaks
Keep every EXIF field Strip metadata for public web copies Camera data can add bytes without helping the page
Use one setting for every image Set defaults by content type Photos, screenshots, and logos fail differently

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

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

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

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

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

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

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

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

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

Checklist graphic listing before-compression and after-compression checks for publishing smaller images

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

  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 للصور المفهرسة ما لم يكن الأصل خاطئًا.

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

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

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

Check Pass condition Fix if it fails
Ratio calculated after resizing Original bytes and final bytes use the real publish dimensions Resize first and recalculate
Format matches content Photos use lossy WebP/AVIF; text graphics stay lossless Re-export with the right codec
Visual review completed No obvious blocking, ringing, blur, or banding at display size Raise quality or use lossless
CDN URL works Final image returns HTTP 200 and correct content type Re-publish or fix the path
LCP image handled Hero image is discoverable early and not lazy-loaded Add dimensions and priority handling

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

استخدم الأدوات المجانية أثناء متابعة الدليل.

ضغط صورةإزالة خلفية

تابع القراءة

صورة غلاف PNG to WebP: دليل تحويل وضغط صور PNG

Tue Mar 17 2026 20:00:00 GMT-0400 (北美东部夏令时间)

PNG to WebP: دليل تحويل وضغط صور PNG

حوّل PNG إلى WebP للحصول على ملفات ويب أصغر وأكثر كفاءة. نستعرض متى يتفوق WebP غير المفقود ومتى يكون التشويه مقبولاً، بالإضافة إلى الأحجام الفعلية وأوامر cwebp و Pillow مع دعم احتياطي لـ PNG.