لماذا استخدم next/image

مُكون الصور (Image Component) في next.js له عدد من المميزات مما يجعل له حلٌ لمشاكل الأداء(performance issues) حيث يقوم ذلك المُكون بتقديم عدد من المزايا مثل

1. صيغة الصور: حيث ﻻ يقوم ذلك المُكون بتقديم الصور بصيغ قديمة مثل الjpeg, png  وإنما يقوم بضغط الصور وتقديمها بصيغ مثل WebP, AVIF مما يجعل حجم الصور أقل بنسبة تُقدر ب20% إلى 30%
2. تحميل الصور: حيث ﻻ يقوم ذلك المُكون بتحميل الصور فور دخول المُستخدم إلى الصفحة وإنما يقوم بتحميل الصور التي فقط يحتاجها المُستخدم ويقوم بعمل scroll إليها
3. خاصية التحميل المُسبق: حيث يمكنك تحديد صورة ما بخاصية التحميل المسبق وتجعلها تحمل للمستخدم مبكراً قبل تحميل باقي الصفحة

بالإضافة لمميزات أخرى يُقدمها هذا المُكون تُسهل من التعامل مع الصُور وتسهل عملية إضافة العديد من الخصائص عبر توفيرها

المكون next/image مبني فوق الوسم img في HTML ويضيف فوقه مزايا تخص تحسين الأداء

• تخديم الصور بصيغة Webp التي تدعم القياسات المتعددة ليختار المتصفح منها اصغر القياس المناسب
• تحسين أحجام الصور تلقائيا (عند الطلب) وبالتالي التوفير في مساحة المستخدمة على الخادم 
• تأخير تحميل الصور في الموقع Lazy Loading مما يجعل تحميل الصفحة أسرع
• تصيير الصور دون التأثير على العناصر المجاورة أو ما يسمى Cumulative Layout Shift، أي يتم حجز مساحة مسبقة للصورة قبل تحميلها لكي تصير هيكلية الموقع كما تم تصميمها ولا تقفز العناصر عند تحميل الصور