این صفحه به‌وسیله ‏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 بهبود بخشیده است ، در نتیجه تجربه کاربر را تقویت می کند. ما معتقدیم که این یک الگوی عالی است که در اکوسیستم گسترده تر کار می کند ، و ما دوست داریم از توسعه دهندگان بشنویم که دوست دارند این مدل را در پروژه های خود اتخاذ کنند.