کامپوننت Image در Next.js: ویژگی‌های پیشرفته بهینه‌سازی برای وب جهانی

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

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

درک مزایای اصلی

قبل از پرداختن به ویژگی‌های پیشرفته، بیایید مزایای اصلی استفاده از کامپوننت Image در Next.js را مرور کنیم:

• بهینه‌سازی خودکار تصویر: تصاویر را در لحظه بهینه می‌کند، اندازه آن‌ها را تغییر می‌دهد و بر اساس پشتیبانی مرورگر به فرمت‌های مدرن مانند WebP یا AVIF تبدیل می‌کند.
• تصاویر واکنش‌گرا: به طور خودکار اندازه‌های مختلفی از تصویر را برای سازگاری با اندازه‌های مختلف صفحه و رزولوشن دستگاه‌ها ایجاد می‌کند، که عملکرد را در دستگاه‌های تلفن همراه بهبود بخشیده و مصرف پهنای باند را کاهش می‌دهد.
• بارگذاری تنبل (Lazy Loading): تصاویر را تنها زمانی بارگذاری می‌کند که وارد دید کاربر (viewport) شوند، که زمان بارگذاری اولیه صفحه را کاهش داده و عملکرد درک‌شده را بهبود می‌بخشد.
• عملکرد داخلی بهینه: برای عملکرد بهینه با ویژگی‌هایی مانند پیش‌بارگذاری (preloading) تصاویر بالای صفحه (above-the-fold) و اندازه‌بندی خودکار تصویر طراحی شده است.
• جلوگیری از تغییر چیدمان (Layout Shift): با مشخص کردن width و height، یا با استفاده از پراپ fill، این کامپوننت از Cumulative Layout Shift (CLS) که یک معیار کلیدی برای Core Web Vitals است، جلوگیری می‌کند.

تکنیک‌های پیشرفته بهینه‌سازی

۱. تسلط بر پراپ `sizes` برای تصاویر تطبیق‌پذیر

پراپ sizes ابزاری قدرتمند برای ایجاد تصاویر واقعاً واکنش‌گرا است که با اندازه‌های مختلف صفحه و عرض‌های viewport سازگار می‌شوند. این پراپ به شما امکان می‌دهد تا اندازه‌های مختلف تصویر را بر اساس media queryها تعریف کنید و اطمینان حاصل کنید که مرورگر مناسب‌ترین تصویر را برای دستگاه کاربر بارگذاری می‌کند.

مثال:

تصور کنید تصویری دارید که باید در دستگاه‌های کوچک تمام عرض صفحه، در دستگاه‌های با اندازه متوسط نیمی از عرض و در دستگاه‌های بزرگ یک سوم عرض صفحه را اشغال کند. شما می‌توانید با استفاده از پراپ sizes به این هدف برسید:

<Image
  src="/my-image.jpg"
  alt="My Responsive Image"
  width={1200}
  height={800}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

توضیح:

• (max-width: 768px) 100vw: برای صفحاتی با حداکثر عرض ۷۶۸ پیکسل (معمولاً دستگاه‌های تلفن همراه)، تصویر ۱۰۰٪ از عرض viewport را اشغال خواهد کرد.
• (max-width: 1200px) 50vw: برای صفحاتی با حداکثر عرض ۱۲۰۰ پیکسل (دستگاه‌های با اندازه متوسط)، تصویر ۵۰٪ از عرض viewport را اشغال خواهد کرد.
• 33vw: برای صفحاتی بزرگ‌تر از ۱۲۰۰ پیکسل، تصویر ۳۳٪ از عرض viewport را اشغال خواهد کرد.

پراپ sizes در کنار پراپ‌های width و height کار می‌کند تا اطمینان حاصل شود که مرورگر اندازه صحیح تصویر را بارگذاری می‌کند. با ارائه یک پراپ sizes به خوبی تعریف شده، می‌توانید تحویل تصویر را برای طیف گسترده‌ای از دستگاه‌ها و اندازه‌های صفحه بهینه کرده و عملکرد را به طور قابل توجهی بهبود بخشید.

کاربرد جهانی: یک سایت تجارت الکترونیک را در نظر بگیرید که کاربرانی در اروپا و آسیا را هدف قرار داده است. الگوهای استفاده از دستگاه‌ها ممکن است به طور قابل توجهی متفاوت باشد. کاربران اروپایی ممکن است عمدتاً از دسکتاپ استفاده کنند، در حالی که کاربران آسیایی ممکن است بیشتر به دستگاه‌های تلفن همراه متکی باشند. بهینه‌سازی با sizes زمان بارگذاری سریع را برای همه، صرف نظر از دستگاه، تضمین می‌کند.

۲. استفاده از `priority` برای تصاویر حیاتی بالای صفحه (Above-the-Fold)

پراپ priority برای اولویت‌بندی بارگذاری تصاویری استفاده می‌شود که برای بارگذاری اولیه صفحه حیاتی هستند، معمولاً تصاویری که در بالای صفحه (بخشی از صفحه که بدون اسکرول قابل مشاهده است) قرار دارند. با تنظیم priority={true} برای این تصاویر، شما به Next.js دستور می‌دهید که آن‌ها را پیش‌بارگذاری (preload) کند، و اطمینان حاصل می‌کنید که به سرعت بارگذاری و نمایش داده می‌شوند و عملکرد درک‌شده کاربر را بهبود می‌بخشند.

مثال:

<Image
  src="/hero-image.jpg"
  alt="Hero Image"
  width={1920}
  height={1080}
  priority={true}
/>

چه زمانی استفاده کنیم:

• تصاویر اصلی (Hero Images): تصویر اصلی در بالای صفحه که بلافاصله توجه کاربر را جلب می‌کند.
• لوگوها: لوگوی وب‌سایت که معمولاً در هدر نمایش داده می‌شود.
• عناصر بصری کلیدی: هر تصویر دیگری که برای تجربه اولیه کاربر ضروری است.

ملاحظات مهم:

• از پراپ priority به ندرت استفاده کنید، زیرا پیش‌بارگذاری تعداد زیادی تصویر می‌تواند بر زمان بارگذاری کلی صفحه تأثیر منفی بگذارد.
• اطمینان حاصل کنید که تصاویری که اولویت‌بندی می‌کنید به درستی بهینه شده‌اند تا حجم فایل آن‌ها به حداقل برسد.

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

۳. پیکربندی یک Loader تصویر سفارشی

به طور پیش‌فرض، کامپوننت Image در Next.js از سرویس بهینه‌سازی تصویر داخلی خود استفاده می‌کند. با این حال، شما می‌توانید این رفتار را با ارائه یک loader تصویر سفارشی، تغییر دهید. این کار به ویژه زمانی مفید است که از یک سرویس بهینه‌سازی تصویر شخص ثالث مانند Cloudinary، Imgix یا یک شبکه توزیع محتوا (CDN) با قابلیت‌های بهینه‌سازی تصویر استفاده می‌کنید.

مثال: استفاده از Cloudinary

ابتدا، SDK کلادینری را نصب کنید:

npm install cloudinary-core

سپس، یک تابع loader سفارشی ایجاد کنید:

// utils/cloudinaryLoader.js
import { Cloudinary } from 'cloudinary-core';

const cloudinary = new Cloudinary({
  cloud_name: 'your_cloud_name',
});

export function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, 'q_auto'];
  if (quality) {
    params.push(`q_${quality}`);
  }
  return cloudinary.url(src, { transformation: params });
}

در نهایت، پراپ loader را در فایل next.config.js خود پیکربندی کنید:

// next.config.js

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './utils/cloudinaryLoader.js',
  },
}

و از آن در کامپوننت خود استفاده کنید:

<Image
  src="/my-image.jpg"
  alt="My Image"
  width={600}
  height={400}
  loader={cloudinaryLoader}
/>

مزایای استفاده از یک Loader سفارشی:

• انعطاف‌پذیری: به شما امکان می‌دهد تا با سرویس بهینه‌سازی تصویر مورد نظر خود ادغام شوید.
• بهینه‌سازی پیشرفته: دسترسی به ویژگی‌های بهینه‌سازی پیشرفته ارائه شده توسط سرویس‌های شخص ثالث را فراهم می‌کند.
• ادغام با CDN: به شما امکان می‌دهد تا از زیرساخت CDN جهانی سرویس انتخابی خود بهره‌مند شوید.

کاربرد جهانی: یک پلتفرم جهانی رزرو سفر می‌تواند از یک loader سفارشی با یک CDN مانند Akamai یا Cloudflare استفاده کند. این کار تضمین می‌کند که تصاویر از سرورهایی که به کاربر نزدیک‌تر هستند، ارائه می‌شوند و تأخیر را به شدت کاهش داده و زمان بارگذاری را بهبود می‌بخشد، چه کاربر در توکیو باشد، چه لندن یا نیویورک.

۴. بهینه‌سازی فرمت‌های تصویر: WebP و AVIF

فرمت‌های مدرن تصویر مانند WebP و AVIF فشرده‌سازی و کیفیت برتری نسبت به فرمت‌های سنتی مانند JPEG و PNG ارائه می‌دهند. کامپوننت Image در Next.js می‌تواند به طور خودکار تصاویر را بر اساس پشتیبانی مرورگر به این فرمت‌ها تبدیل کند و حجم فایل‌ها را بیشتر کاهش داده و عملکرد را بهبود بخشد.

WebP: یک فرمت تصویر مدرن که توسط گوگل توسعه یافته و فشرده‌سازی بی‌نقص (lossless) و با اتلاف (lossy) عالی را ارائه می‌دهد. این فرمت به طور گسترده توسط مرورگرهای مدرن پشتیبانی می‌شود.

AVIF: یک فرمت تصویر جدیدتر بر اساس کدک ویدیویی AV1. این فرمت فشرده‌سازی بهتری نسبت به WebP ارائه می‌دهد اما پشتیبانی مرورگرها از آن کمتر است.

تبدیل خودکار فرمت: کامپوننت Image در Next.js به طور خودکار تصاویر را به WebP یا AVIF تبدیل می‌کند اگر مرورگر از آن پشتیبانی کند. شما نیازی به مشخص کردن صریح فرمت ندارید؛ کامپوننت این کار را به صورت خودکار انجام می‌دهد.

پشتیبانی مرورگر: جداول سازگاری مرورگرها (مانند caniuse.com) را برای درک پشتیبانی فعلی از WebP و AVIF بررسی کنید.

ملاحظات:

• اطمینان حاصل کنید که سرویس بهینه‌سازی تصویر یا CDN شما از WebP و AVIF پشتیبانی می‌کند.
• برای مرورگرهای قدیمی‌تر که از این فرمت‌ها پشتیبانی نمی‌کنند، یک جایگزین (fallback) در نظر بگیرید (کامپوننت Image در Next.js معمولاً این کار را به خوبی انجام می‌دهد).

کاربرد جهانی: یک агрегатор خبری بین‌المللی می‌تواند به طور گسترده از WebP و AVIF بهره‌مند شود. با سرعت‌های اینترنت متفاوت در مناطق مختلف، حجم فایل‌های تصویری کوچکتر به معنای زمان بارگذاری سریع‌تر و کاهش مصرف داده برای کاربران در مناطقی با پهنای باند محدود است.

۵. بهره‌گیری از `fill` و `objectFit` برای چیدمان‌های پویا

پراپ fill به تصویر اجازه می‌دهد تا ابعاد کانتینر والد خود را به خود بگیرد. این به ویژه برای ایجاد چیدمان‌های واکنش‌گرا که در آن اندازه تصویر باید به صورت پویا با فضای موجود سازگار شود، مفید است. در ترکیب با ویژگی CSS objectFit، می‌توانید نحوه پر کردن تصویر در کانتینر خود را کنترل کنید (مانند cover، contain، fill، none، scale-down).

مثال:

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src="/my-image.jpg"
    alt="My Image"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

توضیح:

• المان div به عنوان کانتینر برای تصویر عمل می‌کند و دارای موقعیت نسبی (relative position) است.
• کامپوننت <Image> دارای پراپ fill است که باعث می‌شود ابعاد کانتینر والد خود را به خود بگیرد.
• استایل objectFit: 'cover' تضمین می‌کند که تصویر کل کانتینر را پوشش دهد و احتمالاً برخی از قسمت‌های تصویر را برای حفظ نسبت ابعاد برش دهد.

موارد استفاده:

• بنرهای تمام عرض: ایجاد بنرهای واکنش‌گرا که تمام عرض صفحه را در بر می‌گیرند.
• تصاویر پس‌زمینه: تنظیم تصاویر پس‌زمینه برای بخش‌ها یا کامپوننت‌ها.
• گالری‌های تصاویر: نمایش تصاویر در یک چیدمان شبکه‌ای (grid) که در آن اندازه تصویر با فضای موجود سازگار می‌شود.

کاربرد جهانی: یک وب‌سایت چندزبانه که محصولات را به نمایش می‌گذارد، به یک چیدمان انعطاف‌پذیر نیاز دارد که با طول‌های مختلف متن و اندازه‌های صفحه سازگار شود. استفاده از fill و objectFit تضمین می‌کند که تصاویر جذابیت بصری خود را حفظ کرده و به طور یکپارچه در چیدمان قرار می‌گیرند، صرف نظر از زبان یا دستگاه.

۶. پیکربندی پراپ `unoptimized` برای سناریوهای خاص

در موارد نادر، ممکن است بخواهید بهینه‌سازی خودکار تصویر را برای تصاویر خاصی غیرفعال کنید. به عنوان مثال، ممکن است تصویری داشته باشید که قبلاً به شدت بهینه شده است یا می‌خواهید آن را مستقیماً از یک CDN بدون پردازش بیشتر ارائه دهید. شما می‌توانید با تنظیم پراپ unoptimized به true به این هدف برسید.

مثال:

<Image
  src="/already-optimized.png"
  alt="Already Optimized Image"
  width={800}
  height={600}
  unoptimized={true}
/>

چه زمانی استفاده کنیم:

• تصاویر قبلاً بهینه‌شده: تصاویری که قبلاً با استفاده از یک ابزار یا سرویس شخص ثالث بهینه شده‌اند.
• تصاویر ارائه شده مستقیماً از CDN: تصاویری که مستقیماً از یک CDN بدون پردازش بیشتر ارائه می‌شوند.
• فرمت‌های تصویر تخصصی: تصاویری که از فرمت‌های تخصصی استفاده می‌کنند که توسط کامپوننت Image در Next.js پشتیبانی نمی‌شوند.

احتیاط:

• از پراپ unoptimized به ندرت استفاده کنید، زیرا تمام ویژگی‌های بهینه‌سازی خودکار تصویر را غیرفعال می‌کند.
• اطمینان حاصل کنید که تصاویری که به عنوان unoptimized علامت‌گذاری می‌کنید، قبلاً به درستی بهینه شده‌اند تا حجم فایل آن‌ها به حداقل برسد.

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

۷. استفاده از `blurDataURL` برای بهبود عملکرد درک‌شده

پراپ blurDataURL به شما امکان می‌دهد تا یک تصویر جایگزین با وضوح پایین را در حالی که تصویر واقعی در حال بارگذاری است، نمایش دهید. این کار می‌تواند با ارائه یک نشانه بصری از اینکه چیزی در حال بارگذاری است، عملکرد درک‌شده کاربر را به طور قابل توجهی بهبود بخشد و از خالی یا غیرپاسخگو به نظر رسیدن صفحه جلوگیری کند. نسخه‌های Next.js 13 و بالاتر اغلب این کار را به صورت خودکار انجام می‌دهند.

مثال:

ابتدا، با استفاده از ابزاری مانند BlurHash یا یک سرویس مشابه، یک blur data URL از تصویر خود ایجاد کنید. این کار به شما یک رشته کوچک کدگذاری شده با base64 می‌دهد که نسخه تار شده‌ای از تصویر شما را نشان می‌دهد.

<Image
  src="/my-image.jpg"
  alt="My Image"
  width={600}
  height={400}
  placeholder="blur"
  blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
/>

مزایا:

• بهبود عملکرد درک‌شده: یک نشانه بصری از اینکه چیزی در حال بارگذاری است، ارائه می‌دهد.
• تجربه کاربری بهبود یافته: از خالی یا غیرپاسخگو به نظر رسیدن صفحه جلوگیری می‌کند.
• کاهش تغییر چیدمان: با رزرو کردن فضا برای تصویر، به جلوگیری از تغییر چیدمان کمک می‌کند.

کاربرد جهانی: یک وبلاگ بین‌المللی سفر که مقاصد را با عکاسی خیره‌کننده به نمایش می‌گذارد. استفاده از blurDataURL یک تجربه بارگذاری روان را حتی برای کاربرانی با شبکه‌های کندتر فراهم می‌کند، یک تأثیر اولیه مثبت ایجاد کرده و آنها را به کاوش محتوا تشویق می‌کند.

بهترین شیوه‌ها برای بهینه‌سازی تصویر جهانی

برای اطمینان از عملکرد بهینه تصویر برای مخاطبان جهانی، این بهترین شیوه‌ها را در نظر بگیرید:

• انتخاب فرمت تصویر مناسب: از WebP یا AVIF برای مرورگرهای مدرن استفاده کنید و برای مرورگرهای قدیمی‌تر جایگزین فراهم کنید.
• بهینه‌سازی اندازه تصویر: اندازه تصاویر را برای ابعاد نمایش هدف مناسب‌سازی کنید.
• فشرده‌سازی تصاویر: از فشرده‌سازی بی‌اتلاف یا با اتلاف برای کاهش حجم فایل استفاده کنید.
• استفاده از بارگذاری تنبل: تصاویر را تنها زمانی که وارد دید کاربر می‌شوند، بارگذاری کنید.
• اولویت‌بندی تصاویر حیاتی: تصاویری که برای بارگذاری اولیه صفحه حیاتی هستند را پیش‌بارگذاری کنید.
• بهره‌گیری از CDN: از یک CDN برای ارائه تصاویر از سرورهایی که به کاربر نزدیک‌تر هستند، استفاده کنید.
• نظارت بر عملکرد: به طور منظم عملکرد وب‌سایت خود را با استفاده از ابزارهایی مانند Google PageSpeed Insights و WebPageTest نظارت کنید.

نتیجه‌گیری

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

به یاد داشته باشید که به طور مداوم عملکرد وب‌سایت خود را نظارت کرده و استراتژی‌های بهینه‌سازی تصویر خود را در صورت نیاز تطبیق دهید تا اطمینان حاصل کنید که بهترین تجربه ممکن را برای کاربران خود فراهم می‌کنید.