بررسی بهینه سازی تصویر در Next.js با مثال

تصاویر نقش مهمی در توسعه وب دارند، اما می توانند به طور قابل توجهی بر عملکرد وب سایت تأثیر بگذارند. برای رفع این مشکل، Next.js مؤلفه Image را ارائه می دهد که بهینه سازی خودکار تصویر و ویژگی های مختلفی را برای بهینه سازی بارگذاری و رندر تصویر ارائه می دهد. با نحوه بهینه سازی تصاویر در Next.js برای عملکرد بهتر و تجربه کاربری آشنا شوید. برای مدیریت موثر تصاویر در پروژه های Next.js خود، این چک لیست را دنبال کنید.  در این آموزش، چک لیستی برای بهینه سازی تصاویر در Next.js بررسی می کنیم و نمونه کدهایی را برای هر مرحله بهینه سازی ارائه می دهیم.

1. استفاده از تصاویر Local

برای استفاده از یک تصویر Local، فایل‌های تصویری jpg، .png یا webp. خود را وارد کنید. Next.js به طور خودکار عرض و ارتفاع تصویر شما را بر اساس فایل وارد شده تعیین می کند. این مقادیر برای جلوگیری از تغییر چیدمان تجمعی در زمانی که تصویر شما در حال بارگذاری است استفاده می شود.

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

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
    />
  )
}

2. تصاویر از Remote دارای عرض و ارتفاع هستند

هنگام استفاده از یک تصویر remote، باید ویژگی های عرض و ارتفاع را به صورت دستی ارائه کنید. این ویژگی ها برای استنباط نسبت تصویر صحیح و جلوگیری از تغییر طرح در حین بارگذاری تصویر استفاده می شود.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

3. URL های تصویر Remote در next.config هستند

برای اجازه بهینه سازی ایمن تصویر برای تصاویر remote، لیستی از الگوهای URL پشتیبانی شده را در فایل next.config.js تعریف کنید. برای جلوگیری از استفاده مخرب تا حد امکان خاص باشید.

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

نحوه استفاده از تایپ اسکریپت در نکست جی اس

4. LCP دارای اولویت هست

برای بهبود عملکرد Largest Contentful Paint (LCP)، ویژگی اولویت را به تصویر اضافه کنید که عنصر LCP برای هر صفحه خواهد بود. این به Next.js اجازه می دهد تا بارگذاری تصویر را در اولویت قرار دهد و در نتیجه 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>
    </>
  )
}

استفاده از FetchAPI در نکست جی اس

5. اندازه تصاویر به درستی باشد

برای جلوگیری از تغییر چیدمان مبتنی بر تصویر و اطمینان از عملکرد خوب، اندازه گیری صحیح تصاویر بسیار مهم است. کامپوننت Image در Next.js سه راه برای اندازه‌گیری تصاویر با استفاده از کامپوننت next/image ارائه می‌کند:

1. اندازه‌گیری خودکار با وارد کردن استاتیک: هنگام وارد کردن تصاویر لوکال با استفاده از واردات ثابت، Next.js به طور خودکار عرض و ارتفاع را بر اساس فایل وارد شده تعیین می‌کند. این تضمین می‌کند که مرورگر فضای کافی را برای تصویر قبل از بارگیری در نظر می‌گیرد و از تغییر طرح‌بندی جلوگیری می‌کند.

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

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
    />
  );
}

2. اندازه صریح با ویژگی های عرض و ارتفاع: برای تصاویری که از URL استفاده می کنید یا زمانی که ابعاد را از قبل می دانید، می توانید به صراحت ویژگی های عرض و ارتفاع را برای این کامپوننت ارائه دهید. این به مرورگر اجازه می دهد تا فضای مناسب را برای تصویر اختصاص دهد.

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="https://example.com/image.jpg"
      alt="Description of the image"
      width={600}
      height={400}
    />
  );
}

3. اندازه گیری ضمنی با ویژگی fill: اگر اندازه تصاویر خود را نمی دانید یا می خواهید که صفحه اصلی خود را پر کنند، می توانید از ویژگی fill استفاده کنید. ویژگی fill به تصویر اجازه می دهد تا عنصر اصلی خود را گسترش داده و پر کند. اطمینان حاصل کنید که عنصر والد یک فضای مشخص در صفحه دارد.

import Image from 'next/image';

export default function Page() {
  return (
    <div className="image-container">
      <Image
        src="/image.jpg"
        alt="Description of the image"
        layout="fill"
      />
    </div>
  );
}

مدیریت استیت با Zustand در ری اکت

6. برای استایل از className یا style استفاده می کند

وقتی نوبت به استایل دادن به کامپوننت Image در Next.js می رسد، پیروی از دستورالعمل های توصیه شده مهم است. در اینجا نحوه برخورد شما با این مسئله آورده شده است:

1.استفاده از className (توصیه می شود)

از پراپ className برای استایل استفاده کنید. این به شما اجازه می دهد تا با استفاده از ماژول های CSS یا هر روش استایل ترجیحی دیگری استایل ها را اعمال کنید. این امر نگهداری بهتر و تفکیک نگرانی ها را تضمین می کند. همچنین با TailwindCSS کاملاً کار می کند.

import Image from 'next/image';

export default function Page() {
  return (
    <div className="image-container">
      <Image
        src="/image.jpg"
        alt="Description of the image"
        width={600}
        height={400}
        className="custom-image"
      />
    </div>
  );
}

2. استفاده از استایل

از طرف دیگر، می توانید از پراپ style برای اختصاص استایل های درون خطی به تصویر استفاده کنید. این برای اعمال استایل های خاصی که در فایل CSS شما تعریف نشده اند مفید است.

import Image from 'next/image';

export default function Page() {
  const imageStyles = {
    borderRadius: '50%',
    boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
  };

  return (
    <div>
      <Image
        src="/image.jpg"
        alt="Description of the image"
        width={200}
        height={200}
        style={imageStyles}
      />
    </div>
  );
}

لطفاً توجه داشته باشید که استفاده از کتابخانه styled-jsx برای استایل دادن به کامپوننت Next.js Image توصیه نمی شود. استایل های styled-jsx به‌طور پیش‌فرض به کامپوننت فعلی اختصاص داده می‌شوند، مگر اینکه به‌عنوان گلوبال علامت‌گذاری شوند. بنابراین، ترجیحاً از className یا style prop برای اهداف استایل استفاده کنید.

محبوب ترین هوک های ری اکت که هر برنامه نویسی باید بداند

7. والد تصاویر با fill دارای موقعیت relative و block هستند

اگر از ویژگی fill با کامپوننت Next.js Image استفاده می‌کنید، بسیار مهم است که مطمئن شوید عنصر والد تصویر دارای ویژگی‌های صحیح CSS است. این تضمین می کند که تصویر به طور مناسب محفظه اصلی خود را fill می کند. در اینجا چیزی است که شما باید انجام دهید:

تعریف کلاس

ویژگی position عنصر والد را روی relative قرار دهید. این یک زمینه موقعیت‌یابی برای تصویر ایجاد می‌کند و به آن اجازه می‌دهد تا ظرف والد را به درستی پر کند.
ویژگی display عنصر والد را روی block تنظیم کنید. این تضمین می‌کند که ظرف والد کل عرض والد خود را می‌گیرد و به تصویر اجازه می‌دهد فضای موجود را پر کند.

.image-container {
  position: relative;
  display: block;
}
<div className="image-container">
  <Image
    src="/image.jpg"
    alt="Description of the image"
    width={600}
    height={400}
	fill
  />
</div>

ری اکت 19 در مقابل ری اکت 18 آشنایی با تفاوت ها و ویژگی ها

با استفاده از TailwindCSS
کلاس های کاربردی relative block را در ظرف والد اعمال کنید. کلاس relative یک زمینه موقعیت یابی ایجاد می کند، در حالی که کلاس block تضمین می کند که ظرف والد تمام عرض والد خود را اشغال می کند.

<div className="relative block">
  <Image
    src="/image.jpg"
    alt="Description of the image"
    width={600}
    height={400}
    fill
  />
</div>

نتیجه

بهینه سازی تصاویر برای بهبود عملکرد وب سایت و ارائه یک تجربه کاربری روان بسیار مهم است. در این آموزش، چک لیستی را برای بهینه سازی تصاویر در Next.js بررسی کردیم با دنبال کردن این مراحل و استفاده از ویژگی های قدرتمند کامپوننت Next.js Image، می توانید مطمئن شوید که تصاویر وب سایت خود برای عملکرد بهینه شده اند.