مكوّن الصورة وتحسين الصور في 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: وذلك لإعادة تحجيم الصورة حتى لو كانت مخزّنة على خوادم بعيدة.

استخدام مكوِّن الصورة في 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 ساكنًا لكي يُحلل أثناء بناء التطبيق. تحدد Next.js تلقائيًا ارتفاع 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>
    </>
  )
}

النطاقات

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

module.exports = {
  images: {
    domains: ['example.com', 'example2.com'],
  },
}

المُحمِّلات

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

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

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

الأولوية

ينبغي أن تضيف الخاصية 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

تحجيم الصورة

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

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

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

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

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

استخدم القيمة fill للخاصية layout: يتيح هذا النمط أن تأخذ الصورة قياسات العنصر الأب. فلو افترضنا وجود تنسيقات CSS تعطي العنصر الأب للصورة مساحة محددة من الصفحة، يمكننا استخدام الخاصية objectFit وإسناد قيم لها مثل contain أو cover أو fill على التوازي مع استخدام الخاصية objectPosition لتحديد كيفية تموضع الصورة في المساحة المتاحة للعنصر الأب.
تسوية الصور Normalization: إن كنت تقدم صورًا تستطيع التحكم بمصدرها، فكّر في ضبط مجرى هذه الصور لكي تصلك بالقياس المناسب.
عدّل استدعاءات الواجهة البرمجية: إن استخدم تطبيقك استدعاءات الواجهة البرمجية لإحضار عناوين للصور (من منظومة إدارة محتوى مثلًا)، قد تكون قادرًا على تعديل الدالة لإعادة الصورة مع أبعادها.

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

تنسيق الصور في Next.js

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

اختر نمط التخطيط المناسب: لمكوّن الصور بعض أنماط التخطيط المختلفة التي تعرّف طريقة تحديد قياسها على الصفحة. فإن لم يجري تنسيق الصفحة كما أردت حاول أن تختبر تخطيطًا آخر.
حاول أن تستهدف الصورة عبر اسم الصنف وليس هيكلية DOM: يمتلك مكوّن الصورة في أغلب التخطيطات شجرة DOM لعنصر الصورة النمطي <img> محاطًا بعنصر <span> واحد. وقد يوجد في بعض التخطيطيات عنصر <span> أخ لإضافة مساحة فارغة، وهذه العناصر مهمة جدًا لكي يتفادى المكوّن مشكلة انزياح التخطيط. إن الطريقة المحبّذة لتنسيق عنصر الصورة الداخلي <img> هو ضبط قيمة الخاصية className في مكوّن الصورة على القيمة CSS Module وستطبق هذه القيمة تلقائيًا على العنصر <img> داخله.

لا يمكن استخدام تنسيق styled-jsx لأنه لا يتعدى مجال المكوّن الحالي.

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

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

الخاصيات التي تُطبق على مكوّن الصورة في Next.js

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

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

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

تهيئة الواجهة البرمجية لمكوّن الصور في Next.js

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

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

المصادر

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