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

تشكل الصور ما بين 50% إلى 60% من إجمالي حجم صفحة الويب المتوسطة. يُعد ضغطها قبل رفعها واحدًا من أكثر التحسينات تأثيرًا التي يمكنك القيام بها لتسريع موقعك — وبالتالي التأثير مباشرة على ترتيبك في محركات البحث وتجربة المستخدم.

لماذا يُعد ضغط الصور مهمًا لتحسين محركات البحث

تقيس مؤشرات Core Web Vitals من Google — وتحديدًا Largest Contentful Paint (LCP) — مدى سرعة تحميل المحتوى الرئيسي لصفحتك. تُعد الصور غير المُحسّنة السبب الأكثر شيوعًا لضعف نتائج LCP. سرعة الصفحة عامل تصنيف مؤكد، وتشير أداة Google PageSpeed Insights صراحةً إلى الصور غير المحسّنة باعتبارها "فرصًا" لتحسين نتيجتك.

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

يتحكم إعداد الجودة في مدى قوة ضغط الصورة:

• 90–100%: شبه خالٍ من الفقدان. لا تزال الملفات كبيرة. استخدمه فقط لملفات بجودة الطباعة.
• 80–85%: النقطة المثلى لمعظم صور الويب. الملفات أصغر بنسبة 50–70% من الأصل دون فرق مرئي على الشاشة.
• 70–75%: ضغط قوي. يعمل بشكل جيد للصور المصغرة والخلفيات الصغيرة. قد تظهر تشوهات طفيفة عند الفحص عن قرب.
• أقل من 60%: فقدان جودة ملحوظ. استخدمه فقط للمعاينات الصغيرة جدًا أو العناصر النائبة.

بالنسبة لمعظم صور المواقع، تُعد جودة 80% أفضل نقطة انطلاق.

الصيغة الصحيحة تُحدث فرقًا أكبر من مستوى الضغط

اختيار الصيغة الصحيحة له تأثير أكبر من ضبط منزلق الجودة:

• الصور الفوتوغرافية: استخدم WebP (أصغر بنسبة 25–35% من JPG بنفس الجودة) أو JPG بجودة 80%.
• الشعارات والأيقونات: استخدم SVG إن أمكن. إذا كانت نقطية، استخدم WebP أو PNG.
• الرسومات ذات الألوان المسطحة: PNG أو WebP بدون فقدان.
• الصور المتحركة: صيغ WebP المتحركة أو صيغ الفيديو (أصغر بكثير من GIF).

خطوة بخطوة: ضغط الصور لموقعك

1. غيّر الحجم أولًا — لا ترفع صورة بعرض 4000 بكسل إذا كان موقعك يعرضها بعرض 800 بكسل فقط. استخدم أداة تغيير حجم الصور لتعديلها إلى حجم العرض الفعلي أولًا.
2. اختر الصيغة الصحيحة — حوّل JPG إلى WebP أو PNG إلى WebP للحصول على أفضل نتائج للويب.
3. اضغط — استخدم أداة ضغط الصور بجودة 75–80%.
4. حدد الأبعاد الصحيحة — استخدم خاصيتي width وheight في وسوم <img> لمنع تحرك التخطيط.
5. استخدم التحميل الكسول — أضف loading="lazy" للصور الموجودة أسفل الشاشة الأولى بحيث لا تُحمّل إلا عند ظهورها.

لمستخدمي WordPress: الضغط التلقائي

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

كم يمكنك أن توفر؟

مثال واقعي: مقال مدونة يحتوي على 5 صور غير محسّنة بحجم 2 ميجابايت لكل منها = 10 ميجابايت إجمالي وزن الصفحة. بعد تغيير الحجم إلى عرض 1200 بكسل والضغط إلى WebP بجودة 80%:

• كل صورة: حوالي 80–120 كيلوبايت
• الإجمالي: حوالي 500 كيلوبايت
• التوفير: أكثر من 95%

هذا هو الفرق بين صفحة تحمّل في 8 ثوانٍ على اتصال جوال مقابل أقل من ثانية واحدة.