كيف تغيّر حجم صورك بشكل صحيح

غيّر الحجم إلى حجم العرض

القاعدة: لا تقدّم أكبر من المعروض أبدًا. صورة بـ 4000 بكسل في مساحة 600 تهدر أكثر من 80% من البايتات.

غيّر الحجم واقصص مع مُغيّر الحجم والقاصّ المجانيين.

الأبعاد والريتينا

شاشات حديثة بكثافة 2× (وأحيانًا 3×):

• 1× — حجم العرض CSS.
• 2× — الضعف، لوضوح الريتينا.

عرض 600 بكسل يحتاج ملفًا بـ 1200 بكسل لوضوح ريتينا.

حافظ على نسبة الأبعاد

تشويه الصورة لتناسب مساحة يمدّ الوجوه والشعارات. اقصص إلى النسبة المطلوبة بدل الإجهاد. نسب شائعة: 16:9، 4:3، 1:1، 3:2.

صور متجاوبة بـ srcset

دع المتصفح يختار:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="..."
>

الشاشات الصغيرة تحمّل الملف الصغير، والكبيرة تحصل على الواضح.

تغيير الحجم دون فقدان

1. ابدأ من أكبر أصل.
2. قلّل، ولا تكبّر أبدًا.
3. استخدم تصغيرًا جيدًا.
4. غيّر الحجم قبل الضغط النهائي.
5. تجنّب دورات الحفظ/التغيير المتكررة.

القص أو تغيير الحجم

• تغيير الحجم يغيّر الأبعاد مع الاحتفاظ بكل شيء.
• القص يغيّر الأبعاد بإزالة محتوى — غالبًا أفضل للصور المصغّرة المتناسقة.

أخطاء شائعة

1. تقديم الأصول بالدقة الكاملة.
2. تكبير صور صغيرة (ضبابية).
3. تشويه نسبة الأبعاد.
4. نسيان الريتينا.
5. إعادة تصدير JPEG نفسه مرارًا.

افعلها في متصفحك

مُغيّر الحجم يدير الأبعاد وتصدير الريتينا، والضاغط يُنهي العمل — محليًا، ولا شيء يُرفع.