کمی بیش از یک سال پیش تیم Chrome Aurora دستورالعمل Angular NgOptimizedImage را راه‌اندازی کرد. این دستورالعمل در درجه اول بر بهبود عملکرد متمرکز است، همانطور که با معیارهای Core Web Vitals اندازه گیری می شود. این بهینه‌سازی‌های رایج تصویر و بهترین شیوه‌ها را در یک API رو به رو کاربر قرار می‌دهد که خیلی پیچیده‌تر از یک عنصر <img> استاندارد نیست.
در سال 2023، ما این دستورالعمل را با ویژگی های جدید بهبود بخشیده ایم. این پست مهم‌ترین ویژگی‌های جدید را با تأکید بر اینکه چرا اولویت‌بندی هر ویژگی را انتخاب کرده‌ایم و اینکه چگونه می‌تواند به بهبود عملکرد برنامه‌های Angular کمک کند، توضیح می‌دهد.
ویژگی های جدید
NgOptimizedImage در طول زمان به طور قابل توجهی بهبود یافته است، از جمله ویژگی های جدید زیر.
حالت پر کردن
اندازه‌گذاری تصاویر با ارائه ویژگی width و height یک بهینه‌سازی بسیار مهم برای کاهش جابجایی طرح‌بندی است، زیرا مرورگرها باید نسبت ابعاد تصویر را بدانند تا فضا را برای آن ذخیره کنند. با این حال، اندازه‌گیری تصاویر برای توسعه‌دهندگان برنامه‌ها کار اضافی است و در برخی موارد استفاده از تصویر منطقی نیست.
کمک به حل این تنش، اولین ویژگی اصلی است که به مولفه تصویر پس از پیش‌نمایش برنامه‌نویس اضافه شده است: حالت پر کردن . این راهی است که توسعه دهندگان می توانند تصاویر را بدون اندازه گیری صریح و بدون تغییر طرح بندی اضافه کنند.
در حالت پر کردن، نیاز به اندازه تصویر غیرفعال می شود و تصویر به طور خودکار برای پر کردن عنصر حاوی آن استایل بندی می شود. این نسبت تصویر یک تصویر را از فضایی که در صفحه اشغال می کند جدا می کند و به شما کنترل بیشتری بر نحوه قرار گرفتن تصاویر در طرح بندی صفحه شما می دهد.
حالت Fill از NgOptimizedImage به عنوان جایگزینی با عملکرد بهتر برای ویژگی background-image css استفاده می‌کند. یک تصویر را در داخل <div> یا عنصر دیگری قرار دهید که دارای استایل background-image باشد، سپس حالت پر کردن را فعال کنید، همانطور که در مثال کد قبلی نشان داده شد. برای کنترل نحوه قرارگیری تصویر در پس‌زمینه از ویژگی‌های object-fit و object-position CSS در <div> استفاده کنید.
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
نسل Srcset
یکی از موثرترین تکنیک‌های بهینه‌سازی تصویر، استفاده از ویژگی srcset برای اطمینان از بارگیری تصاویر با اندازه مناسب برای هر دستگاهی است که به برنامه شما دسترسی دارد. استفاده از srcset در سراسر برنامه می تواند از هدر رفتن پهنای باند جلوگیری کند و LCP Core Web Vital شما را به طور قابل ملاحظه ای بهبود بخشد.
نقطه ضعف ویژگی srcset این است که پیاده سازی آن می تواند دشوار باشد. نوشتن دستی مقادیر srcset به معنای افزودن چندین خط نشانه گذاری به هر عنصر تصویر در برنامه شما است که با چندین URL سفارشی برای هر srcset تکمیل می شود. شما همچنین باید در مورد مجموعه ای از نقاط شکست تصمیم بگیرید، که پیچیده است، زیرا آنها می توانند هم تراکم صفحه و هم اندازه درگاه دید دستگاه های رایج را نشان دهند.
به همین دلیل است که افزودن تولید خودکار srcset به دستورالعمل NgOptimizedImage یک نقطه عطف مهم پس از راه اندازی بود. با استفاده از این افزونه، هر برنامه کاربردی با استفاده از CDN که از تغییر اندازه تصویر پشتیبانی می کند، می تواند srcset های کامل و قابل تنظیم به طور خودکار به هر تصویری که با دستورالعمل NgOptimizedImage تولید می شود اضافه شود.
ما یک API ساده برای تنظیم ویژگی sizes اضافه کرده‌ایم که برای اطمینان از اینکه هر تصویر نوع صحیح srcset را دریافت می‌کند استفاده می‌شود. اگر ویژگی sizes درج نمی‌کنید، می‌دانیم که تصویر باید اندازه ثابت باشد و باید یک مجموعه src وابسته به چگالی داشته باشد، مانند شکل زیر:
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
این نوع srcset تضمین می کند که تصاویر در اندازه ای ارائه می شوند که تراکم پیکسل دستگاه کاربر را در نظر می گیرد.
از سوی دیگر، اگر ویژگی sizes وارد کنید، NgOptimizedImage یک srcset پاسخگو ایجاد می کند که شامل نقاط شکست برای بسیاری از اندازه های رایج دستگاه و تصویر است، با استفاده از این لیست پیش فرض نقاط شکست:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
تولید پیش اتصال
برای بهبود LCP، کاهش زمانی که کاربران شما صرف دانلود تصویر LCP می‌کنند بسیار مهم است. در بخش قبل، دیدید که چگونه srcset می تواند با انتقال فایل های تصویری کوچکتر کمک کند، اما یک بهینه سازی به همان اندازه مهم این است که انتقال را در اسرع وقت شروع کنید. یکی از راه‌های انجام این کار، استفاده از برچسب‌های link rel="preconnect" برای شروع سریع اتصال به دامنه تصویر شما است.
از همان ابتدا، NgOptimizedImage هشدار داده است که اگر نتوانید از قبل به دامنه تصویر LCP خود متصل شوید، اما اخطار راه حل ایده آل نیست – ما ترجیح می دهیم فقط مشکل را برای شما حل کنیم. و این دقیقاً همان کاری است که NgOptimizedImage اکنون با تولید پیش اتصال خودکار انجام می دهد.
برای پشتیبانی از این ویژگی، از تحلیل کد ایستا برای شناسایی دامنه‌های تصویر در بارکننده‌های NgOptimizedImage استفاده می‌کنیم و به‌طور خودکار برچسب‌های پیوند پیش‌اتصال را برای آن دامنه‌ها ایجاد می‌کنیم. هنوز ممکن است مواردی وجود داشته باشد که پیوندهای پیش اتصال دستی مورد نیاز باشد، اما برای اکثر کاربران، پیش اتصال خودکار به معنای یک مرحله کمتر برای عملکرد خوب تصویر است.
پشتیبانی پیشرفته از لودرهای سفارشی
یکی از عناصر کلیدی NgOptimizedImage معماری لودر است که به دستورالعمل اجازه می دهد تا به طور خودکار URL هایی را ایجاد کند که مطابق با CDN تصویر برنامه هستند. مجموعه ای از لودرهای داخلی برای CDN های پرکاربرد گنجانده شده است. ما همچنین استفاده از لودرهای سفارشی را ارائه می دهیم که به شما امکان می دهد NgOptimizedImage را با تقریباً هر راه حل میزبانی تصویر ادغام کنید.
در زمان راه اندازی، این لودرهای سفارشی از نظر دامنه محدود بودند و فقط می توانستند ویژگی width را از عنصر تصویر بخوانند. در پاسخ به بازخورد کاربر، ما پشتیبانی از ساختار داده loaderParams قابل تنظیم را اضافه کردیم که اجازه می‌دهد داده‌های دلخواه از عنصر تصویر به لودر سفارشی منتقل شوند. با گسترش، لودرهای سفارشی می توانند به همان اندازه ساده یا پیچیده باشند که زیرساخت تصویر یک برنامه مورد نیاز است.
مثال زیر نشان می‌دهد که چگونه یک بارکننده سفارشی ساده می‌تواند از loaderParams API برای انتخاب بین دو دامنه تصویر جایگزین استفاده کند:
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
نمونه‌ای از یک لودر سفارشی پیچیده‌تر در مستندات Angular موجود است.
راهنمای گسترده برای عملکرد تصویر
تاکنون، هر هشدار عملکرد تصویری که به Angular اضافه کرده‌ایم بخشی از دستورالعمل NgOptimizedImage بوده است. اگر از دستورالعمل در برنامه استفاده نمی کنید، هیچ راهنمایی در مورد مسائل عملکرد تصویر دریافت نخواهید کرد.
در Angular 17، ما در حال گسترش دامنه راهنمای عملکرد تصویر هستیم تا همه برنامه‌های Angular را شامل شود. اکنون، اگر الگوهای تصویری را شناسایی کنیم که می‌دانیم اشتباهاتی آسیب‌رسان به عملکرد هستند، مانند بارگیری تنبل تصویر LCP یا دانلود فایلی که برای صفحه خیلی بزرگ است، به شما اطلاع می‌دهیم، حتی اگر اینطور نباشید. با استفاده از NgOptimizedImage.
عملکرد تصویر برای همه برنامه‌ها مهم است و ما هیجان‌زده هستیم که به ساخت نرده‌های محافظ برای کمک به جلوگیری از اشتباهات رایج در برنامه‌های Angular ادامه دهیم.
چشم به راه است
ما در حال حاضر سخت در حال توسعه مجموعه بعدی از ویژگی ها برای NgOptimizedImage هستیم. در حالی که عملکرد تصویر دغدغه اصلی ما باقی می ماند، ما همچنین می خواهیم ویژگی هایی را اضافه کنیم که تجربه توسعه دهندگان را بهبود می بخشد تا مطمئن شویم که NgOptimizedImage گزینه جذابی برای گنجاندن تصاویر در برنامه های Angular باقی می ماند.
یکی از ویژگی‌هایی که برای ما اولویت دارد، مکان‌نماهای تصویر است. اینها معمولاً برای بهتر جلوه دادن بارگذاری تصویر در برنامه های کاربردی وب استفاده می شوند، اما در صورت اجرای نادرست می توانند به عملکرد آسیب برسانند. ما امیدواریم که بتوانیم یک سیستم مکان نگهدار تصویر با عملکرد اول در NgOptimizedImage ایجاد کنیم. برای اطلاعیه های بیشتر با وبلاگ ما همراه باشید!