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

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

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

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

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

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

import Image from 'next/image'

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

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

أدرج ملفات الصور المحلية التي تمتلك أحد الامتدادات التالية 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 لكي يقدم التطبيق أو الموقع الصورة المناسبة لواجهة عرض جهاز الزائر.

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

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

الأولوية

ينبغي أن تضيف الخاصية إلى الصورة التي ستمثل أضخم عنصر أثناء رسم الصفحة ضمن نافذة العرض Largest Contentful Paint (LCP) (يُعد زمن تصييرها مؤشرًا من مؤشرات ويب الحيوية) ولكل صورة محتملة. يتيح ذلك لخادم أن يحدد اولوية خاصة للصورة عند تحميلها (من خلال وسوم ماقبل التحميل أو تلميحات الأولوية) مما يعزز قيمة مؤشر 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 الرسمي