تحسين الصور للويب: أسرع طريقة لتسريع موقعك

عندما أراجع موقعاً بطيئاً أجد السبب في الغالب صورة واحدة بحجم عدة ميغابايتات رُفعت كما التقطتها الكاميرا. هذه أسهل مشكلة في الأداء وأسرع حل لها.

قدّم الحجم المناسب

لا ترفع صورة بعرض 4000 بكسل لتعرضها في مساحة 800. غيّر أبعادها قبل الرفع بما يقارب أكبر حجم تُعرض به.

اختر الصيغة الصحيحة

• JPEG للصور الفوتوغرافية.
• PNG حين تحتاج شفافية أو حدوداً حادة.
• WebP صيغة حديثة تعطي حجماً أصغر بجودة قريبة وتدعمها المتصفحات الحالية.
• SVG للأيقونات والشعارات، فهي متجهة وخفيفة.

اضغط بحكمة

جودة JPEG بين 70 و80 غالباً لا يظهر فيها فرق مع توفير كبير. جرّب وقارن بعينك.

التحميل الكسول

أضف الخاصية loading="lazy" للصور التي أسفل الصفحة، فلا تُحمّل حتى يقترب منها المستخدم:

<img src="photo.jpg" width="800" height="450" alt="وصف الصورة" loading="lazy">

حدّد الأبعاد

اكتب width وheight لتحجز الصفحة المساحة قبل التحميل، فلا يقفز المحتوى (وهذا يحسّن مؤشر ثبات التخطيط).

أخف ملف هو الذي لا يُحمَّل؛ وثانيه ما حُجّم على قدر الحاجة.