كيف تضغط صور موقعك دون فقدان الجودة

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

عادةً ما تكون الصور أثقل جزء في صفحة الويب. فقد يبلغ حجم صورة واحدة من كاميرا الهاتف ⁦3–5 MB⁩، أي أكثر مما ينبغي أن تزنه صفحة كاملة جيدة البناء. والخبر الجيد أن معظم هذا الحجم يمكن إزالته دون أن يلاحظ أحد.

1. غيّر الحجم قبل الضغط

إذا كانت صفحتك تعرض صورة بعرض 1200 بكسل، فلا فائدة من تقديم الأصل بعرض 4000 بكسل. صغّرها إلى أكبر حجم تُعرض به، أو ضعفه للشاشات عالية الوضوح. وغالبًا ما يزيل تغيير الحجم وحده 80% أو أكثر من حجم الملف. تنجز أداتنا مغيّر حجم الصور ذلك بنقرات قليلة.

2. اختر الصيغة المناسبة

استخدم WebP أو JPG للصور الفوتوغرافية، وPNG أو WebP للرسومات ذات الشفافية. فحفظ صورة فوتوغرافية بصيغة PNG يجعلها أكبر بكثير من اللازم.

3. خفّض الجودة قليلًا

في الصور الفوتوغرافية، تبدو جودة بين 70% و85% عادةً مطابقة للأصل عند الحجم المعتاد. اخفضها أكثر للصور المصغرة والخلفيات. وقارن النتيجة دائمًا قبل نشرها.

4. تحقق من النتيجة

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

5. دع المتصفح يساعدك

• أضف الخاصيتين width وheight حتى لا تقفز الصفحة أثناء تحميل الصور.
• أضف loading="lazy" إلى الصور الموجودة أسفل الصفحة.
• قدّم عدة أحجام باستخدام srcset لتنزّل الهواتف ملفات أصغر.

معًا، يمكن لهذه الخطوات أن تجعل الصفحات الغنية بالصور تُحمَّل أسرع بعدة مرات، وهو ما يلاحظه الزوار ومحركات البحث.