الصور غالبًا بتمثّل أكتر من نص حجم صفحتك. ضغطها أسرع وأرخص تحسين ممكن تعمله لموقعك — وبيحسّن ترتيبك ويقلّل استهلاك مواردك في نفس الوقت.
الخلاصة: صغّر الأبعاد الأول، بعدين اضغط، بعدين حوّل WebP. الترتيب ده بيوصل لأصغر حجم بأقل خسارة في الجودة.
١. صغّر الأبعاد قبل الضغط
الغلطة الأشهر: رفع صورة بأبعاد ٤٠٠٠ بكسل وعرضها في مساحة ٨٠٠ بكسل. المتصفح بينزّل الصورة كاملة وبعدين بيصغّرها — يعني الزائر حمّل ٥ أضعاف اللي محتاجه.
الأبعاد المنطقية:
- صورة غلاف عريضة: ١٩٢٠ بكسل عرض كحد أقصى.
- صورة داخل مقال: ١٢٠٠ بكسل.
- صورة منتج: ١٠٠٠ بكسل.
- صورة مصغّرة: ٤٠٠ بكسل.
٢. اضغط الصورة
الضغط بيشيل بيانات مش ملحوظة للعين. جودة ٧٥ لـ ٨٥٪ بتقلّل الحجم كتير والفرق مش بيتشاف.
استخدم أي أداة ضغط أونلاين مجانية قبل الرفع، أو إضافة ضغط تلقائي على موقعك.
٣. حوّل لـ WebP
صيغة WebP بتدي نفس الجودة بحجم أقل من JPG و PNG بشكل ملحوظ، وكل المتصفحات الحديثة بتدعمها.
على ووردبريس: فيه إضافات بتحوّل الصور تلقائيًا وبتقدّم WebP للمتصفحات اللي بتدعمها وبتسيب الأصلية للباقي. ده الحل الأسهل.
٤. حدد أبعاد الصورة في الكود
خطوة مهمة ومالهاش علاقة بالحجم: لما تحدد الطول والعرض، المتصفح بيحجز المساحة قبل ما الصورة تنزل — فالمحتوى ما بينطش. ده بيحسّن مؤشر CLS مباشرة.
٥. فعّل التحميل الكسول
الصور اللي تحت الشاشة ما تتحمّلش إلا لما الزائر ينزل لها.
خلي التحميل الكسول لكل الصور ما عدا أول صورة في الشاشة. لو خليتها كسولة، مؤشر LCP هيسوء بدل ما يتحسن — وده عكس المطلوب بالظبط.
الصور الموجودة على موقعك بالفعل
لو موقعك شغّال من زمان وفيه مئات الصور، فيه إضافات بتضغط المكتبة كاملة بضغطة.
خد نسخة احتياطية قبل الضغط الجماعي — بعض الأدوات بتستبدل الأصل، ولو الجودة مش عاجباك مش هتقدر ترجع.
اختار الصيغة الصح
- WebP — الافتراضي لكل حاجة.
- JPG — للصور الفوتوغرافية كبديل احتياطي.
- PNG — للشعارات والصور اللي محتاجة خلفية شفافة بس. ما تستخدمهاش للصور العادية — بتطلع أكبر بمرات.
- SVG — للشعارات والأيقونات. بتفضل حادة في أي حجم وحجمها صغير جدًا.
مكسب إضافي: مساحة استضافتك
الضغط مش بيسرّع الموقع بس — بيقلّل المساحة المستخدمة وعدد الملفات. لو قربت على حد المساحة أو الـ Inodes، ضغط الصور بيأجّل الترقية.
قيس الفرق
قبل وبعد الضغط، اعمل قياس لسرعة صفحتك وقارن حجم الصفحة الكلي. المواقع اللي صورها مش مضغوطة بتشوف فرق كبير جدًا في الرقم ده.
الخطوة الجاية
- Core Web Vitals بالمصري: LCP و INP و CLS.
- إمتى تحتاج CDN وإزاي تفعّله صح.
- كيفية زيادة سرعة الموقع الخاص بك.
محتاج مساعدة؟
افتح تذكرة وابعتلنا رابط موقعك، وهنقولك لو الصور هي المشكلة الأساسية ولا فيه حاجة تانية أهم.
