ঠিক এক বছরেরও বেশি আগে Chrome Aurora টিম Angular NgOptimizedImage নির্দেশিকা চালু করেছে। কোর ওয়েব ভাইটালস মেট্রিক্স দ্বারা পরিমাপ করা হিসাবে নির্দেশিকাটি মূলত কর্মক্ষমতা উন্নত করার উপর দৃষ্টি নিবদ্ধ করে। এটি সাধারণ ইমেজ অপ্টিমাইজেশান এবং সর্বোত্তম অনুশীলনগুলিকে একটি ব্যবহারকারী-মুখী API তে বান্ডিল করে যা একটি আদর্শ <img> উপাদানের চেয়ে বেশি জটিল নয়।
2023 সালে, আমরা নতুন বৈশিষ্ট্যগুলির সাথে নির্দেশিকাটিকে উন্নত করেছি। এই পোস্টটি সেই নতুন বৈশিষ্ট্যগুলির মধ্যে সর্বাধিক উল্লেখযোগ্য বর্ণনা করে, কেন আমরা প্রতিটি বৈশিষ্ট্যকে অগ্রাধিকার দিতে বেছে নিয়েছি এবং এটি কীভাবে কৌণিক অ্যাপ্লিকেশনগুলির কার্যকারিতা উন্নত করতে সহায়তা করতে পারে তার উপর জোর দিয়ে।
নতুন বৈশিষ্ট
NgOptimizedImage সময়ের সাথে সাথে উল্লেখযোগ্যভাবে উন্নত হয়েছে, নিম্নলিখিত নতুন বৈশিষ্ট্যগুলি সহ।
ফিল মোড
একটি width এবং height বৈশিষ্ট্য প্রদান করে আপনার চিত্রগুলিকে আকার দেওয়া লেআউট শিফট হ্রাস করার জন্য একটি অত্যন্ত গুরুত্বপূর্ণ অপ্টিমাইজেশান, কারণ ব্রাউজারগুলিকে এটির জন্য জায়গা সংরক্ষণ করার জন্য চিত্রটির আকৃতির অনুপাত জানতে হবে৷ যাইহোক, ইমেজ সাইজ করা অ্যাপ্লিকেশন ডেভেলপারদের জন্য অতিরিক্ত কাজ, এবং কিছু ইমেজ ব্যবহারের ক্ষেত্রে এর অর্থ হয় না।
এই উত্তেজনা সমাধানে সাহায্য করা হল প্রথম প্রধান বৈশিষ্ট্য যা ইমেজ কম্পোনেন্ট পোস্ট-ডেভেলপার প্রিভিউতে যোগ করা হয়েছে: ফিল মোড । এটি ডেভেলপারদের স্পষ্টভাবে আকার না করে এবং লেআউট শিফট না করেই ছবিগুলিকে অন্তর্ভুক্ত করার একটি উপায়৷
ফিল মোডের সাথে, ইমেজ সাইজিং প্রয়োজনীয়তা অক্ষম করা হয়, এবং ইমেজটি স্বয়ংক্রিয়ভাবে স্টাইল করা হয় যাতে এতে থাকা উপাদানটি পূরণ করা যায়। এটি একটি চিত্রের আকৃতির অনুপাতকে পৃষ্ঠায় যে স্থান দখল করে তা থেকে দ্বিগুণ করে এবং আপনার পৃষ্ঠার বিন্যাসে চিত্রগুলি কীভাবে ফিট হবে তার উপর আপনাকে আরও বেশি নিয়ন্ত্রণ দেয়৷
ফিল মোড NgOptimizedImage ব্যবহার করে background-image সিএসএস প্রপার্টির একটি ভালো-পারফর্মিং বিকল্প হিসেবে। <div> বা অন্য উপাদানের ভিতরে একটি ছবি রাখুন যাতে background-image স্টাইলিং থাকে, তারপর ফিল মোড সক্ষম করুন, যেমনটি পূর্ববর্তী কোড উদাহরণে দেখানো হয়েছে। ব্যাকগ্রাউন্ডে চিত্রটি কীভাবে অবস্থান করবে তা নিয়ন্ত্রণ করতে <div> এ object-fit এবং object-position CSS বৈশিষ্ট্যগুলি ব্যবহার করুন।
// 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 কোর ওয়েব ভাইটালকে উল্লেখযোগ্যভাবে উন্নত করতে পারে।
srcset বৈশিষ্ট্যের নেতিবাচক দিক হল এটি বাস্তবায়ন করা কষ্টকর হতে পারে। ম্যানুয়ালি srcset মান লেখার অর্থ হল আপনার অ্যাপের প্রতিটি ইমেজ এলিমেন্টে মার্কআপের একাধিক লাইন যোগ করা, প্রতিটি srcset এর জন্য একাধিক কাস্টম URL দিয়ে সম্পূর্ণ করুন। আপনাকে ব্রেকপয়েন্টের একটি সেটের বিষয়েও সিদ্ধান্ত নিতে হবে, যা জটিল, কারণ তারা স্ক্রীনের ঘনত্ব এবং সাধারণ ডিভাইসের ভিউপোর্ট আকার উভয়ই উপস্থাপন করতে পারে।
এই কারণেই NgOptimizedImage নির্দেশনায় স্বয়ংক্রিয় srcset প্রজন্ম যোগ করা ছিল লঞ্চ-পরবর্তী একটি বড় মাইলফলক। এই সংযোজনের সাথে, একটি CDN ব্যবহার করে যে কোনো অ্যাপ্লিকেশন যা ইমেজ রিসাইজ সমর্থন করে তা সম্পূর্ণ, কাস্টমাইজযোগ্য, srcsets স্বয়ংক্রিয়ভাবে NgOptimizedImage নির্দেশের সাথে তৈরি করা প্রতিটি ছবিতে যুক্ত হতে পারে।
আমরা sizes প্রপার্টি সেট করার জন্য একটি সরলীকৃত API অন্তর্ভুক্ত করেছি, যা প্রতিটি ইমেজ সঠিক ধরনের srcset পায় তা নিশ্চিত করতে ব্যবহৃত হয়। যদি আপনি একটি sizes বৈশিষ্ট্য অন্তর্ভুক্ত না করেন, আমরা জানি যে চিত্রটি স্থির-আকারের, এবং একটি ঘনত্ব-নির্ভর srcset পাওয়া উচিত, যেমন নিম্নলিখিত:
<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-এর একটি মূল উপাদান হল লোডার আর্কিটেকচার, যা নির্দেশকে স্বয়ংক্রিয়ভাবে ইউআরএল তৈরি করতে দেয় যা অ্যাপ্লিকেশনের ইমেজ সিডিএন-এর জন্য তৈরি। বহুল ব্যবহৃত 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}`;
};
আরও জটিল কাস্টম লোডারের উদাহরণ কৌণিক ডকুমেন্টেশনে পাওয়া যায়।
ইমেজ কর্মক্ষমতা জন্য প্রসারিত নির্দেশিকা
এখন পর্যন্ত, আমরা অ্যাঙ্গুলারে যোগ করেছি প্রতিটি ইমেজ পারফরম্যান্স সতর্কতা NgOptimizedImage নির্দেশের অংশ। আপনি যদি অ্যাপে নির্দেশিকা ব্যবহার না করেন, তাহলে আপনি ইমেজ পারফরম্যান্স সংক্রান্ত কোনো নির্দেশিকা পাবেন না।
কৌণিক 17-এ, আমরা সমস্ত কৌণিক অ্যাপ্লিকেশানগুলিকে অন্তর্ভুক্ত করার জন্য চিত্র কর্মক্ষমতা নির্দেশনার সুযোগ প্রসারিত করছি। এখন, আমরা যদি চিত্রের প্যাটার্ন শনাক্ত করি যা আমরা জানি যে কর্মক্ষমতা ক্ষতিকারক ভুল, যেমন অলসভাবে আপনার LCP ইমেজ লোড করা, বা পৃষ্ঠার জন্য অনেক বড় ফাইল ডাউনলোড করা, আমরা আপনাকে জানাব, এমনকি আপনি না হলেও NgOptimizedImage ব্যবহার করে।
সমস্ত অ্যাপ্লিকেশানের জন্য ইমেজ পারফরম্যান্স গুরুত্বপূর্ণ, এবং আমরা কৌণিক অ্যাপ্লিকেশানগুলিতে সাধারণ ভুলগুলি প্রতিরোধ করতে সাহায্য করার জন্য গার্ডেল তৈরি করা চালিয়ে যেতে উত্তেজিত৷
উন্মুখ
NgOptimizedImage-এর জন্য পরবর্তী বৈশিষ্ট্যগুলির সেট তৈরি করার জন্য আমরা ইতিমধ্যেই কঠোর পরিশ্রম করছি। যদিও ইমেজ পারফরম্যান্স আমাদের কেন্দ্রীয় উদ্বেগ হিসাবে রয়ে গেছে, আমরা এমন বৈশিষ্ট্যগুলিও যোগ করতে চাই যা বিকাশকারীর অভিজ্ঞতা উন্নত করে, এটি নিশ্চিত করতে যে NgOptimizedImage কৌণিক অ্যাপ্লিকেশনগুলিতে ছবিগুলি অন্তর্ভুক্ত করার জন্য একটি আকর্ষণীয় বিকল্প হিসাবে রয়ে গেছে।
একটি বৈশিষ্ট্য যা আমাদের জন্য একটি অগ্রাধিকার হল চিত্র স্থানধারক৷ এগুলি সাধারণত ওয়েব অ্যাপ্লিকেশনগুলিতে ইমেজ লোডিংকে আরও ভাল দেখাতে ব্যবহৃত হয়, তবে ভুলভাবে প্রয়োগ করা হলে কার্যক্ষমতাকে ক্ষতিগ্রস্থ করতে পারে। আমরা NgOptimizedImage-এ একটি কর্মক্ষমতা-প্রথম চিত্র স্থানধারক সিস্টেম তৈরি করার আশা করছি। আরও ঘোষণার জন্য আমাদের ব্লগের সাথে থাকুন!