كيف تجعل صور موقعك تُحمَّل أسرع (دون ضبابية)

لماذا يهم وزن الصور

أبطأ شيء في الصفحة هو عادةً أكبر صورة فيها، وكثيرًا ما تكون هي ما يقيسه المتصفح باسم Largest Contentful Paint (LCP). تعدّ Core Web Vitals من جوجل قيمة LCP الأقل من 2.5 ثانية جيدة. قد تستهلك صورة رئيسية واحدة بحجم 3 MB على اتصال جوال هذه الميزانية كلها بمفردها.

1. قدّم الصور بالحجم الذي تُعرض به

لا فائدة من إرسال صورة بعرض 4000 بكسل إلى مكان يعرضها بعرض 800 بكسل. وكقاعدة عملية، يجب ألا يزيد عرض الصورة عن نحو ضعف عرض عرضها، وهذا يبقيها حادة على الشاشات عالية الكثافة. عروض نموذجية: 1600–2000 px لصورة رئيسية بعرض كامل، و800–1200 px لصور المقالات، و300–400 px للصور المصغّرة.

2. استخدم صيغة حديثة

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

3. اضغط إلى وزن معقول

هذه أهداف تقريبية لا قواعد: صورة رئيسية أقل من نحو 200 KB، وصور داخل المقالات أقل من نحو 100 KB، وصور مصغّرة أقل من نحو 30 KB. حدّد الهدف ودع الأداة تجد أعلى جودة تحققه، بدلًا من العبث بمنزلق على غير هدى.

4. حمّل الصور الواقعة أسفل الشاشة الأولى تحميلًا مؤجلًا

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

يؤجل التحميل الكسول (lazy loading) الصور حتى يمرّر الزائر الصفحة قرب موضعها. لا تطبّقه على الصورة الرئيسية أعلى الصفحة — فهذه يجب أن تُحمَّل فورًا لأنها عادةً عنصر LCP.

5. حدّد دائمًا العرض والارتفاع

حين تكون الأبعاد في HTML، يحجز المتصفح المساحة الصحيحة قبل وصول الصورة، فلا تقفز الصفحة أثناء التحميل (يُقاس هذا القفز باسم Cumulative Layout Shift). وسمة alt وصفية تساعد إمكانية الوصول والبحث عن الصور.

6. قدّم عدة أحجام باستخدام srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

يختار المتصفح أصغر ملف يكفي حدّة لشاشة الزائر، فلا يحمّل الهاتف نسخة الحاسوب.

كيف تتحقق من عملك

مرّر الصفحة عبر PageSpeed Insights أو Lighthouse في أدوات مطوّري Chrome. كلاهما يشير إلى الصور الأكبر من اللازم وغير المحسّنة ويقدّر البايتات بالضبط التي ستوفّرها.

تجهيز الملفات

1. حوّل الصورة إلى WebP.
2. اضبط العرض الذي تحتاجه في أداة تغيير الحجم — مع قفل النسبة.
3. حدّد حجمًا أقصى للملف وافحص النتيجة بمنزلق قبل/بعد.
4. صدّر ملفًا واحدًا لكل عرض تريد استخدامه في srcset.

اعمل من الأصل في كل تصدير. إعادة ضغط نسخة مضغوطة أصلًا تفقد جودة أكثر من ضغط المصدر مرة واحدة.

الأسئلة الشائعة