ضاغط الصور

ضغط الصور وأداء الويب

حجم الصور هو واحد من أكبر عوامل إبطاء مواقع الويب. وفقًا لإحصاءات HTTP Archive، تُشكّل الصور في المتوسط ما بين 50% و60% من حجم صفحة الويب. تقليل حجم الصور تحسين مباشر وقابل للقياس لتجربة المستخدم ومحركات البحث.

الضغط مع فقدان البيانات (Lossy Compression)

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

صيغة JPEG

JPEG هي الصيغة الأساسية لضغط Lossy، مُصمَّمة خصيصًا للصور الفوتوغرافية. تعمل عبر تحويل الصورة إلى مجموعة من الترددات الرياضية (DCT) وحذف الترددات العالية التي تُمثّل التفاصيل الدقيقة.

مستوى الجودة 80-85% يُحقق عادةً توازنًا ممتازًا بين الحجم والجودة المرئية.

صيغة WebP

WebP طوّرتها Google كخلف حديث لـ JPEG وPNG. تُحقق ضغطًا أفضل بنسبة 25-34% مقارنةً بـ JPEG للجودة ذاتها. تدعم WebP كلًا من الضغط بفقدان البيانات (للصور الفوتوغرافية) وبدون فقدانها (للرسومات).

متى تستخدم WebP: في مواقع الويب الحديثة التي تستهدف المتصفحات الحديثة. دعم WebP يصل الآن إلى 97% من المتصفحات.

الضغط بدون فقدان البيانات (Lossless Compression)

في ضغط Lossless، تُحفظ جميع بيانات الصورة الأصلية بالكامل. الخوارزمية تجد أنماطًا متكررة وتُشفّرها بكفاءة أعلى دون أي حذف.

صيغة PNG

PNG تستخدم خوارزمية Deflate (مشتقة من ZIP) لضغط بيانات الصورة. مثالية لـ:

• الشعارات والأيقونات ذات حواف حادة
• لقطات الشاشة التي تحتوي على نصوص
• الصور ذات مناطق لونية موحدة
• أي صورة تحتاج إلى شفافية دقيقة

الحجم أكبر من JPEG للصور الفوتوغرافية، لكن بجودة مثالية للرسومات.

تأثير الصور على مؤشرات الأداء الأساسية

محرك البحث Google يقيس أداء الصفحة عبر مؤشرات Core Web Vitals:

• LCP (Largest Contentful Paint): وقت ظهور أكبر عنصر مرئي. الصور الكبيرة ترفع هذا الرقم مباشرة.
• CLS (Cumulative Layout Shift): تحريك العناصر بعد التحميل. تحديد أبعاد الصور في HTML يمنع هذه المشكلة.
• FID/INP: الصور الثقيلة تُثقل الـ JavaScript thread وتُبطئ التفاعل.

ضغط الصور يُحسّن LCP بشكل مباشر، مما يؤثر إيجابًا على ترتيبك في نتائج البحث.

استراتيجيات إضافية لتحسين أداء الصور

الصور المتجاوبة (Responsive Images)

استخدام srcset يُخبر المتصفح بتحميل الحجم المناسب لكل جهاز:

<img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     src="image-800.jpg" alt="...">

التحميل الكسول (Lazy Loading)

الصور التي ليست في نطاق الرؤية المباشر لا تحتاج إلى تحميل فوري:

<img src="image.jpg" loading="lazy" alt="...">

أبعاد الصورة المناسبة

لا تُرفع صورة بعرض 4000 بكسل وأنت تعرضها بعرض 400 بكسل. اجعل أبعاد الصورة مناسبة لحجم عرضها الأقصى مع مضاعفة واحدة للشاشات عالية الكثافة (Retina).