- رفع صور DSLR بجودة 100% — ملف 8MB لصورة تُعرض بـ300px عرض
- عدم تحديد أبعاد الصورة — يُسبب CLS وقفزات التخطيط
- عدم استخدام Lazy Loading — تُحمَّل كل صور الصفحة دفعة واحدة
- صور PNG لكل شيء — JPEG أو WebP أصغر بكثير لمعظم الاستخدامات
أيهما أفضل — JPEG أم PNG أم WebP؟
5 خطوات عملية لتحسين صور موقعك
حدّد أبعاد الصورة بدقة قبل الرفع
صورة تُعرض بعرض 800px لا تحتاج أن تُرفع بعرض 4000px. قبل الرفع: غيّر الأبعاد لأقصى عرض تُعرض به. يُوفّر 70-90% من الحجم بدون فقدان جودة مرئية.
حوّل الصور لـWebP تلقائياً
لا تُحوّل يدوياً — استخدم إضافة تحويل تلقائي. كل صورة جديدة تُرفع تُحوَّل لـWebP فوراً. المتصفحات القديمة تحصل على JPEG كـFallback تلقائياً.
فعّل Lazy Loading لكل الصور
Lazy Loading يُحمِّل الصور فقط حين يقترب الزائر منها في الصفحة. الصفحات الطويلة بكثير من الصور تستفيد أكثر. تأثير مباشر على LCP وسرعة التحميل الأولية.
حدّد width وheight لكل صورة
تحديد الأبعاد يمنع CLS (قفز التخطيط) — المتصفح يحجز المساحة قبل تحميل الصورة. تأثير مباشر على Cumulative Layout Shift وترتيب جوجل.
استخدم CDN لتقديم الصور من أقرب نقطة
CDN يُقدّم الصور من خادم قريب من الزائر. حتى لو الصور محسَّنة — تحميلها من أوروبا بدلاً من الرياض يُضيف 200ms+ لكل صورة. CDN مُدمج في CloudHost KSA.
🖼️ استضافة مع CDN لتسريع صورك — CloudHost KSA
صورك تُقدَّم من أقرب نقطة لزوارك + WebP تلقائي + ضغط مُدمج
- حوّل كل الصور لـWebP — إضافة مجانية تفعل ذلك تلقائياً
- أضف loading="lazy" لكل الصور تحت الطية الأولى
- حدّد width وheight لكل صورة — يُصلح CLS
- اضغط الصور القديمة الكبيرة — فحص PageSpeed يُظهرها
- استخدم CDN لتقديم الصور من نقطة قريبة