كيف يعمل تحسين الصور في Next.js_

`next/image` هي واحدة من تلك الميزات التي يسهل اتباعها دون فهم.

يسمع الناس "استخدم `<Image />` بدلاً من `<img>`" ويتوقفون عند هذا الحد. هذا يكفي للحصول على بعض الفوائد، لكنه ليس كافيًا لاتخاذ قرارات أداء جيدة.

من المفيد أن نفهم ما الذي يفعله هذا المكون بالفعل من أجلك.

## الفائدة الأولى هي استقرار التخطيط

صورة `<img>` العادية ليست سيئة بطبيعتها. تبدأ المشكلة عندما لا يعرف المتصفح مقدار المساحة التي يجب حجزها قبل تحميل الصورة.

هذا هو السبب في حدوث تحول في المحتوى للأسفل بمجرد ظهور الصورة في النهاية.

مع `next/image`، يتم دفعك نحو تحديد الحجم بشكل صريح أو نموذج تخطيط قائم على الملء:

```tsx
import Image from "next/image";

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="لقطة شاشة المنتج"
      width={1600}
      height={900}
      priority
    />
  );
}

تلك الأبعاد توفر للمتصفح معلومات كافية لحجز المساحة مبكرًا، مما يساعد على تقليل تحول التخطيط.

الفائدة الثانية هي تفاوض الحجم والصيغة

عندما يتم تمكين تحسين الصورة، يتم توجيه الطلب عبر خط أنابيب تحسين الصورة في Next.js بدلاً من تقديم الأصل كالمعتاد.

يمكن أن يقوم ذلك خط الأنابيب بـ:

• تغيير حجم الصورة إلى عرض أكثر ملاءمة
• ترميزها بصيغة مدعومة من المتصفح الطالب
• تخزين النسخة المحسنة للطلبات اللاحقة

هذا مفيد لأن صورة بمصدر 2000 بكسل غالبًا ما تكون غير ضرورية لواجهة عرض موبايل، والصيغ الحديثة مثل WebP أو AVIF يمكن أن تقلل من حجم النقل بشكل كبير اعتمادًا على محتوى الصورة.

ما يحدث على الخادم

المفهوم الخاطئ الشائع هو أن <Image /> هو مجرد مكون سهل الاستخدام في React.

إنه أيضًا ميزة تحسين على جانب الخادم.

في الإعداد الافتراضي، يقوم Next.js بإنشاء نسخ محسنة عن طريق مسار الصورة الخاص به. يعني ذلك أن هناك عملاً حقيقياً يحدث في مكان ما في نشر التطبيق الخاص بك:

• فك تشفير الصورة الأصلية
• تغيير حجمها
• إعادة ترميزها
• تخزين المخرجات في ذاكرة التخزين المؤقت

إذا كنت على Vercel، فإن الكثير من هذه الأعباء التشغيلية مخفية منك. إذا كنت تقوم بالاستضافة الذاتية، فعليك السيطرة على ميزانية وحدة المعالجة المركزية لديك وسلوك ذاكرة التخزين المؤقت.

هذا التمييز مهم عندما ينمو حجم الحركة المرورية.

المقايضة

تحسين الصور ليس مجانياً.

أنت فعليًا تتاجر بحساب الوقت من أجل أفضل تحميل وتقديم أفضل سلوك عرض.

هذا غالبًا ما يكون مقايضة جيدة، لكنه لا يزال تجارة.

يمكن أن تصبح أحمال الصور الثقيلة باهظة الثمن أو بطيئة عندما:

• يتم طلب العديد من الأحجام الفريدة
• معدل الاستجابة للذاكرة المؤقتة ضعيف
• الصور الأصلية كبيرة جدًا
• نشر الاستضافة الذاتية لديك محدود في وحدة المعالجة المركزية

إذا كانت الصفحة تخدم في الغالب أصولًا ثابتة بأبعاد معروفة، فقد تحصل على نتائج أفضل من خلال معالجة الصور مسبقًا أثناء البناء أو في خط أنابيب الأصول لديك بدلاً من الاعتماد على تغيير الحجم عند الطلب لكل شيء.

أين تسيء الفرق استخدامه عادةً

الأخطاء متوقعة:

• تحميل النسخ الأصلية الكبيرة متوقعًا أن تحسين وقت التشغيل سينقذها
• تجاهل sizes على الصور المتجاوبة
• استخدام fill دون التحكم في حاوية التخطيط
• الافتراض بأن كل صورة يجب أن تكون ذات أولوية عالية

هذا هو نمط استجابة أفضل:

<Image
  src="/dashboard.png"
  alt="لوحة تحكم التحليلات"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  style={{ objectFit: "cover" }}
/>

بدون قيمة sizes الصحيحة، قد يختار المتصفح موردًا أكبر مما يحتاجه التخطيط فعليًا.

قاعدة أفضل للإشارة

استخدم next/image عندما:

• ترغب في معالجة الصور المتجاوبة تلقائيًا
• تهتم بمؤشرات Core Web Vitals
• لا تريد بناء خط أنابيب للصور بنفسك

كن أكثر دقة عندما:

• الصور مُعالجة بالفعل في المنبع
• تقوم بالاستضافة الذاتية مع حساب محدود
• الأصول ليست عائقًا مهمًا للأداء

المكون مفيد لأنه يوفر لك افتراضيات جيدة. إنه ليس مفيدًا إذا منعك من التفكير في كيفية تنقل الصور عبر نظامك.

قراءة إضافية

• Next.js Image Component
• Next.js Image Optimization
• web.dev: تحسين تحول التخطيط التراكمي