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

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

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 اعمال می کنیم. ما به یک راه حل سه قسمتی رسیدیم:

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

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

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

تصاویر ارائه شده برای طرح بندی های مختلف

صفحه نمایش لپ تاپ	صفحه نمایش گوشی
Layout = Intrinsic: برای تناسب با عرض ظرف در درگاه های دید کوچکتر، مقیاس را کاهش می دهد. در نمای بزرگتر از اندازه ذاتی تصویر بزرگتر نمی شود. عرض کانتینر 100٪ است
Layout = Fixed: تصویر پاسخگو نیست. عرض و ارتفاع مشابه ` ثابت می شوند عنصر صرف نظر از دستگاهی که در آن رندر شده است.
Layout = Responsive: بسته به عرض کانتینر در نماهای مختلف، با حفظ نسبت ابعاد، مقیاس را کاهش دهید یا بزرگ کنید.
Layout = Fill: عرض و ارتفاع برای پر کردن ظرف اصلی کشیده شده است. (والدین ` عرض در این مثال روی 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 بهبود بخشیده است و در نتیجه تجربه کاربر را بهبود می بخشد. ما معتقدیم که این یک مدل عالی است که در اکوسیستم گسترده‌تر به خوبی کار می‌کند، و ما دوست داریم از توسعه‌دهندگانی که مایلند از این مدل در پروژه‌های خود استفاده کنند، بشنویم.