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

مثال ها

کامپوننت Image (opens in a new tab)

طبق آمار Web Almanac (opens in a new tab)، تصاویر بخش قابل توجهی از وزن (opens in a new tab) یک وب‌سایت نرمال را تشکیل می‌دهند و می‌توانند تأثیر قابل توجهی بر عملکرد LCP (opens in a new tab) وب‌سایت شما داشته باشند.

کامپوننت Image در Next.js المنت <img> HTML را با قابلیت‌هایی برای بهینه‌سازی خودکار تصویر گسترش می‌دهد:

بهینه‌سازی سایز: به طور خودکار تصاویر با اندازه مناسب برای هر دستگاه را ارائه می‌دهد، با استفاده از فرمت‌های تصویری مدرن مانند WebP و AVIF.
ثبات بصری: به طور خودکار از layout shift هنگام بارگیری تصاویر جلوگیری می‌کند.
بارگیری سریع‌تر صفحات: تصاویر فقط زمانی که وارد viewport می‌شوند با استفاده از بارگذاری تنبل (lazy loading) مرورگر بومی native و با نگه‌دارنده‌های placeholders blur-up اختیاری optional بارگیری می‌شوند.
انعطاف‌پذیری دارایی: تغییر اندازه تصویر در صورت تقاضا، حتی برای تصاویری که در سرورهای از راه دور ذخیره شده‌اند.

🎥 ببینید: درباره نحوه استفاده از next/image بیشتر بدانید: یوتوب (9 دقیقه) (opens in a new tab).

استفاده

import Image from 'next/image'

سپس می‌توانید src تصویر خود را (لوکال یا از راه دور) تعریف کنید.

تصاویر لوکال

برای استفاده از یک تصویر لوکال، فایل‌های تصویری jpg، png یا webp خود را import کنید.

Next.js به طور خودکار width و height تصویر شما را بر اساس فایل ایمپورت شده تعیین می‌کند. این مقادیر برای جلوگیری از Cumulative Layout Shift (opens in a new tab) در هنگام بارگیری تصویر شما استفاده می‌شوند.

app/page.js

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
	return (
		<Image
			src={profilePic}
			alt="Picture of the author"
			// width={500} automatically provided
			// height={500} automatically provided
			// blurDataURL="data:..." automatically provided
			// placeholder="blur" // Optional blur-up while loading
		/>
	)
}

هشدار: استفاده پویا از await import() یا require() پشتیبانی نمی‌شود. دستور import باید استاتیک (static) باشد تا بتوان آن را در زمان ساخت build تجزیه و تحلیل کرد.

تصاویر از راه دور Remote

برای استفاده از یک تصویر از راه دور، ویژگی src باید یک رشته URL باشد.

از آنجایی که Next.js در طول فرآیند ساخت build به فایل‌های از راه دور remote دسترسی ندارد، باید مقادیر width، height و پراپ blurDataURL (اختیاری) را به صورت دستی ارائه دهید.

خصوصیت‌های width و height برای استنتاج نسبت تصویر صحیح تصویر و جلوگیری از تغییر طرح بندی ناشی از بارگذاری تصویر استفاده می‌شوند. width و height اندازه رندر شده فایل تصویر را تعیین نمی‌کنند. برای اطلاعات بیشتر در مورد Image Sizing به منابع مربوطه مراجعه کنید.

app/page.js

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}
		/>
	)
}

برای ایمن کردن بهینه‌سازی تصاویر، لیستی از الگوهای URL پشتیبانی‌شده را در next.config.js تعریف کنید. برای جلوگیری از استفاده مخرب، تا حد امکان دقیق باشید. به عنوان مثال، پیکربندی زیر فقط به تصاویر از یک سطل خاص AWS S3 اجازه می‌دهد:

next.config.js

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

درباره پیکربندی remotePatterns بیشتر بدانید. اگر می‌خواهید برای src تصویر از URLهای نسبی استفاده کنید، از یک loader استفاده کنید.

دامنه‌ها

گاهی اوقات ممکن است بخواهید یک تصویر از راه دور را بهینه کنید، اما همچنان از API بهینه‌سازی تصویر داخلی Next.js استفاده کنید. برای انجام این کار، loader را روی تنظیمات پیش‌فرض آن رها کرده و یک URL مطلق برای ویژگی src تصویر وارد کنید.

برای محافظت از برنامه خود در برابر کاربران مخرب، باید لیستی از نام‌های میزبان از راه دوری که قصد استفاده از آن‌ها را با کامپوننت next/image دارید، تعریف کنید.

درباره پیکربندی remotePatterns بیشتر بدانید.

لودرها Loaders

توجه داشته باشید که در مثال قبلی، یک partial URL ("/me.png") برای یک تصویر لوکال ارائه شده است. این به دلیل معماری لودر امکان‌پذیر است.

لودر یک تابع است که URLهای تصویر شما را ایجاد generates می‌کند. این تابع، src ارائه شده را تغییر می‌دهد و چندین URL برای درخواست تصویر در اندازه‌های مختلف ایجاد می‌کند. این URLهای متعدد در ساخت خودکار srcset (opens in a new tab) استفاده می‌شوند، به طوری که به بازدیدکنندگان سایت شما تصویری ارائه می‌شود که اندازه مناسبی برای viewport آن‌ها داشته باشد.

لودر پیش‌فرض برای برنامه‌های Next.js از API داخلی بهینه‌سازی تصویر استفاده می‌کند، که تصاویر را از هر جای وب بهینه‌سازی می‌کند و سپس آن‌ها را مستقیماً از وب‌سرور Next.js ارائه می‌دهد. اگر می‌خواهید تصاویر خود را مستقیماً از یک CDN یا سرور تصویر ارائه دهید، می‌توانید با چند خط JavaScript یک تابع لودر خودتان بنویسید.

می‌توانید با پراپ loader برای هر تصویر یک لودر تعریف کنید، یا در سطح برنامه با پیکربندی loaderFile.

اولویت

باید ویژگی priority را به تصویری اضافه کنید که المنت بزرگترین محتوای قابل رندر (Largest Contentful Paint - LCP) (opens in a new tab) برای هر صفحه باشد. این کار به Next.js اجازه می‌دهد تا به طور ویژه تصویر را برای بارگذاری اولویت دهد (مثلاً از طریق تگ‌های پیش‌بارگذاری یا نکات اولویت)، که منجر به افزایش قابل توجهی در LCP می‌شود.

المنت LCP معمولاً بزرگترین تصویر یا بلوک متنی است که در viewport صفحه قابل مشاهده است. هنگامی که next dev را اجرا می‌کنید، اگر المنت LCP یک <Image> بدون ویژگی priority باشد، یک هشدار در کنسول مشاهده خواهید کرد.

پس از شناسایی تصویر LCP، می‌توانید ویژگی را به این شکل اضافه کنید:

app/page.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" priority />
}

درباره اولویت در مستندات کامپوننت next/image بیشتر بخوانید.

اندازه‌گیری تصویر

یکی از رایج‌ترین روش‌هایی که تصاویر بر عملکرد تأثیر می‌گذارند از طریق تغییر طرح بندی (layout shift) است، جایی که تصویر با بارگیری، عناصر دیگر را در صفحه هل می‌دهد. این مشکل عملکردی برای کاربران بسیار آزاردهنده است و Core Web Vital خاص خود به نام Cumulative Layout Shift (opens in a new tab) دارد. راه جلوگیری از تغییرات طرح بندی مبتنی بر تصویر این است که همیشه تصاویر خود را اندازه بگیرید (opens in a new tab). این کار به مرورگر اجازه می‌دهد تا قبل از بارگذاری تصویر، فضای دقیقاً کافی برای آن را رزرو کند.

از آنجایی که next/image برای تضمین نتایج عملکردی خوب طراحی شده است، نمی‌توان از آن به روشی استفاده کرد که منجر به تغییر طرح بندی شود و باید به یکی از سه روش زیر اندازه‌گیری شود:

خودکار، با استفاده از یک static import
به صراحت، با گنجاندن ویژگی های width و height
به طور ضمنی، با استفاده از fill که باعث می‌شود تصویر برای پر کردن fill المنت والد خود گسترش یابد expand.

اگر اندازه تصاویر خود را نمی‌دانم چه کار کنم؟

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

استفاده از fill
پراپ fill به تصویر شما اجازه می‌دهد تا توسط المنت والد خود اندازه‌گیری شود. استفاده از CSS برای دادن فضای صفحه به المنت والد تصویر به همراه ویژگی sizes برای مطابقت با هر نقطه شکست media query را در نظر بگیرید. همچنین می‌توانید از object-fit (opens in a new tab) با مقادیر fill، contain یا cover و object-position (opens in a new tab) برای تعریف نحوه اشغال آن فضا توسط تصویر استفاده کنید.

تصاویر خود را نرمال کنید Normalize

اگر تصاویر را از منبعی که خودتان کنترل می‌کنید ارائه می‌دهید، تغییر دادن خط تولید تصویر برای عادی‌سازی تصاویر به اندازه‌ای خاص را در نظر بگیرید.

اصلاح API calls

اگر برنامه شما URLهای تصویر را با استفاده از یک تماس API call (مانند یک CMS) بازیابی می‌کند، ممکن است بتوانید تماس API call را برای بازگرداندن ابعاد تصویر همراه با URL اصلاح کنید.

اگر هیچ یک از روش‌های پیشنهادی برای اندازه‌گیری تصاویر شما کار نمی‌کند، کامپوننت next/image به گونه‌ای طراحی شده است که در کنار عناصر استاندارد <img> در یک صفحه به خوبی کار کند.

استایل دهی

استایل‌دهی کامپوننت Image مشابه استایل‌دهی یک المنت <img> نرمال است، اما چند نکته وجود دارد که باید به خاطر بسپارید:

از className یا style استفاده کنید، نه styled-jsx.
- در اکثر موارد، استفاده از پراپ className را توصیه می‌کنیم. این می‌تواند یک ماژول CSS وارد شده، یک استایل‌شیت سراسری و غیره باشد.
- همچنین می‌توانید از ویژگی style برای اختصاص استایل‌های درون خطی استفاده کنید.
- شما نمی‌توانید از styled-jsx استفاده کنید زیرا این ویژگی برای کامپوننت فعلی محدوده scoped دارد (مگر اینکه استایل را به عنوان 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="Mountains"
				// Importing an image will
				// automatically set the width and height
				src={mountains}
				sizes="100vw"
				// Make the image display full width
				style={{
					width: '100%',
					height: 'auto',
				}}
			/>
		</div>
	)
}

Fill Container

شبکه ای از تصاویر که عرض ظرف اصلی را پر می کنند

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="Mountains"
					src={mountains}
					fill
					sizes="(min-width: 808px) 50vw, 100vw"
					style={{
						objectFit: 'cover', // cover, contain, none
					}}
				/>
			</div>
			{/* And more images in the grid... */}
		</div>
	)
}

Image پس زمینه

تصویر پس زمینه تمام عرض و ارتفاع صفحه را می گیرد

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
	return (
		<Image
			alt="Mountains"
			src={mountains}
			placeholder="blur"
			quality={100}
			fill
			sizes="100vw"
			style={{
				objectFit: 'cover',
			}}
		/>
	)
}

برای مثال هایی از کامپوننت Image که با استایل‌های مختلف استفاده می‌شود، به دموی کامپوننت Image (opens in a new tab) مراجعه کنید.

سایر خصوصیات

همه خصوصیات موجود برای کامپوننت next/image را مشاهده کنید.

پیکربندی

کامپوننت next/image و API بهینه‌سازی تصویر Next.js را می‌توان در فایل next.config.js پیکربندی کرد. این پیکربندی‌ها به شما امکان می‌دهند تصاویر از راه دور را فعال کنید، نقاط شکست تصویر سفارشی را تعریف کنید، رفتار کش را تغییر دهید و موارد دیگر.

برای اطلاعات بیشتر، مستندات کامل پیکربندی تصویر را مطالعه کنید.

مقدمه ویدئوها