تحسين الصور

وفقًا لـ Web Almanac، تشكل الصور جزءًا كبيرًا من وزن الصفحة النموذجية لموقع الويب ويمكن أن يكون لها تأثير كبير على أداء LCP لموقعك.

يمتد مكون الصورة في Next.js عنصر <img> HTML بميزات لتحسين الصور تلقائيًا:

• تحسين الحجم: تقديم صور بحجم مناسب لكل جهاز تلقائيًا، باستخدام صيغ صور حديثة مثل WebP وAVIF.
• الاستقرار المرئي: منع انزياح التخطيط تلقائيًا عند تحميل الصور.
• تحميل أسرع للصفحات: يتم تحميل الصور فقط عند دخولها نطاق الرؤية باستخدام التحميل البطيء (lazy loading) الأصلي للمتصفح، مع وجود عناصر نائبة ضبابية اختيارية.
• مرونة الأصول: تغيير حجم الصور حسب الطلب، حتى للصور المخزنة على خوادم بعيدة.

🎥 شاهد: تعلم المزيد حول كيفية استخدام next/image → يوتيوب (9 دقائق).

الاستخدام

import Image from 'next/image'

ثم يمكنك تحديد src لصورتك (محلية أو بعيدة).

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

لاستخدام صورة محلية، قم باستيراد ملفات الصور الخاصة بك .jpg أو .png أو .webp.

سيقوم Next.js بتحديد تلقائيًا العرض والارتفاع لصورتك بناءً على الملف المستورد. تُستخدم هذه القيم لمنع انزياح التخطيط التراكمي أثناء تحميل صورتك.

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

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="صورة المؤلف"
      // width={500} يتم توفيرها تلقائيًا
      // height={500} يتم توفيرها تلقائيًا
      // blurDataURL="data:..." يتم توفيرها تلقائيًا
      // placeholder="blur" // تأثير ضبابي اختياري أثناء التحميل
    />
  )
}

تحذير: لا يتم دعم await import() الديناميكي أو require(). يجب أن يكون الاستيراد ثابتًا حتى يمكن تحليله في وقت البناء.

يمكنك تكوين localPatterns اختياريًا في ملف next.config.js الخاص بك للسماح بصور محددة وحظر جميع الصور الأخرى.

module.exports = {
  images: {
    localPatterns: [
      {
        pathname: '/assets/images/**',
        search: '',
      },
    ],
  },
}

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

لاستخدام صورة بعيدة، يجب أن تكون خاصية src عبارة عن سلسلة URL.

نظرًا لأن Next.js لا يمكنه الوصول إلى الملفات البعيدة أثناء عملية البناء، ستحتاج إلى توفير خصائص العرض، الارتفاع و blurDataURL الاختيارية يدويًا.

تُستخدم سمات العرض والارتفاع لاستنتاج نسبة العرض إلى الارتفاع الصحيحة للصورة وتجنب انزياح التخطيط عند تحميل الصورة. لا تحدد العرض والارتفاع حجم ملف الصورة المعروض. تعلم المزيد حول تحديد حجم الصورة.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="صورة المؤلف"
      width={500}
      height={500}
    />
  )
}

للسماح بتحسين الصور بشكل آمن، حدد قائمة بأنماط URL المدعومة في next.config.js. كن محددًا قدر الإمكان لمنع الاستخدام الضار. على سبيل المثال، سوف يسمح التكوين التالي فقط بالصور من دلو AWS S3 محدد:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

تعلم المزيد حول تكوين remotePatterns. إذا كنت تريد استخدام عناوين URL نسبية لـ src الصورة، استخدم loader.

النطاقات

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

لحماية تطبيقك من المستخدمين الضارين، يجب عليك تحديد قائمة بأسماء المضيفين البعيدة التي تنوي استخدامها مع مكون next/image.

تعلم المزيد حول تكوين remotePatterns.

المحملات (Loaders)

لاحظ أنه في المثال السابق، تم توفير عنوان URL جزئي ("/me.png") لصورة محلية. هذا ممكن بسبب بنية المحمل (loader).

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

المحمل الافتراضي لتطبيقات Next.js يستخدم واجهة برمجة تطبيقات تحسين الصور المدمجة، والتي تقوم بتحسين الصور من أي مكان على الويب، ثم تقديمها مباشرة من خادم الويب Next.js. إذا كنت ترغب في تقديم صورك مباشرة من شبكة توصيل المحتوى (CDN) أو خادم صور، يمكنك كتابة دالة محمل خاصة بك ببضعة أسطر من JavaScript.

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

الأولوية

يجب عليك إضافة خاصية priority إلى الصورة التي ستكون أكبر عنصر محتوى مرئي (LCP) لكل صفحة. يتيح ذلك لـ Next.js إعطاء أولوية خاصة للصورة للتحميل (على سبيل المثال من خلال علامات التحميل المسبق أو تلميحات الأولوية)، مما يؤدي إلى تحسن ملحوظ في LCP.

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

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

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

export default function Page() {
  return <Image src={profilePic} alt="صورة المؤلف" priority />
}

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

تحديد حجم الصورة

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

نظرًا لأن next/image مصمم لضمان نتائج أداء جيدة، لا يمكن استخدامه بطريقة تساهم في انزياح التخطيط، ويجب تحديد حجمه بإحدى الطرق الثلاث التالية:

1. تلقائيًا، باستخدام استيراد ثابت
2. صراحةً، من خلال تضمين خاصية العرض و الارتفاع
3. ضمنيًا، باستخدام fill مما يتسبب في توسيع الصورة لملء العنصر الأب.

ماذا لو كنت لا أعرف حجم صوري؟

إذا كنت تصل إلى الصور من مصدر لا تعرف أحجامها، فهناك عدة أشياء يمكنك القيام بها:

استخدم fill

تسمح خاصية fill بتحديد حجم صورتك بواسطة العنصر الأب. فكر في استخدام CSS لإعطاء العنصر الأب للصورة مساحة على الصفحة مع خاصية sizes لتتناسب مع أي نقاط توقف لاستعلامات الوسائط. يمكنك أيضًا استخدام object-fit مع fill، contain، أو cover، و object-position لتحديد كيفية احتلال الصورة لتلك المساحة.

توحيد صورك

إذا كنت تقدم الصور من مصدر تتحكم فيه، فكر في تعديل خط أنابيب الصور لتوحيد الصور إلى حجم معين.

تعديل استدعاءات API الخاصة بك

إذا كان تطبيقك يسترد عناوين URL للصور باستخدام استدعاء API (مثل نظام إدارة المحتوى CMS)، فقد تتمكن من تعديل استدعاء API لإرجاع أبعاد الصورة مع عنوان URL.

إذا لم تنجح أي من الطرق المقترحة لتحديد حجم صورك، فإن مكون next/image مصمم للعمل جيدًا في الصفحة إلى جانب عناصر <img> القياسية.

التنسيق

تنسيق مكون الصورة مشابه لتنسيق عنصر <img> عادي، ولكن هناك بعض الإرشادات التي يجب مراعاتها:

• استخدم className أو style، وليس styled-jsx.
  • في معظم الحالات، نوصي باستخدام خاصية className. يمكن أن يكون هذا وحدة CSS Module مستوردة، أو صفحة أنماط عامة، إلخ.
  • يمكنك أيضًا استخدام خاصية style لتعيين أنماط مضمنة.
  • لا يمكنك استخدام styled-jsx لأنه محدد للمكون الحالي (ما لم تحدد النمط كـ global).
• عند استخدام fill، يجب أن يحتوي العنصر الأب على position: relative
  • هذا ضروري لعرض عنصر الصورة بشكل صحيح في هذا الوضع.
• عند استخدام fill، يجب أن يحتوي العنصر الأب على display: block
  • هذا هو الإعداد الافتراضي لعناصر <div> ولكن يجب تحديده بخلاف ذلك.

أمثلة

متجاوب

import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="جبال"
        // استيراد صورة سوف
        // يحدد العرض والارتفاع تلقائيًا
        src={mountains}
        sizes="100vw"
        // اجعل الصورة تعرض بعرض كامل
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

ملء الحاوية

import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        <Image
          alt="جبال"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* والمزيد من الصور في الشبكة... */}
    </div>
  )
}

صورة الخلفية

import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Background() {
  return (
    <Image
      alt="جبال"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

للحصول على أمثلة لمكون الصورة المستخدم مع الأنماط المختلفة، راجع معرض مكون الصورة.

خصائص أخرى

عرض جميع الخصائص المتاحة لمكون next/image.

التكوين

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

اقرأ توثيق تكوين الصور الكامل لمزيد من المعلومات.