ضغط الصور دون فقدان الجودة: سير عمل WebP

التاريخ آخر تحديث: June 28, 2026

تبدأ معظم مشاكل الجودة قبل عملية الضغط. إن تحميل صورة بحجم 4000 px في مساحة محتوى تبلغ 800 px يهدر البايتات بالفعل. كما أن لقطة شاشة للمنتج المحفوظة كملف JPEG منخفض الجودة تكون معدة مسبقًا لتشويش النص. إن ضغط الصور دون فقدان مرئي للجودة يتعلق في الغالب باتباع الخطوات بالترتيب الصحيح.

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

إجابة سريعة: كيف تضغط الصور دون فقدان الجودة؟

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

بالنسبة لمعظم صور الويب، ابدأ بـ WebP حول q80 إلى q85. أما بالنسبة لقطات الشاشة ولوحات المعلومات والشعارات والصور التي تحتوي على نصوص صغيرة، فابدأ باختبار PNG أو WebP غير الفاقد. وبالنسبة لأهداف حجم الملف الصارمة، قلل الجودة تدريجيًا فقط بعد أن يكون تغيير الحجم قد قام بالعمل الأساسي.

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

لماذا يهم تغيير الحجم أكثر من إعدادات الضغط؟

عادةً ما يوفر الأبعاد بالبكسل مساحة أكبر مما يوفره مؤشر الجودة. إذا كانت الصورة تعرض بعرض 900 px، فإن تقديم ملف بحجم 4000 px يجبر المتصفح على تنزيل بكسلات لا يراها القارئ أبدًا. يمكن للضغط تقليل هذا الهدر، لكن تغيير الحجم يزيله من المصدر.

لا يزال يتعين على المتصفح جلب وفك تشفير الملف الذي تقدمه. وتلاحظ إرشادات الأداء للصور في web.dev أن التنسيقات الحديثة مثل WebP و AVIF يمكنها تقليل حجم التنزيل، مما قد يساعد أيضًا في Largest Contentful Paint عندما تكون الصورة مهمة لأول عرض مرئي (viewport). راجع دليل أداء الصور من web.dev.

استخدم ميزانية العرض قبل اختيار إعداد الجودة:

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

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

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

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

استخدم هذه القواعد عندما يكون التنسيق غير واضح:

1. استخدم WebP أو AVIF للصور الفوتوغرافية حيث يهم حجم الملف.
2. استخدم WebP غير الفاقد أو PNG لقطات الشاشة التي تحتوي على نصوص مقروءة.
3. استخدم SVG للشعارات والأيقونات البسيطة عندما يكون لديك عمل فني متجه (vector artwork).
4. احتفظ بالشفافية في WebP أو PNG أو SVG بدلاً من تسطيحها على خلفية عشوائية.
5. تجنب تحويل JPEG رديء إلى WebP وتوقع عودة التفاصيل.
6. احتفظ بالملف الرئيسي الأصلي حتى تتمكن من التصدير مرة أخرى بشكل نظيف.

لمقارنة أعمق للتنسيقات، اقرأ مقارنة AVIF مقابل WebP. وإذا كنت بحاجة إلى ميكانيكا الضغط وراء التحف (artifacts)، فاستخدم كيف يعمل ضغط الصور.

ما إعداد جودة WebP الذي يتجنب الفقد المرئي؟

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

لهذا المقال، قمت بقياس أربعة مخرجات إنفوجرافيك WebP محلية تم إنشاؤها باستخدام ImageMagick. كانت الملفات النهائية تتراوح بين 31 KB و 41 KB لأن الرسومات تستخدم ألوانًا مسطحة وأشكالًا بسيطة. هذه الأرقام ليست وعدًا لصور الكاميرا؛ بل تظهر سبب أهمية نوع المحتوى.

استخدم إعدادات الجودة كمرشحين، وليس كقواعد:

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

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

كيف تتحقق مما إذا تم الحفاظ على الجودة بالفعل؟

يتم الحفاظ على الجودة عندما لا يزال الملف المضغوط يؤدي وظيفة الأصل في حجم العرض النهائي. يبدو هذا واضحًا، ولكنه يمنع خطأين شائعين: قبول ملفات قبيحة لأن عدد البايتات منخفض، ورفض ملفات مفيدة لأنها تختلف تحت التكبير الشديد.

استخدم هذه المراجعة البصرية:

1. افتح الأصل والمرشح جنبًا إلى جنب.
2. طابق الحجم المعروض، وليس حجم الكاميرا.
3. تحقق من حافة الموضوع الأكثر حدة أولاً.
4. افحص النصوص الصغيرة والملصقات وحدود واجهة المستخدم.
5. ابحث عن التدرج اللوني (banding) في السماء والتدرجات اللونية والظلال.
6. قارن البشرة والأقمشة والطعام وملمس المنتج.
7. اختبر الصورة على هاتف إذا كانت مهمة على الأجهزة المحمولة.
8. احتفظ بأصغر مرشح ينجح.

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

توصي وثائق تحسين محركات البحث للصور من Google أيضًا بنص Alt مفيد وسياقي ووسم صور قابل الزحف (crawlable image markup). وهذا يهم بعد الضغط لأن الصورة الصغيرة غير الواضحة أو الموصوفة بشكل سيئ ليست فوزًا لمحركات البحث أو إمكانية الوصول. راجع أفضل ممارسات صور Google.

ما سير العمل الذي يجب استخدامه لمجلد كامل؟

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

استخدم سير العمل التالي للمجلد:

1. افصل الصور الفوتوغرافية ولقطات الشاشة والرسومات الشفافة والشعارات.
2. أزل التكرارات والقصات غير المستخدمة قبل المعالجة.
3. قم بتغيير حجم كل مجموعة لتطابق الحد الأقصى الفعلي للعرض المعروض.
4. صدر مرشحات WebP للصور والرسومات التوضيحية.
5. صدر المرشحات غير الفاقدة لقطات الشاشة التي تحتوي على نصوص.
6. أزل البيانات الوصفية (metadata) من النسخ العامة على الويب ما لم تكن البيانات مطلوبة.
7. قارن عينة من كل مجموعة قبل معالجة المجلد بالكامل.
8. سجل العرض والتنسيق والجودة ونطاق البايتات المختار.
9. انشر إلى عناوين URL مستقرة حتى لا تتعطل الصفحات الحالية.
10. تحقق من أن كل عنوان URL نهائي يعيد HTTP 200.

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

متى يجب قبول ملف أكبر؟

اقبل ملفًا أكبر عندما يحمل الصورة الثقة أو التفاصيل أو قيمة التحويل. لا ينبغي للبائع أن يطمس الملمس على سترة لتوفير 30 KB. ولا ينبغي لفريق SaaS جعل لقطات شاشة التسعير غير مقروءة. ولا ينبغي للناشر ضغط رسم بياني حتى تتشوه تسميات المحاور.

تكون الملفات الأكبر معقولة عندما يتضمن الصورة:

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

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

قائمة التحقق قبل النشر

قبل استبدال الصورة على صفحة حية، قم بإجراء فحص نهائي. هذا يلتقط الأخطاء المملة التي تسبب معظم مشاكل الصور: أبعاد خاطئة، تنسيق خاطئ، عنوان URL مكسور، نص Alt مفقود، وملف بدا جيدًا على سطح المكتب ولكنه سيئ على الجوال.

استخدم هذا الفحص النهائي:

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

الأسئلة الشائعة

هل يمكن ضغط صورة دون فقدان الجودة؟

يحافظ الضغط غير الفاقد (Lossless) على بيانات البكسل، بينما يمكن للضغط الفاقد (Lossy) الحفاظ على الجودة المُتصوَّرة عند حجم العرض النهائي دون أن يكون متطابقاً رياضياً.

هل يجب تغيير الحجم قبل الضغط؟

نعم، قم بتغيير الحجم أولاً عندما يكون المصدر أعرض من أكبر فتحة سيتم عرضها فيها.

هل WebP أصغر دائماً من JPEG؟

ليس بالضرورة، لذا قم بتصدير كليهما من نفس المصدر وقارن البايتات والتفاصيل المرئية بدلاً من افتراض أن تنسيقاً واحداً سيفوز.

ما جودة WebP التي يجب استخدامها؟

تُعد الجودة 75–85 نطاق اختبار مفيد للصور، ولكن قد تحتاج لقطات الشاشة والتدرجات اللونية السلسة إلى إعداد أعلى أو مخرج غير فاقد.

هل يزيل الضغط البيانات الوصفية للصورة (metadata)؟

يزيل بعض المُصدِّرين البيانات الوصفية وتحتفظ بها البعض الآخر، لذا افحص الملف النهائي إذا كان إزالة EXIF مهمًا للحجم أو الخصوصية.

لماذا قد تصبح الصورة المضغوطة أكبر أحياناً؟

قد يصبح المصدر الصغير أو المُحسَّن بالفعل أكبر عندما يُعاد ترميزه بإعدادات غير فعالة أو تنسيق غير متطابق.

كيف يجب أن أقارن بين المرشحات المضغوطة؟

اعرض المرشحات بجوار الأصل بالحجم المعروض النهائي وتحقق من النص والحواف والتدرجات والجلد وتفاصيل المنتج.

هل يمكنني ضغط الصور دفعة واحدة بأمان؟

نعم، قم بتجميع أنواع الصور المماثلة، واختبر عينة واحدة من كل مجموعة، واحتفظ بالأصول حتى يتم التحقق من الدفعة الكاملة.