این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

ساخت یک کامپوننت تصویر موثر

یک جزء تصویر بهترین شیوه های عملکرد را در بر می گیرد و راه حلی خارج از جعبه برای بهینه سازی تصاویر ارائه می دهد.

Leena Sohoni

Kara Erickson

Alex Castle

تصاویر منبع رایج گلوگاه های عملکرد برای برنامه های کاربردی وب و یک منطقه تمرکز کلیدی برای بهینه سازی هستند. تصاویر بهینه‌نشده منجر به نفخ صفحه می‌شوند و بیش از 70 درصد وزن کل صفحه را بر حسب بایت در صدک ⁹⁰ تشکیل می‌دهند. راه‌های متعدد برای بهینه‌سازی تصاویر نیاز به یک «جزء تصویر» هوشمند با راه‌حل‌های عملکردی به‌صورت پیش‌فرض دارد.

تیم Aurora با Next.js کار کرد تا یکی از این اجزا را بسازد. هدف این بود که یک الگوی تصویری بهینه سازی شده ایجاد کنیم که توسعه دهندگان وب بتوانند بیشتر سفارشی کنند. کامپوننت به عنوان یک مدل خوب عمل می کند و استانداردی را برای ساخت اجزای تصویر در سایر چارچوب ها، سیستم های مدیریت محتوا (CMS) و پشته های فناوری تعیین می کند. ما روی یک مؤلفه مشابه برای Nuxt.js همکاری کرده‌ایم و در نسخه‌های بعدی با Angular در بهینه‌سازی تصویر کار می‌کنیم. این پست در مورد نحوه طراحی مولفه Next.js Image و درس هایی که در طول مسیر یاد گرفتیم بحث می کند.

جزء تصویر به عنوان یک پسوند تصاویر

مسائل و فرصت های بهینه سازی تصویر

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

تصاویر بدون اندازه به CLS آسیب می رسانند

تصاویری که بدون تعیین اندازه آنها ارائه می شوند می توانند باعث بی ثباتی چیدمان شوند و به یک تغییر چیدمان تجمعی بالا ( CLS ) کمک کنند. تنظیم ویژگی های width و height در عناصر <img> می تواند به جلوگیری از جابجایی طرح کمک کند. به عنوان مثال:

<img src="flower.jpg" width="360" height="240">

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

تصاویر بزرگ می توانند به LCP آسیب بزنند

هرچه اندازه فایل یک تصویر بزرگتر باشد، دانلود آن بیشتر طول می کشد. یک تصویر بزرگ می تواند تصویر "قهرمان" برای صفحه یا مهم ترین عنصر در نما باشد که مسئول ایجاد بزرگترین رنگ محتوایی ( LCP ) است. تصویری که بخشی از محتوای مهم است و دانلود آن زمان زیادی می برد، LCP را به تاخیر می اندازد.

در بسیاری از موارد، توسعه دهندگان می توانند اندازه تصویر را از طریق فشرده سازی بهتر و استفاده از تصاویر واکنش گرا کاهش دهند. ویژگی های srcset و sizes عنصر <img> به ارائه فایل های تصویری با اندازه های مختلف کمک می کند. سپس مرورگر بسته به اندازه و وضوح صفحه نمایش می تواند مورد مناسب را انتخاب کند.

فشرده سازی ضعیف تصویر می تواند به LCP آسیب برساند

فرمت های تصویر مدرن مانند AVIF یا WebP می توانند فشرده سازی بهتری نسبت به فرمت های رایج JPEG و PNG ارائه دهند. فشرده سازی بهتر در برخی موارد برای کیفیت یکسان تصویر، حجم فایل را بین 25 تا 50 درصد کاهش می دهد. این کاهش منجر به دانلود سریعتر با مصرف کمتر داده می شود. این برنامه باید فرمت های تصویر مدرن را به مرورگرهایی که از این فرمت ها پشتیبانی می کنند ارائه دهد .

بارگذاری تصاویر غیر ضروری به LCP آسیب می رساند

وقتی صفحه بارگذاری می شود، تصاویر زیر تا شده یا نبودن در ویوپورت به کاربر نمایش داده نمی شوند. می توان آنها را به تعویق انداخت تا به LCP کمک نکنند و آن را به تاخیر بیندازند. Lazy-loading را می توان برای بارگیری چنین تصاویری بعداً با حرکت کاربر به سمت آنها استفاده کرد.

چالش های بهینه سازی

تیم ها می توانند هزینه عملکرد را با توجه به مسائل ذکر شده در قبل ارزیابی کنند و بهترین راه حل های عملی را برای غلبه بر آنها پیاده سازی کنند. با این حال، این اغلب در عمل اتفاق نمی افتد و تصاویر ناکارآمد همچنان باعث کاهش سرعت وب می شوند. دلایل احتمالی این امر عبارتند از:

اولویت ها : توسعه دهندگان وب معمولاً روی کد، جاوا اسکریپت و بهینه سازی داده ها تمرکز می کنند. به این ترتیب، آنها ممکن است از مشکلات مربوط به تصاویر یا نحوه بهینه سازی آنها آگاه نباشند. تصاویر ایجاد شده توسط طراحان یا آپلود شده توسط کاربران ممکن است در لیست اولویت ها قرار نگیرند.
راه حل خارج از جعبه : حتی اگر توسعه دهندگان از تفاوت های ظریف بهینه سازی تصویر آگاه باشند، فقدان یک راه حل همه کاره خارج از جعبه برای چارچوب یا پشته فناوری آنها ممکن است یک عامل بازدارنده باشد.
تصاویر پویا : علاوه بر تصاویر ایستا که بخشی از برنامه هستند، تصاویر پویا توسط کاربران آپلود می شوند یا از پایگاه داده های خارجی یا CMS ها منبع می شوند. ممکن است تعیین اندازه چنین تصاویری در جایی که منبع تصویر پویا است چالش برانگیز باشد.
اضافه بار نشانه گذاری : راه حل هایی برای گنجاندن اندازه تصویر یا srcset برای اندازه های مختلف نیاز به نشانه گذاری اضافی برای هر تصویر دارد که می تواند خسته کننده باشد. ویژگی srcset در سال 2014 معرفی شد اما امروزه تنها 26.5 درصد از وب سایت ها از آن استفاده می کنند. هنگام استفاده از srcset ، توسعه دهندگان باید تصاویر را در اندازه های مختلف ایجاد کنند. ابزارهایی مانند just-gimme-an-img می توانند کمک کنند اما باید به صورت دستی برای هر تصویر استفاده شوند.
پشتیبانی از مرورگر : فرمت‌های تصویر مدرن مانند AVIF و WebP فایل‌های تصویری کوچک‌تری ایجاد می‌کنند، اما نیاز به مدیریت ویژه در مرورگرهایی دارند که از آنها پشتیبانی نمی‌کنند. توسعه دهندگان باید از استراتژی هایی مانند مذاکره محتوا یا عنصر <picture > استفاده کنند تا تصاویر به همه مرورگرها ارائه شود.
عوارض بارگذاری تنبل : تکنیک‌ها و کتابخانه‌های متعددی برای پیاده‌سازی بارگذاری تنبل برای تصاویر زیر صفحه وجود دارد. انتخاب بهترین می تواند یک چالش باشد. همچنین ممکن است توسعه دهندگان بهترین فاصله را از "فولد" برای بارگذاری تصاویر معوق ندانند. اندازه های مختلف نمای در دستگاه ها می تواند این موضوع را پیچیده تر کند.
تغییر چشم انداز : از آنجایی که مرورگرها شروع به پشتیبانی از ویژگی های جدید HTML یا CSS برای بهبود عملکرد می کنند، ممکن است ارزیابی هر یک از آنها برای توسعه دهندگان دشوار باشد. برای مثال، Chrome ویژگی اولویت واکشی را به‌عنوان نسخه آزمایشی مبدأ معرفی می‌کند. می توان از آن برای افزایش اولویت تصاویر خاص در صفحه استفاده کرد. به طور کلی، اگر چنین پیشرفت‌هایی در سطح مؤلفه ارزیابی و پیاده‌سازی شوند، توسعه‌دهندگان کار را آسان‌تر خواهند کرد.

جزء تصویر به عنوان یک راه حل

فرصت‌های موجود برای بهینه‌سازی تصاویر و چالش‌های موجود در پیاده‌سازی آن‌ها به صورت جداگانه برای هر برنامه، ما را به ایده یک جزء تصویر سوق داد. یک جزء تصویر می‌تواند بهترین شیوه‌ها را محصور کند و اجرا کند. با جایگزینی عنصر <img> با یک جزء تصویر، توسعه دهندگان می توانند مشکلات عملکرد تصویر خود را بهتر برطرف کنند.

در طول سال گذشته، ما با چارچوب Next.js برای طراحی و پیاده‌سازی مولفه Image آن کار کرده‌ایم. می توان از آن به عنوان جایگزینی برای عناصر <img> موجود در برنامه های Next.js به شرح زیر استفاده کرد.

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

مؤلفه سعی می کند مشکلات مربوط به تصویر را به طور کلی از طریق مجموعه ای غنی از ویژگی ها و اصول حل کند. همچنین شامل گزینه هایی است که به توسعه دهندگان اجازه می دهد آن را برای نیازهای مختلف تصویر سفارشی کنند.

محافظت در برابر تغییرات چیدمان

همانطور که قبلاً بحث شد، تصاویر بدون اندازه باعث تغییر طرح‌بندی می‌شوند و به CLS کمک می‌کنند. هنگام استفاده از مولفه Next.js Image، توسعه‌دهندگان باید اندازه تصویر را با استفاده از ویژگی‌های width و height ارائه دهند تا از هرگونه تغییر طرح‌بندی جلوگیری شود. اگر اندازه ناشناخته است، توسعه دهندگان باید layout=fill برای ارائه یک تصویر بدون اندازه که در داخل یک ظرف اندازه قرار می گیرد، مشخص کنند. همچنین می‌توانید از وارد کردن تصویر ثابت برای بازیابی اندازه تصویر واقعی روی هارد دیسک در زمان ساخت و گنجاندن آن در تصویر استفاده کنید.

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

از آنجایی که توسعه‌دهندگان نمی‌توانند از مولفه Image بدون اندازه استفاده کنند، طراحی تضمین می‌کند که برای در نظر گرفتن اندازه تصویر و جلوگیری از تغییر طرح‌بندی زمان صرف می‌کنند.

تسهیل پاسخگویی

برای اینکه تصاویر در همه دستگاه‌ها پاسخگو باشند، توسعه‌دهندگان باید ویژگی‌های srcset و sizes را در عنصر <img> تنظیم کنند. ما می خواستیم این تلاش را با مولفه Image کاهش دهیم. ما مولفه Next.js Image را طوری طراحی کردیم که مقادیر مشخصه را فقط یک بار در هر برنامه تنظیم کند. آنها را بر اساس حالت چیدمان بر روی تمام نمونه های مولفه Image اعمال می کنیم. ما به یک راه حل سه قسمتی رسیدیم:

ویژگی deviceSizes : این ویژگی را می توان برای پیکربندی نقاط شکست یک بار بر اساس دستگاه های مشترک در پایگاه کاربر برنامه استفاده کرد. مقادیر پیش فرض برای نقاط شکست در فایل پیکربندی گنجانده شده است.
ویژگی imageSizes : این نیز یک ویژگی قابل تنظیم است که برای دریافت اندازه های تصویر مربوط به نقاط شکست اندازه دستگاه استفاده می شود.
ویژگی layout در هر تصویر: برای نشان دادن نحوه استفاده از ویژگی های deviceSizes و imageSizes برای هر تصویر استفاده می شود. مقادیر پشتیبانی شده برای حالت چیدمان fixed ، fill ، intrinsic و responsive هستند.

وقتی تصویری با حالت‌های چیدمان پاسخگو یا پر درخواست می‌شود، Next.js تصویری را که قرار است ارائه شود بر اساس اندازه دستگاه درخواست‌کننده صفحه شناسایی می‌کند و srcset و sizes تصویر را به‌طور مناسب تنظیم می‌کند.

مقایسه زیر نشان می دهد که چگونه می توان از حالت چیدمان برای کنترل اندازه تصویر در صفحه های مختلف استفاده کرد. ما از یک تصویر نمایشی به اشتراک گذاشته شده در اسناد Next.js استفاده کرده‌ایم که در تلفن و یک لپ‌تاپ استاندارد مشاهده شده است.

تصاویر ارائه شده برای طرح بندی های مختلف
صفحه نمایش لپ تاپ	صفحه نمایش گوشی
Layout = Intrinsic: برای تناسب با عرض ظرف در درگاه های دید کوچکتر، مقیاس را کاهش می دهد. در نمای بزرگتر از اندازه ذاتی تصویر بزرگتر نمی شود. عرض کانتینر 100٪ است

Layout = Fixed: تصویر پاسخگو نیست. عرض و ارتفاع مشابه ` ثابت می شوند عنصر صرف نظر از دستگاهی که در آن رندر شده است.

Layout = Responsive: بسته به عرض کانتینر در نماهای مختلف، با حفظ نسبت ابعاد، مقیاس را کاهش دهید یا بزرگ کنید.

Layout = Fill: عرض و ارتفاع برای پر کردن ظرف اصلی کشیده شده است. (عرض `<div>` والد در این مثال روی 300*500 تنظیم شده است)

بارگذاری تنبل داخلی را ارائه دهید

مؤلفه Image به صورت پیش‌فرض راه‌حلی برای بارگذاری تنبل داخلی و عملکردی ارائه می‌کند. هنگام استفاده از عنصر <img> ، چند گزینه برای بارگذاری تنبل وجود دارد، اما همه آنها دارای اشکالاتی هستند که استفاده از آنها را دشوار می کند. یک توسعه دهنده ممکن است یکی از رویکردهای بارگذاری تنبل زیر را اتخاذ کند:

مشخصه loading را مشخص کنید: این ویژگی در همه مرورگرهای مدرن پشتیبانی می‌شود.
از Intersection Observer API استفاده کنید: ایجاد یک راه‌حل سفارشی بارگذاری تنبل نیاز به تلاش و طراحی و اجرای متفکرانه دارد. توسعه دهندگان ممکن است همیشه برای این کار وقت نداشته باشند.
وارد کردن یک کتابخانه شخص ثالث به تصاویر با بارگذاری تنبل: ممکن است تلاش بیشتری برای ارزیابی و ادغام یک کتابخانه شخص ثالث مناسب برای بارگذاری تنبل مورد نیاز باشد.

در کامپوننت Next.js Image، بارگذاری به طور پیش فرض روی "lazy" تنظیم شده است. بارگذاری تنبل با استفاده از Intersection Observer انجام می شود که در اکثر مرورگرهای مدرن موجود است. توسعه دهندگان برای فعال کردن آن نیازی به انجام کار اضافی ندارند، اما در صورت نیاز می توانند آن را غیرفعال کنند.

تصاویر مهم را از قبل بارگذاری کنید

اغلب عناصر LCP تصاویر هستند و تصاویر بزرگ می توانند LCP را به تاخیر بیندازند. ایده خوبی است که تصاویر مهم را از قبل بارگذاری کنید تا مرورگر بتواند آن تصویر را زودتر کشف کند. هنگام استفاده از عنصر <img> ، یک راهنمایی پیش بارگذاری ممکن است به شرح زیر در سر HTML گنجانده شود.

<link rel="preload" as="image" href="important.png">

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

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

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

میزبانی تصویر با کارایی بالا را تشویق کنید

CDN های تصویر برای بهینه سازی خودکار تصویر توصیه می شوند و همچنین از فرمت های تصویر مدرن مانند WebP و AVIF پشتیبانی می کنند. مؤلفه Next.js Image به طور پیش فرض از یک تصویر CDN با استفاده از معماری لودر استفاده می کند. مثال زیر نشان می دهد که لودر اجازه می دهد تا CDN را در فایل پیکربندی Next.js پیکربندی کند.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

با این پیکربندی، توسعه دهندگان می توانند از URL های نسبی در منبع تصویر استفاده کنند و فریم ورک URL نسبی را با مسیر CDN به هم پیوند می دهد تا URL مطلق را ایجاد کند. CDN های تصویر محبوب مانند Imgix ، Cloudinary ، و Akamai پشتیبانی می شوند. این معماری از استفاده از یک ارائه‌دهنده ابر سفارشی با اجرای یک تابع loader سفارشی برای برنامه پشتیبانی می‌کند.

از تصاویر خود میزبانی شده پشتیبانی کنید

ممکن است شرایطی وجود داشته باشد که وب سایت ها نتوانند از CDN های تصویر استفاده کنند. در چنین مواردی، یک جزء تصویر باید از تصاویر خود میزبان پشتیبانی کند. مؤلفه Next.js Image از یک بهینه ساز تصویر به عنوان یک سرور تصویر داخلی استفاده می کند که یک API شبیه CDN ارائه می کند. بهینه ساز از شارپ برای تبدیل تصویر تولیدی در صورت نصب روی سرور استفاده می کند. این کتابخانه برای هر کسی که به دنبال ایجاد خط لوله بهینه سازی تصویر خود است، انتخاب خوبی است.

پشتیبانی از بارگذاری تدریجی

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

مؤلفه Next.js Image از بارگذاری تدریجی تصویر از طریق ویژگی placeholder پشتیبانی می کند. این می تواند به عنوان یک LQIP (جای نگهدار تصویر با کیفیت پایین) برای نمایش یک تصویر با کیفیت پایین یا تار در هنگام بارگیری تصویر واقعی استفاده شود.

تاثیر

با همه این بهینه‌سازی‌ها، ما شاهد موفقیت مؤلفه Next.js Image در تولید بوده‌ایم و همچنین در حال کار با سایر پشته‌های فناوری روی اجزای تصویر مشابه هستیم.

هنگامی که Leboncoin فرانت اند جاوا اسکریپت قدیمی خود را به Next.js منتقل کرد ، خط لوله تصویر خود را برای استفاده از مولفه Next.js Image ارتقاء داد. در صفحه ای که از <img> به next/image مهاجرت کرد، LCP از 2.4 به 1.7 کاهش یافت. مجموع بایت های تصویر دانلود شده برای صفحه از 663 کیلوبایت به 326 کیلوبایت رسید (با 100 کیلوبایت بایت تصویر با بارگذاری تنبل).

درس های آموخته شده

هر کسی که یک برنامه Next.js ایجاد می کند می تواند از استفاده از مولفه Next.js Image برای بهینه سازی بهره مند شود. با این حال، اگر می‌خواهید انتزاع‌های عملکردی مشابهی برای فریم‌ورک یا CMS دیگری بسازید، چند درس زیر در این مسیر آموختیم که می‌تواند مفید باشد.

سوپاپ های ایمنی می توانند بیش از آنکه فایده داشته باشند، ضرر داشته باشند

در نسخه اولیه مولفه Next.js Image، ما یک ویژگی unsized ارائه کردیم که به توسعه‌دهندگان اجازه می‌داد از اندازه مورد نیاز عبور کرده و از تصاویر با ابعاد نامشخص استفاده کنند. ما فکر می‌کردیم که این امر در مواردی ضروری است که نمی‌توان از قبل ارتفاع یا عرض تصویر را دانست. با این حال، متوجه شدیم که کاربران ویژگی unsized را در مسائل GitHub به عنوان یک راه حل جامع برای مشکلات مربوط به اندازه مورد نیاز توصیه می کنند، حتی در مواردی که می توانند مشکل را به روش هایی حل کنند که CLS را بدتر نمی کند. متعاقباً ویژگی unsized را منسوخ و حذف کردیم.

اصطکاک مفید را از مزاحمت بیهوده جدا کنید

شرط لازم برای اندازه یک تصویر مثالی از "اصطکاک مفید" است. استفاده از کامپوننت را محدود می کند، اما در ازای آن، مزایای عملکردی بزرگی را ارائه می دهد. اگر کاربران تصویر واضحی از مزایای عملکرد بالقوه داشته باشند، به راحتی این محدودیت را می پذیرند. بنابراین، شایان ذکر است که این مبادله در اسناد و سایر مطالب منتشر شده در مورد مؤلفه توضیح داده شود.

با این حال، می‌توانید راه‌حل‌هایی برای چنین اصطکاک‌هایی بدون به خطر انداختن عملکرد پیدا کنید. به عنوان مثال، در طول توسعه مولفه Next.js Image، شکایت هایی دریافت کردیم مبنی بر اینکه جستجوی اندازه برای تصاویر ذخیره شده محلی آزار دهنده است. ما واردات تصویر ثابت را اضافه کردیم که این فرآیند را با بازیابی خودکار ابعاد برای تصاویر محلی در زمان ساخت با استفاده از افزونه Babel ساده می کند.

تعادلی بین ویژگی‌های راحتی و بهینه‌سازی عملکرد ایجاد کنید

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

یک نقشه راه برای ویژگی هایی تنظیم کنید تا پذیرش را افزایش دهد

ساختن راه حلی که برای همه موقعیت ها به خوبی کار کند بسیار دشوار است. می‌تواند وسوسه‌انگیز باشد که چیزی را طراحی کنید که برای 75 درصد افراد خوب کار کند و سپس به 25 درصد دیگر بگویید که "در این موارد، این جزء برای شما مناسب نیست."

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

توصیه می شود یک نقشه راه برای جزء خود داشته باشید که تمام موارد استفاده معقول را در دراز مدت پوشش دهد. همچنین کمک می‌کند که در مستندات درباره مواردی که پشتیبانی نمی‌شود و چرا به منظور تعیین انتظارات در مورد مشکلاتی که مؤلفه برای حل آنها قرار دارد، صریح باشد.

نتیجه گیری

استفاده و بهینه سازی تصویر پیچیده است. توسعه دهندگان باید تعادل بین عملکرد و کیفیت تصاویر را بیابند و در عین حال تجربه کاربری عالی را تضمین کنند. این امر بهینه سازی تصویر را به یک تلاش پرهزینه و تاثیرگذار تبدیل می کند.

به‌جای اینکه هر برنامه هر بار چرخ را دوباره اختراع کند، به الگوی بهترین روش‌ها رسیدیم که توسعه‌دهندگان، فریم‌ورک‌ها و دیگر پشته‌های فناوری می‌توانند از آن به عنوان مرجع برای پیاده‌سازی‌های خود استفاده کنند. این تجربه واقعاً ارزشمند خواهد بود زیرا ما از سایر چارچوب‌ها در اجزای تصویر آنها پشتیبانی می‌کنیم.

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

یک جزء تصویر بهترین شیوه های عملکرد را در بر می گیرد و راه حلی خارج از جعبه برای بهینه سازی تصاویر ارائه می دهد.

Leena Sohoni

Kara Erickson

Alex Castle

جزء تصویر به عنوان یک پسوند تصاویر

مسائل و فرصت های بهینه سازی تصویر

تصاویر بدون اندازه به CLS آسیب می رسانند

<img src="flower.jpg" width="360" height="240">

تصاویر بزرگ می توانند به LCP آسیب بزنند

فشرده سازی ضعیف تصویر می تواند به LCP آسیب برساند

بارگذاری تصاویر غیر ضروری به LCP آسیب می رساند

چالش های بهینه سازی

اولویت ها : توسعه دهندگان وب معمولاً روی کد، جاوا اسکریپت و بهینه سازی داده ها تمرکز می کنند. به این ترتیب، آنها ممکن است از مشکلات مربوط به تصاویر یا نحوه بهینه سازی آنها آگاه نباشند. تصاویر ایجاد شده توسط طراحان یا آپلود شده توسط کاربران ممکن است در لیست اولویت ها قرار نگیرند.
راه حل خارج از جعبه : حتی اگر توسعه دهندگان از تفاوت های ظریف بهینه سازی تصویر آگاه باشند، فقدان یک راه حل همه کاره خارج از جعبه برای چارچوب یا پشته فناوری آنها ممکن است یک عامل بازدارنده باشد.
تصاویر پویا : علاوه بر تصاویر ایستا که بخشی از برنامه هستند، تصاویر پویا توسط کاربران آپلود می شوند یا از پایگاه داده های خارجی یا CMS ها منبع می شوند. ممکن است تعیین اندازه چنین تصاویری در جایی که منبع تصویر پویا است چالش برانگیز باشد.
اضافه بار نشانه گذاری : راه حل هایی برای گنجاندن اندازه تصویر یا srcset برای اندازه های مختلف نیاز به نشانه گذاری اضافی برای هر تصویر دارد که می تواند خسته کننده باشد. ویژگی srcset در سال 2014 معرفی شد اما امروزه تنها 26.5 درصد از وب سایت ها از آن استفاده می کنند. هنگام استفاده از srcset ، توسعه دهندگان باید تصاویر را در اندازه های مختلف ایجاد کنند. ابزارهایی مانند just-gimme-an-img می توانند کمک کنند اما باید به صورت دستی برای هر تصویر استفاده شوند.
پشتیبانی از مرورگر : فرمت‌های تصویر مدرن مانند AVIF و WebP فایل‌های تصویری کوچک‌تری ایجاد می‌کنند، اما نیاز به مدیریت ویژه در مرورگرهایی دارند که از آنها پشتیبانی نمی‌کنند. توسعه دهندگان باید از استراتژی هایی مانند مذاکره محتوا یا عنصر <picture > استفاده کنند تا تصاویر به همه مرورگرها ارائه شود.
عوارض بارگذاری تنبل : تکنیک‌ها و کتابخانه‌های متعددی برای پیاده‌سازی بارگذاری تنبل برای تصاویر زیر صفحه وجود دارد. انتخاب بهترین می تواند یک چالش باشد. همچنین ممکن است توسعه دهندگان بهترین فاصله را از "فولد" برای بارگذاری تصاویر معوق ندانند. اندازه های مختلف نمای در دستگاه ها می تواند این موضوع را پیچیده تر کند.
تغییر چشم انداز : از آنجایی که مرورگرها شروع به پشتیبانی از ویژگی های جدید HTML یا CSS برای بهبود عملکرد می کنند، ممکن است ارزیابی هر یک از آنها برای توسعه دهندگان دشوار باشد. برای مثال، Chrome ویژگی اولویت واکشی را به‌عنوان نسخه آزمایشی مبدأ معرفی می‌کند. می توان از آن برای افزایش اولویت تصاویر خاص در صفحه استفاده کرد. به طور کلی، اگر چنین پیشرفت‌هایی در سطح مؤلفه ارزیابی و پیاده‌سازی شوند، توسعه‌دهندگان کار را آسان‌تر خواهند کرد.

جزء تصویر به عنوان یک راه حل

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

محافظت در برابر تغییرات چیدمان

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

تسهیل پاسخگویی

ویژگی deviceSizes : این ویژگی را می توان برای پیکربندی نقاط شکست یک بار بر اساس دستگاه های مشترک در پایگاه کاربر برنامه استفاده کرد. مقادیر پیش فرض برای نقاط شکست در فایل پیکربندی گنجانده شده است.
ویژگی imageSizes : این نیز یک ویژگی قابل تنظیم است که برای دریافت اندازه های تصویر مربوط به نقاط شکست اندازه دستگاه استفاده می شود.
ویژگی layout در هر تصویر: برای نشان دادن نحوه استفاده از ویژگی های deviceSizes و imageSizes برای هر تصویر استفاده می شود. مقادیر پشتیبانی شده برای حالت چیدمان fixed ، fill ، intrinsic و responsive هستند.

تصاویر ارائه شده برای طرح بندی های مختلف
صفحه نمایش لپ تاپ	صفحه نمایش گوشی
Layout = Intrinsic: برای تناسب با عرض ظرف در درگاه های دید کوچکتر، مقیاس را کاهش می دهد. در نمای بزرگتر از اندازه ذاتی تصویر بزرگتر نمی شود. عرض کانتینر 100٪ است

Layout = Fixed: تصویر پاسخگو نیست. عرض و ارتفاع مشابه ` ثابت می شوند عنصر صرف نظر از دستگاهی که در آن رندر شده است.

Layout = Responsive: بسته به عرض کانتینر در نماهای مختلف، با حفظ نسبت ابعاد، مقیاس را کاهش دهید یا بزرگ کنید.

Layout = Fill: عرض و ارتفاع برای پر کردن ظرف اصلی کشیده شده است. (عرض `<div>` والد در این مثال روی 300*500 تنظیم شده است)

بارگذاری تنبل داخلی را ارائه دهید

مشخصه loading را مشخص کنید: این ویژگی در همه مرورگرهای مدرن پشتیبانی می‌شود.
از Intersection Observer API استفاده کنید: ایجاد یک راه‌حل سفارشی بارگذاری تنبل نیاز به تلاش و طراحی و اجرای متفکرانه دارد. توسعه دهندگان ممکن است همیشه برای این کار وقت نداشته باشند.
وارد کردن یک کتابخانه شخص ثالث به تصاویر با بارگذاری تنبل: ممکن است تلاش بیشتری برای ارزیابی و ادغام یک کتابخانه شخص ثالث مناسب برای بارگذاری تنبل مورد نیاز باشد.

تصاویر مهم را از قبل بارگذاری کنید

<link rel="preload" as="image" href="important.png">

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

میزبانی تصویر با کارایی بالا را تشویق کنید

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

از تصاویر خود میزبانی شده پشتیبانی کنید

پشتیبانی از بارگذاری تدریجی

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

مؤلفه تصویر بعدی. js از بارگیری مترقی برای تصویر از طریق خاصیت مکان نگهدارنده پشتیبانی می کند. این می تواند به عنوان یک LQIP (مکان نگهدارنده تصویر با کیفیت پایین) برای نمایش یک تصویر با کیفیت پایین یا تار در حالی که تصویر واقعی بارگیری می شود ، استفاده شود.

تاثیر

با استفاده از تمام این بهینه سازی ها ، ما با مؤلفه تصویر Next.js در تولید موفقیت آمیز بوده ایم و همچنین با سایر پشته های فناوری در اجزای تصویر مشابه کار می کنیم.

هنگامی که LeBoncoin میراث JavaScript خود را به Next.JS منتقل کرد ، آنها همچنین خط لوله تصویر خود را برای استفاده از مؤلفه تصویر بعدی. JS ارتقا دادند. در صفحه ای که از <img> به تصویر بعدی/تصویر مهاجرت کرده است ، LCP از 2.4 به 1.7 ثانیه کاهش یافت. کل بایت های تصویر بارگیری شده برای این صفحه از 663kb به 326kb (با 100 کیلوبایت پوند بایت های تصویر تنبل) رفت.

درس های آموخته شده

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

دریچه های ایمنی می توانند بیشتر از خوب آسیب ببینند

در انتشار اولیه مؤلفه تصویر بعدی. js ، ما یک ویژگی unsized را ارائه دادیم که به توسعه دهندگان اجازه می داد تا نیاز اندازه را دور بزنند و از تصاویر با ابعاد نامشخص استفاده کنند. ما فکر می کردیم که این امر در مواردی ضروری است که شناخت قد یا عرض تصویر از قبل غیرممکن باشد. با این حال ، ما متوجه شدیم که کاربرانی که ویژگی های unsized را در مسائل GitHub به عنوان یک راه حل همه چیز برای مشکلات مربوط به اندازه اندازه توصیه می کنند ، حتی در مواردی که می توانند مشکل را به روش هایی که CLS را بدتر نمی کنند ، حل کنند. ما متعاقباً ویژگی unsized را کاهش داده و حذف کردیم.

اصطکاک مفید را از دلخوری بی معنی جدا کنید

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

با این حال ، شما می توانید راه حل هایی برای چنین اصطکاک بدون قربانی کردن عملکرد پیدا کنید. به عنوان مثال ، در حین توسعه مؤلفه تصویر بعدی. JS ، شکایات دریافت کردیم که جستجوی اندازه برای تصاویر ذخیره شده محلی آزار دهنده است. ما واردات تصویر استاتیک را اضافه کردیم ، که این روند را با بازیابی خودکار ابعاد برای تصاویر محلی در زمان ساخت با استفاده از افزونه بابل ساده می کند.

بین ویژگی های راحتی و بهینه سازی عملکرد تعادل برقرار کنید

اگر مؤلفه تصویر شما کاری جز تحمیل "اصطکاک مفید" به کاربران خود انجام نمی دهد ، توسعه دهندگان تمایل به استفاده از آن ندارند. ما دریافتیم که اگرچه ویژگی های عملکرد مانند اندازه تصویر و تولید اتوماتیک مقادیر srcset مهمترین بودند. ویژگی های راحتی توسعه دهنده مانند بارگیری خودکار تنبل و مکان های مبهم داخلی نیز به مؤلفه تصویر بعدی علاقه مند شدند.

نقشه راه را برای ویژگی هایی برای هدایت پذیرش تنظیم کنید

ساختن راه حلی که کاملاً برای همه شرایط کار کند بسیار دشوار است. طراحی چیزی که برای 75 ٪ از افراد خوب کار می کند می تواند وسوسه انگیز باشد و سپس 25 ٪ دیگر را بگوییم که "در این موارد ، این مؤلفه برای شما مناسب نیست."

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

توصیه می شود برای مؤلفه خود نقشه راه داشته باشید که تمام موارد استفاده معقول را در دراز مدت پوشش می دهد. همچنین به صریح در مستندات در مورد آنچه پشتیبانی نمی شود و چرا برای تعیین انتظارات در مورد مشکلاتی که مؤلفه برای حل آن در نظر گرفته شده است ، کمک می کند.

نتیجه گیری

استفاده از تصویر و بهینه سازی پیچیده است. توسعه دهندگان باید ضمن اطمینان از تجربه عالی کاربر ، تعادل بین عملکرد و کیفیت تصاویر را پیدا کنند. این باعث می شود بهینه سازی تصویر به یک تلاش پر هزینه و با تأثیر بالا بپردازد.

ما به جای اینکه هر بار هر بار چرخ را دوباره اختراع کنیم ، با یک الگوی بهترین شیوه ها روبرو شدیم که توسعه دهندگان ، چارچوب ها و سایر پشته های فنی می توانند از آنها به عنوان مرجع برای پیاده سازی های خود استفاده کنند. این تجربه در واقع با پشتیبانی از سایر چارچوب ها ، در مورد اجزای تصویر آنها ، ارزشمند خواهد بود.

مؤلفه تصویر بعدی. js با موفقیت نتایج عملکرد را در برنامه های Next.js بهبود بخشیده است ، در نتیجه تجربه کاربر را تقویت می کند. ما معتقدیم که این یک الگوی عالی است که در اکوسیستم گسترده تر کار می کند ، و ما دوست داریم از توسعه دهندگان بشنویم که دوست دارند این مدل را در پروژه های خود اتخاذ کنند.

یک مؤلفه تصویر بهترین عملکرد را در بر می گیرد و یک راه حل خارج از جعبه برای بهینه سازی تصاویر ارائه می دهد.

Leena Sohoni

Kara Erickson

Alex Castle

تصاویر منبع مشترک تنگناهای عملکرد برای برنامه های وب و یک منطقه تمرکز اصلی برای بهینه سازی است. تصاویر بهینه نشده به صفحه نفخ کمک می کنند و بیش از 70 ٪ از کل وزن صفحه در بایت ها را در صدک ⁹⁰ به خود اختصاص می دهد. چندین روش برای بهینه سازی تصاویر خواستار "مؤلفه تصویر" هوشمند با راه حل های عملکردی پخته شده به عنوان یک پیش فرض است.

تیم شفق قطبی با Next.js برای ساخت یک مؤلفه چنین کار کرد. هدف ایجاد یک الگوی بهینه شده تصویر بود که توسعه دهندگان وب می توانند بیشتر سفارشی سازی کنند. این مؤلفه به عنوان یک مدل خوب عمل می کند و استانداردی را برای ساخت قطعات تصویر در سایر چارچوب ها ، سیستم های مدیریت محتوا (CMS) و پشته های فنی تعیین می کند. ما در یک مؤلفه مشابه برای nuxt.js همکاری کرده ایم و در نسخه های آینده با Angular در مورد بهینه سازی تصویر کار می کنیم. این پست در مورد چگونگی طراحی مؤلفه تصویر بعدی.JS و درسهایی که در طول مسیر آموخته ایم ، بحث می کند.

مؤلفه تصویر به عنوان پسوند تصاویر

مسائل و فرصت های بهینه سازی تصویر

تصاویر نه تنها بر عملکرد ، بلکه بر تجارت نیز تأثیر می گذارد. تعداد تصاویر در یک صفحه دومین پیش بینی کننده اصلی تبدیل کاربرانی بود که از وب سایت ها بازدید می کردند. جلساتی که در آن کاربران تبدیل شده اند 38 ٪ تصویر کمتری نسبت به جلساتی دارند که در آن تبدیل نشده اند. Lighthouse فرصت های مختلفی را برای بهینه سازی تصاویر و بهبود ویتامین های وب به عنوان بخشی از بهترین حسابرسی شیوه های خود ذکر می کند. برخی از زمینه های مشترک که تصاویر می توانند بر روی ویتای اصلی وب تأثیر بگذارند ، و تجربه کاربر به شرح زیر است.

تصاویر غیرمستقیم به CLS آسیب می رسانند

تصاویر ارائه شده بدون اندازه مشخص شده آنها می توانند باعث بی ثباتی طرح شوند و به تغییر طرح تجمعی بالا ( CLS ) کمک کنند. تنظیم ویژگی های width و height در عناصر <img> می تواند به جلوگیری از تغییر طرح کمک کند. به عنوان مثال:

<img src="flower.jpg" width="360" height="240">

عرض و ارتفاع باید به گونه ای تنظیم شود که نسبت ابعاد تصویر ارائه شده نزدیک به نسبت ابعاد طبیعی آن باشد. تفاوت معنی داری در نسبت ابعاد می تواند منجر به تحریف تصویر شود. یک خاصیت نسبتاً جدید که به شما امکان می دهد نسبت به جنبه در CSS مشخص کنید می تواند در ضمن جلوگیری از CLS ، به اندازه تصاویر پاسخگو باشد.

تصاویر بزرگ می تواند به LCP آسیب برساند

هرچه اندازه پرونده یک تصویر بزرگتر باشد ، بارگیری آن طولانی تر خواهد بود. یک تصویر بزرگ می تواند تصویر "Hero" برای صفحه یا مهمترین عنصر در Viewport مسئول ایجاد بزرگترین رنگ محتوا ( LCP ) باشد. تصویری که بخشی از محتوای مهم است و مدت زمان طولانی برای بارگیری طول می کشد ، LCP را به تأخیر می اندازد.

در بسیاری از موارد ، توسعه دهندگان می توانند از طریق فشرده سازی بهتر و استفاده از تصاویر پاسخگو ، اندازه تصویر را کاهش دهند. ویژگی های srcset و sizes از عنصر <img> به ارائه پرونده های تصویری با اندازه های مختلف کمک می کند. مرورگر می تواند بسته به اندازه و وضوح صفحه ، مناسب را انتخاب کند.

فشرده سازی تصویر ضعیف می تواند به LCP آسیب برساند

قالب های مدرن تصویر مانند AVIF یا WebP می توانند فشرده سازی بهتری نسبت به قالب های JPEG و PNG معمولاً استفاده کنند. فشرده سازی بهتر اندازه پرونده را 25 ٪ به 50 ٪ در بعضی موارد برای همان کیفیت تصویر کاهش می دهد. این کاهش منجر به بارگیری سریعتر با مصرف داده کمتر می شود. این برنامه باید قالب های تصویر مدرن را به مرورگرهایی که از این قالب ها پشتیبانی می کنند ، خدمت کند .

بارگیری تصاویر غیر ضروری به LCP آسیب می رساند

تصاویر زیر برابر یا در نمای مشاهده هنگام بارگیری صفحه به کاربر نمایش داده نمی شوند. آنها را می توان به گونه ای به تعویق انداخت که به LCP کمک نکنند و آن را به تأخیر بیندازند. بارگذاری تنبل می تواند برای بارگیری چنین تصاویر بعداً استفاده شود زیرا کاربر به سمت آنها پیمایش می کند.

چالش های بهینه سازی

تیم ها می توانند هزینه عملکرد را به دلیل موارد ذکر شده در گذشته ارزیابی کنند و بهترین راه حل های عملی را برای غلبه بر آنها اجرا کنند. با این حال ، این اغلب در عمل اتفاق نمی افتد ، و تصاویر ناکارآمد همچنان به کند شدن وب ادامه می دهند. دلایل احتمالی این امر عبارتند از:

اولویت ها : توسعه دهندگان وب معمولاً تمایل دارند روی کد ، جاوا اسکریپت و بهینه سازی داده ها تمرکز کنند. به همین ترتیب ، آنها ممکن است از مسائل مربوط به تصاویر یا نحوه بهینه سازی آنها آگاه نباشند. تصاویر ایجاد شده توسط طراحان یا بارگذاری شده توسط کاربران ممکن است در لیست اولویت ها زیاد نباشد.
راه حل خارج از جعبه : حتی اگر توسعه دهندگان از تفاوت های ظریف بهینه سازی تصویر آگاه باشند ، عدم وجود یک راه حل خارج از جعبه برای چارچوب یا پشته فنی آنها ممکن است یک عامل بازدارنده باشد.
تصاویر پویا : علاوه بر تصاویر استاتیک که بخشی از برنامه هستند ، تصاویر پویا توسط کاربران بارگذاری می شوند یا از پایگاه داده های خارجی یا CMS تهیه می شوند. ممکن است تعریف اندازه چنین تصاویری که در آن منبع تصویر پویا است ، چالش برانگیز باشد.
Overload Markup : راه حل هایی برای شامل اندازه تصویر یا srcset برای اندازه های مختلف برای هر تصویر نیاز به نشانه گذاری اضافی دارد ، که می تواند خسته کننده باشد. ویژگی srcset در سال 2014 معرفی شد اما امروز تنها 26.5 ٪ از وب سایت ها استفاده می شود. هنگام استفاده از srcset ، توسعه دهندگان باید در اندازه های مختلف تصاویر ایجاد کنند. ابزارهایی مانند Just-Gimme-An-IMG می توانند کمک کنند اما باید برای هر تصویر به صورت دستی استفاده شوند.
پشتیبانی مرورگر : فرمت های مدرن تصویر مانند AVIF و WebP فایلهای تصویری کوچکتر را ایجاد می کنند اما به مرورگرهایی که از آنها پشتیبانی نمی کنند ، نیاز به دست زدن ویژه دارند. توسعه دهندگان باید از استراتژی هایی مانند مذاکره محتوا یا عنصر <picture استفاده کنند تا تصاویر به همه مرورگرها ارائه شود.
عوارض بارگیری تنبل : چندین تکنیک و کتابخانه برای اجرای بارگیری تنبل برای تصاویر زیر در دسترس وجود دارد. انتخاب بهترین مورد می تواند یک چالش باشد. توسعه دهندگان همچنین ممکن است بهترین فاصله را از "برابر" برای بارگیری تصاویر معوق نداشته باشند. اندازه های مختلف نمای در دستگاه ها می توانند این مسئله را بیشتر پیچیده کنند.
تغییر چشم انداز : از آنجا که مرورگرها برای تقویت عملکرد از ویژگی های جدید HTML یا CSS استفاده می کنند ، ممکن است ارزیابی هر یک از آنها برای توسعه دهندگان دشوار باشد. به عنوان مثال ، Chrome ویژگی اولویت Fetch را به عنوان یک آزمایش مبدا معرفی می کند. می توان از آن برای تقویت اولویت تصاویر خاص در صفحه استفاده کرد. به طور کلی ، اگر چنین پیشرفت هایی در سطح مؤلفه ارزیابی و اجرا شود ، توسعه دهندگان راحت تر می یابند.

مؤلفه تصویر به عنوان یک راه حل

فرصت های موجود برای بهینه سازی تصاویر و چالش های اجرای جداگانه برای هر برنامه ، ما را به سمت ایده یک جزء تصویر سوق داد. یک مؤلفه تصویر می تواند بهترین شیوه ها را محاصره و اجرا کند. با جایگزینی عنصر <img> با یک مؤلفه تصویر ، توسعه دهندگان می توانند بهتر به مشکلات عملکرد تصویر خود بپردازند.

طی یک سال گذشته ، ما با چارچوب Next.js برای طراحی و پیاده سازی مؤلفه تصویر آنها کار کرده ایم. می توان از آن به عنوان جایگزینی قطره ای برای عناصر <img> موجود در برنامه های بعدی. JS به شرح زیر استفاده کرد.

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

این مؤلفه سعی می کند از طریق مجموعه ای غنی از ویژگی ها و اصول ، مشکلات مربوط به تصویر را به طور کلی برطرف کند. همچنین شامل گزینه هایی است که به توسعه دهندگان امکان می دهد آن را برای نیازهای مختلف تصویر شخصی سازی کنند.

محافظت از شیفت های چیدمان

همانطور که قبلاً مورد بحث قرار گرفت ، تصاویر غیرمستقیم باعث تغییر چیدمان می شوند و به CLS کمک می کنند. هنگام استفاده از مؤلفه تصویر Next.JS ، توسعه دهندگان باید با استفاده از ویژگی های width و height ، اندازه تصویر را ارائه دهند تا از هرگونه تغییر طرح جلوگیری کنند. اگر اندازه ناشناخته باشد ، توسعه دهندگان باید layout=fill برای ارائه یک تصویر بدون سیم که در داخل یک ظرف اندازه قرار دارد ، مشخص کنند. از طرف دیگر می توانید برای بازیابی اندازه تصویر واقعی روی هارد دیسک در زمان ساخت و ساز از واردات استاتیک استفاده کنید و آن را در تصویر گنجانده باشید.

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

از آنجا که توسعه دهندگان نمی توانند از مؤلفه Image Unsized استفاده کنند ، این طرح تضمین می کند که آنها وقت خود را برای در نظر گرفتن اندازه تصویر و جلوگیری از تغییر طرح ها می گیرند.

پاسخگویی را تسهیل کنید

برای پاسخگویی تصاویر در بین دستگاه ها ، توسعه دهندگان باید ویژگی های srcset و sizes در عنصر <img> تنظیم کنند. ما می خواستیم این تلاش را با مؤلفه تصویر کاهش دهیم. ما مؤلفه تصویر بعدی را طراحی کردیم تا مقادیر ویژگی را فقط یک بار در هر برنامه تنظیم کنیم. ما آنها را در تمام موارد مؤلفه تصویر بر اساس حالت طرح بندی اعمال می کنیم. ما با یک راه حل سه قسمتی روبرو شدیم:

deviceSizes خاصیت: این ویژگی را می توان برای پیکربندی نقاط شکست یک بار بر اساس دستگاه های رایج در پایگاه کاربر برنامه استفاده کرد. مقادیر پیش فرض برای نقاط شکست در پرونده پیکربندی گنجانده شده است.
imageSizes Properties: این همچنین یک ویژگی قابل تنظیم است که برای به دست آوردن اندازه تصویر مربوط به نقاط ضعف اندازه دستگاه استفاده می شود.
ویژگی layout در هر تصویر: از این استفاده می شود تا نحوه استفاده deviceSizes و imageSizes را برای هر تصویر نشان دهد. مقادیر پشتیبانی شده برای حالت طرح بندی fixed ، fill ، intrinsic و responsive هستند

هنگامی که یک تصویر با حالت های چیدمان پاسخگو یا پر شده است ، Next.js تصویری را که باید بر اساس اندازه دستگاه درخواست شده از صفحه ارائه شود ، مشخص می کند و srcset و sizes به طور مناسب در تصویر تنظیم می کند.

مقایسه زیر نشان می دهد که چگونه می توان از حالت طرح برای کنترل اندازه تصویر در صفحه های مختلف استفاده کرد. ما از یک تصویر نسخه ی نمایشی به اشتراک گذاشته شده در اسناد بعدی استفاده کرده ایم که از طریق تلفن و یک لپ تاپ استاندارد مشاهده شده است.

تصاویر ارائه شده برای طرح بندی های مختلف
صفحه نمایش لپ تاپ	صفحه نمایش گوشی
طرح = ذاتی: مقیاس پایین برای قرار دادن عرض کانتینر در منظره های کوچکتر. فراتر از اندازه ذاتی تصویر در نمای بزرگتر مقیاس نمی شود. عرض کانتینر 100 ٪ است

طرح = ثابت: تصویر پاسخگو نیست. عرض و ارتفاع شبیه به ` `عنصر صرف نظر از دستگاهی که در آن ارائه شده است.

طرح = پاسخگو: مقیاس پایین یا مقیاس بسته به عرض ظرف در نمای مختلف ، حفظ نسبت ابعاد.

طرح = پر: عرض و ارتفاع کشیده شده برای پر کردن ظرف والدین. (پدر و مادر `<div>` عرض در این مثال روی 300*500 تنظیم شده است)

تهیه بار تنبل داخلی

مؤلفه تصویر یک راه حل بارگذاری تنبل داخلی را به عنوان یک پیش فرض ارائه می دهد. هنگام استفاده از عنصر <img> ، چند گزینه برای بارگذاری تنبل وجود دارد ، اما همه آنها اشکالاتی دارند که باعث می شود آنها از آنها استفاده شود. یک توسعه دهنده ممکن است یکی از رویکردهای بارگیری تنبل زیر را اتخاذ کند:

ویژگی loading را مشخص کنید: این در تمام مرورگرهای مدرن پشتیبانی می شود.
از API Comportection Observer استفاده کنید: ساختن یک راه حل بارگیری تنبل سفارشی نیاز به تلاش و یک طراحی و اجرای متفکرانه دارد. توسعه دهندگان ممکن است همیشه وقت این را نداشته باشند.
وارد کردن یک کتابخانه شخص ثالث به تصاویر تنبل: برای ارزیابی و ادغام یک کتابخانه مناسب شخص ثالث برای بارگذاری تنبل ممکن است تلاش اضافی لازم باشد.

در مؤلفه تصویر بعدی. js ، بارگیری به طور پیش فرض روی "lazy" تنظیم می شود. بارگذاری تنبل با استفاده از Intersection Observer اجرا می شود که در بیشتر مرورگرهای مدرن موجود است. توسعه دهندگان لازم نیستند که برای فعال کردن آن کار اضافی انجام دهند ، اما در صورت لزوم می توانند آن را غیرفعال کنند.

تصاویر مهم را از پیش بارگذاری کنید

اغلب اوقات ، عناصر LCP تصاویر هستند و تصاویر بزرگ می توانند LCP را به تأخیر بیندازند. این ایده خوبی است که تصاویر مهم را از قبل بارگیری کنید تا مرورگر بتواند زودتر آن تصویر را کشف کند. هنگام استفاده از یک عنصر <img> ، یک اشاره از قبل ممکن است در سر HTML به شرح زیر گنجانده شود.

<link rel="preload" as="image" href="important.png">

یک مؤلفه تصویر به خوبی طراحی شده باید بدون در نظر گرفتن چارچوب مورد استفاده ، راهی برای تغییر دنباله بارگذاری تصاویر ارائه دهد. در مورد مؤلفه تصویر بعدی. JS ، توسعه دهندگان می توانند تصویری را نشان دهند که کاندیدای خوبی برای پیش بارگذاری با استفاده از ویژگی priority مؤلفه تصاویر است.

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

اضافه کردن یک ویژگی priority ، نشانه گذاری را ساده تر می کند و استفاده از آن راحت تر است. توسعه دهندگان مؤلفه تصویر همچنین می توانند گزینه هایی را برای استفاده از اکتشافی برای خودکارسازی از پیش بارگذاری برای تصاویر فوق به صورت برابر در صفحه که معیارهای خاص را برآورده می کنند ، کشف کنند.

میزبانی تصویر با کارایی بالا را تشویق کنید

CDN های تصویر برای اتوماسیون بهینه سازی تصویر توصیه می شوند و همچنین از قالب های مدرن تصویر مانند WebP و AVIF پشتیبانی می کنند. مؤلفه تصویر بعدی. js از یک CDN تصویر به طور پیش فرض با استفاده از یک معماری لودر استفاده می کند. مثال زیر نشان می دهد که لودر امکان پیکربندی CDN را در پرونده پیکربندی Next.js فراهم می کند.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

با استفاده از این پیکربندی ، توسعه دهندگان می توانند از URL های نسبی در منبع تصویر استفاده کنند و چارچوب URL نسبی را با مسیر CDN برای تولید URL مطلق جمع می کند. CDN های تصویر محبوب مانند Imgix ، Cloudinary و Akamai پشتیبانی می شوند. این معماری با اجرای یک عملکرد loader سفارشی برای برنامه ، از استفاده از ارائه دهنده ابر سفارشی پشتیبانی می کند.

از تصاویر خود میزبان پشتیبانی کنید

ممکن است شرایطی وجود داشته باشد که وب سایت ها نتوانند از CDN های تصویر استفاده کنند. در چنین مواردی ، یک مؤلفه تصویر باید از تصاویر خود میزبان پشتیبانی کند. مؤلفه تصویر Next.JS از یک بهینه ساز تصویر به عنوان یک سرور تصویر داخلی استفاده می کند که یک API شبیه CDN را فراهم می کند. در صورت نصب بر روی سرور ، بهینه ساز برای تحولات تصویر تولید از Sharp استفاده می کند. این کتابخانه برای هر کسی که به دنبال ساخت خط لوله بهینه سازی تصویر خود باشد ، انتخاب خوبی است.

از بارگیری مترقی پشتیبانی کنید

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

تاثیر

درس های آموخته شده

دریچه های ایمنی می توانند بیشتر از خوب آسیب ببینند

اصطکاک مفید را از دلخوری بی معنی جدا کنید

بین ویژگی های راحتی و بهینه سازی عملکرد تعادل برقرار کنید

نقشه راه را برای ویژگی هایی برای هدایت پذیرش تنظیم کنید

نتیجه گیری

یک مؤلفه تصویر بهترین عملکرد را در بر می گیرد و یک راه حل خارج از جعبه برای بهینه سازی تصاویر ارائه می دهد.

Leena Sohoni

Kara Erickson

Alex Castle

مؤلفه تصویر به عنوان پسوند تصاویر

مسائل و فرصت های بهینه سازی تصویر

تصاویر غیرمستقیم به CLS آسیب می رسانند

<img src="flower.jpg" width="360" height="240">

تصاویر بزرگ می تواند به LCP آسیب برساند

فشرده سازی تصویر ضعیف می تواند به LCP آسیب برساند

بارگیری تصاویر غیر ضروری به LCP آسیب می رساند

چالش های بهینه سازی

اولویت ها : توسعه دهندگان وب معمولاً تمایل دارند روی کد ، جاوا اسکریپت و بهینه سازی داده ها تمرکز کنند. به همین ترتیب ، آنها ممکن است از مسائل مربوط به تصاویر یا نحوه بهینه سازی آنها آگاه نباشند. تصاویر ایجاد شده توسط طراحان یا بارگذاری شده توسط کاربران ممکن است در لیست اولویت ها زیاد نباشد.
راه حل خارج از جعبه : حتی اگر توسعه دهندگان از تفاوت های ظریف بهینه سازی تصویر آگاه باشند ، عدم وجود یک راه حل خارج از جعبه برای چارچوب یا پشته فنی آنها ممکن است یک عامل بازدارنده باشد.
تصاویر پویا : علاوه بر تصاویر استاتیک که بخشی از برنامه هستند ، تصاویر پویا توسط کاربران بارگذاری می شوند یا از پایگاه داده های خارجی یا CMS تهیه می شوند. ممکن است تعریف اندازه چنین تصاویری که در آن منبع تصویر پویا است ، چالش برانگیز باشد.
Overload Markup : راه حل هایی برای شامل اندازه تصویر یا srcset برای اندازه های مختلف برای هر تصویر نیاز به نشانه گذاری اضافی دارد ، که می تواند خسته کننده باشد. ویژگی srcset در سال 2014 معرفی شد اما امروز تنها 26.5 ٪ از وب سایت ها استفاده می شود. هنگام استفاده از srcset ، توسعه دهندگان باید در اندازه های مختلف تصاویر ایجاد کنند. ابزارهایی مانند Just-Gimme-An-IMG می توانند کمک کنند اما باید برای هر تصویر به صورت دستی استفاده شوند.
پشتیبانی مرورگر : فرمت های مدرن تصویر مانند AVIF و WebP فایلهای تصویری کوچکتر را ایجاد می کنند اما به مرورگرهایی که از آنها پشتیبانی نمی کنند ، نیاز به دست زدن ویژه دارند. توسعه دهندگان باید از استراتژی هایی مانند مذاکره محتوا یا عنصر <picture استفاده کنند تا تصاویر به همه مرورگرها ارائه شود.
عوارض بارگیری تنبل : چندین تکنیک و کتابخانه برای اجرای بارگیری تنبل برای تصاویر زیر در دسترس وجود دارد. انتخاب بهترین مورد می تواند یک چالش باشد. توسعه دهندگان همچنین ممکن است بهترین فاصله را از "برابر" برای بارگیری تصاویر معوق نداشته باشند. اندازه های مختلف نمای در دستگاه ها می توانند این مسئله را بیشتر پیچیده کنند.
تغییر چشم انداز : از آنجا که مرورگرها برای تقویت عملکرد از ویژگی های جدید HTML یا CSS استفاده می کنند ، ممکن است ارزیابی هر یک از آنها برای توسعه دهندگان دشوار باشد. به عنوان مثال ، Chrome ویژگی اولویت Fetch را به عنوان یک آزمایش مبدا معرفی می کند. می توان از آن برای تقویت اولویت تصاویر خاص در صفحه استفاده کرد. به طور کلی ، اگر چنین پیشرفت هایی در سطح مؤلفه ارزیابی و اجرا شود ، توسعه دهندگان راحت تر می یابند.

مؤلفه تصویر به عنوان یک راه حل

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

محافظت از شیفت های چیدمان

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

پاسخگویی را تسهیل کنید

deviceSizes property: This property can be used to configure breakpoints one-time based on the devices common to the application user base. The default values for breakpoints are included in the config file.
imageSizes property: This is also a configurable property used to get the image sizes corresponding to device size breakpoints.
layout attribute in each image: This is used to indicate how to use the deviceSizes and imageSizes properties for each image. The supported values for layout mode are fixed , fill , intrinsic and responsive

When an image is requested with layout modes responsive or fill , Next.js identifies the image to be served based on the size of the device requesting the page and sets the srcset and sizes in the image appropriately.

The following comparison shows how the layout mode can be used to control the size of the image on different screens. We have used a demo image shared in the Next.js docs, viewed on a phone and a standard laptop.

Images rendered for different layouts
صفحه نمایش لپ تاپ	صفحه نمایش گوشی
Layout = Intrinsic: Scales down to fit the container's width on smaller viewports. Does not scale up beyond the image's intrinsic size on a larger viewport. Container width is at 100%

Layout = Fixed: Image is not responsive. Width and height are fixed similar to ` ` element irrespective of the device where it is rendered.

Layout = Responsive: Scale down or scale up depending on the width of the container on different viewports, maintaining aspect ratio.

Layout = Fill: Width and height stretched to fill the parent container. (Parent `<div>` width is set to 300*500 in this example)

Provide built-in lazy-loading

The Image component provides a built-in, performant lazy loading solution as a default. When using the <img> element, there are a few options for lazy loading, but they all have drawbacks that make them tricky to use. A developer might adopt one of the following lazy loading approaches:

Specify the loading attribute: This is supported on all modern browsers .
Use the Intersection Observer API : Building a custom lazy-loading solution requires effort and a thoughtful design and implementation. Developers may not always have the time for this.
Import a third-party library to lazy-load images: Additional effort may be required to evaluate and integrate a suitable third-party library for lazy loading.

In the Next.js Image component, loading is set to "lazy" by default. Lazy loading is implemented using Intersection Observer, which is available on most modern browsers . Developers are not required to do anything extra to enable it, but they can disable it when needed.

Preload important images

Quite often, LCP elements are images, and large images can delay LCP. It is a good idea to preload critical images so the browser can discover that image sooner. When using an <img> element, a preload hint may be included in the HTML head as follows.

<link rel="preload" as="image" href="important.png">

A well-designed image component should offer a way to tweak the loading sequence of images, regardless of the framework used. In the case of the Next.js Image component, developers can indicate an image that is a good candidate for preload using the priority attribute of the images component.

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

Adding a priority attribute simplifies markup and is more convenient to use. Image component developers can also explore options to apply heuristics to automate preloading for above-the-fold images on the page that meet specific criteria.

Encourage high-performance image hosting

Image CDNs are recommended for automating image optimization, and they also support modern image formats like WebP and AVIF. The Next.js Image component uses an image CDN by default using a loader architecture . The following example shows that the loader allows for configuration of the CDN in the Next.js config file.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

With this configuration, developers can use relative URLs in the image source, and the framework will concatenate the relative URL with the CDN path to generate the absolute URL. Popular image CDNs like Imgix , Cloudinary , and Akamai are supported. The architecture supports the use of a custom cloud provider by implementing a custom loader function for the app.

Support self-hosted images

There may be situations where websites cannot use image CDNs. In such cases, an image component must support self-hosted images. The Next.js Image component uses an image optimizer as a built-in image server that provides a CDN-like API. The optimizer uses Sharp for production image transformations if it is installed on the server. This library is a good choice for anyone looking to build their own image optimization pipeline.

Support progressive loading

Progressive loading is a technique used to hold users' interest by displaying a placeholder image usually of significantly lower quality while the actual image loads. It improves perceived performance and enhances the user experience. It can be used in combination with lazy loading for below-the-fold images or for above-the-fold images.

The Next.js Image component supports progressive loading for the image through the placeholder property. This can be used as an LQIP (Low-quality image placeholder) for displaying a low-quality or blurred image while the actual image loads.

تاثیر

With all these optimizations incorporated, we have seen success with the Next.js Image component in production and are also working with other tech stacks on similar image components.

When Leboncoin migrated their legacy JavaScript frontend to Next.js , they also upgraded their image pipeline to use the Next.js Image component. On a page that migrated from <img> to next/image, LCP went down from 2.4s to 1.7s. The total image bytes downloaded for the page went from 663kB to 326kB (with ~100kB of lazy-loaded image bytes).

درس های آموخته شده

Anyone creating a Next.js app can benefit from using the Next.js Image component for optimization. However, if you want to build similar performance abstractions for another framework or CMS, the following are a few lessons we learned along the way that could be helpful.

Safety valves can cause more harm than good

In an early release of the Next.js Image component, we provided a unsized attribute that allowed developers to bypass the sizing requirement, and use images with unspecified dimensions. We thought this would be a necessary in instances where it was impossible to know the image's height or width in advance. However, we noticed users recommending the unsized attribute in GitHub issues as a catch-all solution to problems with the sizing requirement, even in cases where they could solve the problem in ways that didn't worsen CLS. We subsequently deprecated and removed the unsized attribute.

Separate useful friction from pointless annoyance

The requirement for sizing an image is an example of "useful friction." It restricts the use of the component, but it provides outsized performance benefits in exchange. Users will readily accept the constraint if they have a clear picture of the potential performance benefits. Therefore, it is worthwhile to explain this tradeoff in the documentation and other published material about the component.

However, you can find workarounds for such friction without sacrificing performance. For example, during the development of the Next.js Image component, we received complaints that it was annoying to look up sizes for locally stored images. We added static image imports , which streamline this process by automatically retrieving dimensions for local images at build time using a Babel plugin.

Strike a balance between convenience features and performance optimizations

If your image component does nothing but impose "useful friction" on its users, developers will tend to not want to use it. We found that although performance features like image sizing and automatic generation of srcset values were the most important. Developer-facing convenience features like automatic lazy loading and built-in blurry placeholders also drove interest in the Next.js Image component.

Set a roadmap for features to drive adoption

Building a solution that works perfectly for all situations is very difficult. It can be tempting to design something that works well for 75% of people and then tell the other 25% that "in these cases, this component isn't for you."

In practice, this strategy turns out to be at odds with your goals as a component designer. You want developers to adopt your component in order to benefit from its performance benefits. This is difficult to do if there is a contingent of users that are unable to migrate and feel left out of the conversation. They are likely to express disappointment, leading to negative perceptions that affect adoption.

It is advisable to have a roadmap for your component that covers all reasonable use cases over the long term. It also helps to be explicit in the documentation about what isn't supported and why in order to set expectations about the problems the component is intended to solve.

نتیجه گیری

Image usage and optimization is complicated. Developers have to find the balance between performance and quality of images while ensuring a great user experience. This makes image optimization a high-cost, high-impact endeavor.

Instead of having each app reinvent the wheel every time, we came up with a best practices template that developers, frameworks, and other tech-stacks could use as a reference for their own implementations. This experience will indeed prove valuable as we support other frameworks, on their image components.

The Next.js Image component has successfully improved performance outcomes in Next.js applications, thereby enhancing the user experience. We believe that it's a great model that would work well in the broader ecosystem, and we would love to hear from developers who would like to adopt this model in their projects.

جز در مواردی که غیر از این ذکر شده باشد،‌محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشی‌های سایت Google Developers‏ مراجعه کنید. جاوا علامت تجاری ثبت‌شده Oracle و/یا شرکت‌های وابسته به آن است.

تاریخ آخرین به‌روزرسانی 2021-10-25 به‌وقت ساعت هماهنگ جهانی.