بهینه سازی تصاویر

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

یکی از قابلیت‌های قدرتمند Next.js، بهینه‌سازی خودکار تصاویر با استفاده از کامپوننت next/image است. این کامپوننت نسخه‌ای پیشرفته از عنصر استاندارد <img> در HTML محسوب می‌شود و امکاناتی را در اختیار شما قرار می‌دهد که باعث افزایش سرعت بارگذاری صفحات و بهبود تجربه کاربری می‌شوند.

مزایای next/image

• بهینه‌سازی اندازه تصاویر (Size Optimization):
  تصاویر به‌صورت خودکار با ابعاد مناسب برای هر دستگاه و با فرمت‌های مدرن مانند WebP ارائه می‌شوند تا حجم فایل‌ها کاهش یابد.

• پایداری چیدمان (Visual Stability):
  از ایجاد Layout Shift هنگام بارگذاری تصاویر جلوگیری می‌کند و باعث می‌شود عناصر صفحه جابه‌جا نشوند.

• بارگذاری سریع‌تر صفحات (Faster Page Loads):
  تنها تصاویری که وارد محدوده دید کاربر (Viewport) می‌شوند بارگذاری خواهند شد (Lazy Loading) و در صورت نیاز می‌توان از Blur Placeholder برای نمایش پیش‌نمایش تصویر استفاده کرد.

• انعطاف‌پذیری در مدیریت تصاویر (Asset Flexibility):
  تصاویر را به‌صورت پویا و هنگام درخواست (On-Demand) تغییر اندازه می‌دهد؛ حتی اگر تصاویر روی سرورهای راه‌دور (Remote Servers) میزبانی شده باشند.

شروع کار

برای استفاده از کامپوننت next/image، ابتدا آن را از پکیج next/image وارد کرده و سپس در کامپوننت خود استفاده کنید.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/images/profile.jpg"
      alt="Profile"
      width={500}
      height={500}
    />
  )
}

ویژگی src می‌تواند به یک تصویر محلی (Local) یا یک تصویر راه‌دور (Remote) اشاره کند.

با استفاده از next/image، می‌توانید بدون نیاز به ابزارهای جانبی، تصاویر پروژه خود را به‌صورت خودکار بهینه کرده و عملکرد اپلیکیشن را بهبود دهید.