طريقة ضغط الصور للمواقع الإلكترونية (دون الإضرار بالجودة)

تشكّل الصور غالبًا الجزء الأكبر من حجم صفحات الويب. فالصور الضخمة تبطئ التحميل وتستهلك باقات بيانات الزوار، وقد تضر بمؤشرات Core Web Vitals التي تعتمدها Google ضمن أنظمة الترتيب. والحل في الغالب بسيط ولا يحتاج إلى برامج خاصة.

الخطوة 1: غيّر حجم الصور إلى مقاس عرضها

هذه هي الخطوة الأكثر تأثيرًا. فصورة الهاتف الحديث تبلغ غالبًا 4000 × 3000 بكسل، وإذا كان عمود المحتوى في مدونتك بعرض 800 بكسل، فمعظم هذه البكسلات تُنزَّل دون فائدة.

نهج عملي:

• الصور الرئيسية بعرض الشاشة كاملًا: 1600–2000 بكسل عرضًا.
• صور المحتوى: نحو 1200 بكسل عرضًا (يكفي للشاشات عالية الكثافة بعرض عرض 600–800 بكسل).
• الصور المصغرة: 300–600 بكسل.

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

الخطوة 2: اضغط الصور بجودة معقولة

بعد تغيير الحجم، اضغط الصور. ففي صيغتي JPG وWebP تكون جودة 70–85% مطابقة بصريًا للأصل على الشاشة غالبًا، لكنها أصغر بكثير.

باستخدام أداة ضغط الصور يمكنك:

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

### الأحجام المستهدفة

لا توجد قاعدة ثابتة، لكن هذه الأهداف تناسب معظم المواقع:

نوع الصورة	الحجم المستهدف
الصورة الرئيسية / البانر	أقل من ~200 كيلوبايت
صورة المحتوى	أقل من ~100 كيلوبايت
الصورة المصغرة	أقل من ~30 كيلوبايت

الخطوة 3: اختر الصيغة المناسبة

• الصور الفوتوغرافية ← WebP (أو JPG كبديل).
• الرسومات ذات الألوان المسطحة أو النصوص أو الشفافية ← PNG أو WebP دون فقدان، واستخدم SVG للشعارات والأيقونات كلما أمكن.

تكون صيغة WebP عادةً أصغر من JPG بنسبة 25–35% بجودة مماثلة، وتدعم الشفافية. حوّل صورك باستخدام محوّل WebP.

الخطوة 4: حمّل الصور بذكاء

الضغط يصغّر الملفات، وكود HTML الجيد يضمن تحميلها بكفاءة.

• حدد العرض والارتفاع دائمًا بخاصيتي width وheight (أو aspect-ratio في CSS)، فهذا يحجز المساحة ويمنع إزاحة التخطيط (CLS).
• استخدم التحميل المؤجل للصور التي لا تظهر في الشاشة الأولى عبر loading="lazy".
• لا تؤجل تحميل الصورة الرئيسية في أعلى الصفحة، فهي غالبًا عنصر Largest Contentful Paint (LCP) ويجب تحميلها فورًا.
• قدّم أحجامًا متجاوبة عبر srcset لتنزّل الهواتف ملفات أصغر من الحواسيب.
• اكتب نصًا بديلًا وصفيًا لإمكانية الوصول ولبحث الصور.

<img src="/images/team-1200.webp"
     srcset="/images/team-600.webp 600w, /images/team-1200.webp 1200w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1200" height="800"
     alt="فريق الدعم في المكتب"
     loading="lazy">

قائمة تحقق سريعة

1. غيّر الحجم إلى أكبر مقاس تُعرض به الصورة.
2. اضغطها بجودة 70–85%.
3. فضّل WebP للصور الفوتوغرافية.
4. حدد العرض والارتفاع.
5. أجّل تحميل كل الصور عدا الصورة العلوية.
6. أضف نصًا بديلًا ذا معنى.

الخلاصة

لا تحتاج إلى أدوات باهظة لجعل موقع مليء بالصور سريعًا: غيّر الحجم أولًا، ثم اضغط، واختر الصيغ الحديثة، وحمّل الصور بعناية. وتحقق من النتيجة بأداة مثل Google PageSpeed Insights لترى الفرق.