تحسين الصور

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

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

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

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

الاستخدام

import Image from 'next/image'

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

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

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

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

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

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

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

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

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

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

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

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/**',
      },
    ],
  },
}

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

النطاقات

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

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

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

المحملات

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

المحمل هو دالة تقوم بإنشاء عناوين 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'

export default function Home() {
  return (
    <>
      <h1>الصفحة الرئيسية</h1>
      <Image
        src="/me.png"
        alt="صورة المؤلف"
        width={500}
        height={500}
        priority
      />
      <p>مرحبًا بكم في صفحتي الرئيسية!</p>
    </>
  )
}

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

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

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

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

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

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

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

استخدم fill

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

توحيد صورك

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

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

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

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

التنسيق

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

• استخدم className أو style، وليس styled-jsx.
  • في معظم الحالات، نوصي باستخدام خاصية className. يمكن أن يكون هذا وحدة CSS Module مستوردة، أو stylesheet عام، إلخ.
  • يمكنك أيضًا استخدام خاصية 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. تتيح لك هذه التكوينات تمكين الصور البعيدة، تحديد نقاط توقف مخصصة للصور، تغيير سلوك التخزين المؤقت والمزيد.

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