مكون الصورة وتحسين الصور في Next.js

يُعدّ مكون الصورة في Next.js امتدادًا لعنصر الصورة <img> في HTML وقد طُوِّر ليماشي تقنيات ويب الحديثة. يتضمن العنصر العديد من محسنات الأداء المدمجة معه ليساعدك في تحقيق نتيجة جيدة لمؤشرات ويب الحيوية Core Web Vitals التي طوّرتها Google. تمثل هذه النتائج مقياسًا مهمًا لتجربة المستخدم خلال زيارته لموقعك، كما تؤثر على ترتيب نتائج البحث في Google.

إليك بعض محسنات الأداء المدمجة في مكوِّن الصورة:

• أداء محسّن Improved Performance: يقدّم دومًا صورًا بالقياس الملائم لكل جهاز باستخدام التنسيقات الحديثة للصور.
• ثباتية بصرية Visual Stability: يمنع تلقائيًا مشكلة الانزياح التراكمي للتخطيط Cumulative Layout Shift.
• تحميل أسرع للصفحة Faster Page Loads: تُحمّل الصور عندما تدخل نافذة العرض viewport فقط، مع خيار تغشية مساحة الصورة blur-up.
• مرونة في الحجم Asset Flexibility: وذلك لإعادة تحجيم الصورة حتى لو كانت مخزّنة على خوادم بعيدة.

استخدام مكون الصورة Image في Next.js

لإضافة صورة إلى تطبيقك، أدرج المكوِّن next/image:

import Image from 'next/image'

بإمكانك الآن تعريف السمة src لصورتك (سواء عنوان محلي أو بعيد).

الصور المحلية

أدرج ملفات الصور المحلية التي تمتلك أحد الامتدادات التالية jpg. أو png. أو webp.:

import profilePic from '../public/me.png'

لا تدعم Next.js الدوال الديناميكية التالية هنا: ()await import أو ()require، ولا بد أن يكون الإدراج import ساكنًا لكي يُحلل أثناء بناء التطبيق، إذ تحدد تلقائيًا ارتفاع height واتساع width الصورة وفقًا للملف المُدرج. وتستخدم هاتين القيميتن في منع الانزياح التراكمي للتخطيط أثناء تحميل الصورة.

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} يُحدد تلقائيًا
        // height={500} يُحدد تلقائيًا
        // blurDataURL="data:..." يُحدد تلقائيًا
        // placeholder="blur" // سيُحمل خيار التغشية
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

الصور البعيدة

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

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

النطاقات Domains

قد تريد أحيانًا الوصول إلى صورة على خادم بعيد باستخدام الواجهة البرمجية الخاصة بتحسين الصورة والمدمجة مع Next.js. لهذا، أبقِ على الإعدادت الافتراضية للمُحمِّل loader وضع عنوان URL المطلق للصورة كقيمة للخاصية src. ولتحمي تطبيقك من المستخدمين المشبوهين، لا بد من إعداد قائمة بأسماء النطاقات البعيدة التي تنوي الوصول إليها مع المكون next/image. انظر ضبط remoatePatters من توثيق next/image.

المُحمِّلات Loaders

لاحظ كيف استخدمنا عنوان URL نسبي ("me.png/") في المثال السابق، وهذا ممكن نظرًا لمعمارية المُحمّلات loader في Next.js. والمُحمِّل هو دالة تولّد عناوين URL للصور، وتلحق نطاقًا جذريًا بالعنوان الموجود في الخاصية src، ومن ثم يوّلد مجموعة عناوين URL لطلب الصورة بقياسات مختلفة. تُستخدم تلك العناوين في توليد مجموعة الموارد srcset لكي يقدم التطبيق أو الموقع الصورة التي تناسب واجهة عرض الجهاز.

يُستخدم المحمِّل الافتراضي في الواجهة البرمجية المدمجة لتحسين الصورة والتي تحرص على تحسين الصورة أيًا كان موقعها، وتقدمها إلى التطبيق مباشرة من خادم Next.js. وإن أردت أن تحمّل الصورة مباشرة من شبكة إدارة محتوى CDN أو من خادم للصور، يمكنك استخدام أحد المُحمِّلات المدمجة أو أن تكتب شيفرة محمِّل خاص بك باستخدام JavaScript.

يمكن أن تُعرِّف المحمِّلات لتكون خاصة بصورة محددة عبر الخاصية loader أو على مستوى التطبيق ككل عبر الضبط loaderFile.

الأولوية

ينبغي أن تضيف الخاصية priority إلى الصورة التي تُعدُّ أضخم عنصر أثناء رسم الصفحة ضمن نافذة العرض Largest Contentful Paint (تختصر إلى LCP ويُعد زمن تصييرها مؤشرًا من مؤشرات ويب الحيوية) ولأي صورة يُحتمل أن تكون كذلك. يتيح ذلك لخادم Next.js أن يضع أولوية محددة للصورة عند تحميلها (من خلال وسوم ما قبل التحميل أو تلميحات الأولوية) مما يعزز قيمة مؤشر LCP.

إن عنصر LCP هو نمطيًا الصورة الأضخم أو الكتلة النصية المرئية من الصفحة ضمن نافذة العرض. وعندما تنفذ الأمر next dev سترى تحذيرًا من قبل الطرفية إن كان هذا العنصر صورة <Image> لا تمتلك الخاصية priority.

حالما تُعرّف الصورة LCP، بإمكانك إضافة الخاصية كالتالي:

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        priority
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

للحصول على معلومات أكثر عن الأولولية راجع توثيق العنصر next/image.

تحجيم الصورة

يُعد انزياح التخطيط layout shift من أكثر أسباب انخفاض الأداء نتيجة استخدام الصور. إذ تدفع فيها الصورة العناصر الأخرى في الصفحة عند تحميلها مسببةً مشكلةً مزعجةً للمستخدمين تُعرف بالانزياح التراكمي للتخطيط Cumulative Layout Shift أو CLS والتي تؤثر على المؤشرات الحيوية لويب. وللتخلص من هذه المشكلة التي تسببها الصور، لابد من تحجيم الصور دائمًا. يتيح هذا الأمر للمتصفح أن يحجز القدر الكافي من المساحة للصورة قبل تحميلها.

ولأن الصور مصممةٌ لتضمن أداءً جيدًا، لن تتمكن من استخدامها بشكل يعزز المشكلة السابقة، وبالتالي لا بد من تحجيم الصور بإحدى الطرق التالية:

1. تلقائيًا باستخدام الإدراج الساكن static import.
2. صراحةً باستخدام الخاصيتين width و height.
3. ضمنًا باستخدام الخاصية fill التي تسمح للصورة بالتوسّع لتملأ مساحة العنصر الأب.

ماذا لو لم أستطع تحديد قياس الصورة؟

إن كنت تحاول الوصول إلى صور من مصدر دون أن تعرف قياسات هذه الصور فهنالك عدة أمور قد تساعدك:

• استخدم القيمة fill: يتيح هذا النمط أن تأخذ الصورة قياسات العنصر الأب. فاعتمد وجود تنسيقات CSS تعطي العنصر الأب للصورة مساحة محددة من الصفحة مع الخاصية sizes لمطابقة أي نقاط استعلام media query. يمكنك استخدام الخاصية object-fit وإسناد قيم لها مثل contain أو cover أو fill على التوازي مع استخدام الخاصية object-position لتحديد كيفية تموضع الصورة في المساحة المتاحة للعنصر الأب.
• تسوية الصور Normalization: إن كنت تقدم صورًا تستطيع التحكم بمصدرها (الخادم الموجودة عليه مثلًا)، فكّر في ضبط مجرى هذه الصور لكي تصلك بقياس مناسب أو موحد.
• تعديل استدعاءات الواجهة البرمجية: إن استخدم تطبيقك استدعاءات الواجهة البرمجية لإحضار عناوين للصور (من منظومة إدارة محتوى مثلًا)، قد تكون قادرًا على تعديل الدالة لإعادة الصورة مع أبعادها.

إن لم تفلح إحدى الطرق السابقة في تحديد قياس الصورة، فمكوّن الصورة في Next.js مصمم للعمل جيدًا في الصفحة إلى جانب عناصر الصور <img> النمطية كما لو استخدمتها مباشرةً.

تنسيق الصور

لا يختلف تنسيق مكوّن الصورة في Next.js عن تنسيق عنصر الصور <img> في HTML لكن لا بد من تذكر بعض الأشياء المهمة.

استعمل className أو style وليس styled-jsx: يفضل استخدام الخاصية className في أغلب الحالات للتنسيق سواءً عبر CSS Module أو تنسيق عام أو غيره، أو يمكنك استعمال الخاصية style مباشرة ولكن لا يمكنك استعمال صياغة styled-jsx لأنه لا يتعدى مجال المكوّن الحالي إلا إن جرى تحديد التنسيق على أنه عام global.

ملاحظة: عند استخدام fill لا بد وأن يُضبط موقع العنصر الأب كالتالي: position: relative، وهذا ضروري لتصيير عنصر الصورة بشكل صحيح في نمط التخطيط الذي اخترته.

ملاحظة: عند استخدام fill لا بد وأن يُضبط موقع العنصر الأب كالتالي: display: block، هذه القيمة افتراضية للعنصر <div> لكن ينبغي ضبطها لبقية العناصر.

الخاصيات التي يأخذها مكون الصورة

لمعلومات أوسع عن الخاصيات المتاحة للمكوّن next/image، اطلع على مرجع الواجهة البرمجية الخاص بهذا المكوّن.

أمثلة عن التنسيق

راجع معرض الأمثلة الخاص بمكوّن الصور في Next.js.

تهيئة الواجهة البرمجية لمكون الصور

يمكن تهيئة الواجهة البرمجية لتحسين المكوّن next/image من خلال الملف next.config.js، إذ يمكنك تفعيل الاتصال بنطاقات بعيدة وتعريف نقاط عرض breakpoints مخصصة للصور وتغيير سلوك التخزين المؤقت وغيرها الكثير.

اطلع على جميع توجيهات التهيئة لهذا المكوّن من خلال مرجع الواجهة البرمجية الخاص بهذا المكوّن.

أمثلة

• Image Component

المصادر

• الصفحة Image Component and Image optimization من توثيق Next.js الرسمي.