একটি ইমেজ কম্পোনেন্ট পারফরম্যান্সের সেরা অনুশীলনগুলোকে অন্তর্ভুক্ত করে এবং ইমেজ অপ্টিমাইজ করার জন্য একটি রেডিমেড সমাধান প্রদান করে।
ওয়েব অ্যাপ্লিকেশনগুলোর পারফরম্যান্সের ক্ষেত্রে ছবি একটি সাধারণ প্রতিবন্ধকতা এবং অপটিমাইজেশনের জন্য এটি একটি গুরুত্বপূর্ণ ক্ষেত্র। অপটিমাইজ না করা ছবি পেজের আকার বাড়িয়ে তোলে এবং ৯০ তম পার্সেন্টাইলে এটি পেজের মোট ওজনের (বাইটে) ৭০%-এরও বেশি দখল করে। ছবি অপটিমাইজ করার বিভিন্ন পদ্ধতির জন্য এমন একটি ইন্টেলিজেন্ট 'ইমেজ কম্পোনেন্ট' প্রয়োজন, যেখানে পারফরম্যান্স সলিউশনগুলো ডিফল্ট হিসেবেই অন্তর্ভুক্ত থাকে।
অরোরা টিম নেক্সট.জেএস (Next.js) ব্যবহার করে এই ধরনের একটি কম্পোনেন্ট তৈরি করেছে। এর লক্ষ্য ছিল একটি অপ্টিমাইজড ইমেজ টেমপ্লেট তৈরি করা, যা ওয়েব ডেভেলপাররা পরবর্তীতে নিজেদের মতো করে সাজিয়ে নিতে পারবে। এই কম্পোনেন্টটি একটি ভালো মডেল হিসেবে কাজ করে এবং অন্যান্য ফ্রেমওয়ার্ক, কন্টেন্ট ম্যানেজমেন্ট সিস্টেম (CMS) ও টেক-স্ট্যাকে ইমেজ কম্পোনেন্ট তৈরির জন্য একটি মানদণ্ড স্থাপন করে। আমরা নাক্সট.জেএস (Nuxt.js)-এর জন্য একটি অনুরূপ কম্পোনেন্টে একসাথে কাজ করেছি এবং ভবিষ্যতের সংস্করণগুলোতে ইমেজ অপ্টিমাইজেশনের জন্য অ্যাঙ্গুলার (Angular) -এর সাথে কাজ করছি। এই পোস্টে আলোচনা করা হয়েছে, আমরা কীভাবে নেক্সট.জেএস ইমেজ কম্পোনেন্টটি ডিজাইন করেছি এবং এই যাত্রাপথে আমরা কী কী শিক্ষা লাভ করেছি।
ইমেজ অপ্টিমাইজেশনের সমস্যা এবং সুযোগ
ছবি শুধু পারফরম্যান্সকেই প্রভাবিত করে না, বরং ব্যবসাকেও প্রভাবিত করে। ওয়েবসাইট ভিজিটকারী ব্যবহারকারীদের কনভার্সনের ক্ষেত্রে একটি পেজে ছবির সংখ্যা ছিল দ্বিতীয় বৃহত্তম নির্দেশক । যে সেশনগুলোতে ব্যবহারকারীরা কনভার্ট হয়েছেন, সেগুলোতে কনভার্ট না হওয়া সেশনগুলোর তুলনায় ৩৮% কম ছবি ছিল। লাইটহাউস তার সেরা অনুশীলন নিরীক্ষার অংশ হিসেবে ছবি অপ্টিমাইজ করার এবং ওয়েবের মূল বিষয়গুলো উন্নত করার একাধিক সুযোগ তালিকাভুক্ত করেছে। কিছু সাধারণ ক্ষেত্র যেখানে ছবি ওয়েবের মূল বিষয় এবং ব্যবহারকারীর অভিজ্ঞতাকে প্রভাবিত করতে পারে, তা নিচে উল্লেখ করা হলো।
আকার ছোট করা ছবি CLS-এর ক্ষতি করে।
আকার নির্দিষ্ট না করে ছবি পরিবেশন করলে তা লেআউটের অস্থিতিশীলতা সৃষ্টি করতে পারে এবং উচ্চ কিউমুলেটিভ লেআউট শিফট ( CLS )-এ অবদান রাখতে পারে। <img> এলিমেন্টে width এবং height অ্যাট্রিবিউট সেট করলে লেআউট শিফট প্রতিরোধ করা সম্ভব। উদাহরণস্বরূপ:
<img src="flower.jpg" width="360" height="240">
প্রস্থ এবং উচ্চতা এমনভাবে নির্ধারণ করা উচিত যাতে রেন্ডার করা ছবির অ্যাস্পেক্ট রেশিও তার স্বাভাবিক অ্যাস্পেক্ট রেশিওর কাছাকাছি থাকে। অ্যাস্পেক্ট রেশিওতে বড় ধরনের পার্থক্যের ফলে ছবিটি বিকৃত দেখাতে পারে। CSS-এ অ্যাস্পেক্ট-রেশিও নির্দিষ্ট করার সুবিধাযুক্ত একটি অপেক্ষাকৃত নতুন প্রপার্টি CLS প্রতিরোধ করার পাশাপাশি ছবিগুলোকে রেসপন্সিভভাবে সাইজ করতে সাহায্য করতে পারে।
বড় ছবি LCP-এর ক্ষতি করতে পারে।
একটি ছবির ফাইলের আকার যত বড় হবে, সেটি ডাউনলোড হতে তত বেশি সময় লাগবে। একটি বড় ছবি হতে পারে পেজটির 'হিরো' ইমেজ অথবা ভিউপোর্টের সবচেয়ে গুরুত্বপূর্ণ উপাদান, যা লার্জেস্ট কন্টেন্টফুল পেইন্ট ( LCP ) চালু করার জন্য দায়ী। যে ছবিটি গুরুত্বপূর্ণ কন্টেন্টের অংশ এবং ডাউনলোড হতে দীর্ঘ সময় নেয়, সেটি LCP-কে বিলম্বিত করবে।
অনেক ক্ষেত্রে, ডেভেলপাররা উন্নত কম্প্রেশন এবং রেসপন্সিভ ইমেজ ব্যবহারের মাধ্যমে ছবির আকার কমাতে পারেন। <img> এলিমেন্টের srcset এবং sizes অ্যাট্রিবিউটগুলো বিভিন্ন আকারের ইমেজ ফাইল সরবরাহ করতে সাহায্য করে। এরপর ব্রাউজার স্ক্রিনের আকার এবং রেজোলিউশনের উপর নির্ভর করে সঠিক ছবিটি বেছে নিতে পারে।
দুর্বল ইমেজ কম্প্রেশন LCP-এর ক্ষতি করতে পারে।
AVIF বা WebP-এর মতো আধুনিক ইমেজ ফরম্যাটগুলো বহুল ব্যবহৃত JPEG এবং PNG ফরম্যাটের চেয়ে উন্নততর কম্প্রেশন প্রদান করতে পারে। উন্নত কম্প্রেশন একই মানের ছবির জন্য ফাইলের আকার ২৫% থেকে ৫০% পর্যন্ত কমিয়ে দেয়। এই হ্রাসের ফলে কম ডেটা খরচে দ্রুত ডাউনলোড সম্ভব হয়। অ্যাপটির উচিত সেইসব ব্রাউজারে আধুনিক ইমেজ ফরম্যাট সরবরাহ করা , যেগুলো এই ফরম্যাটগুলো সমর্থন করে।
অপ্রয়োজনীয় ছবি লোড করা LCP-এর ক্ষতি করে।
পেজ লোড হওয়ার সময়, স্ক্রিনের নিচের অংশে থাকা বা ভিউপোর্টের বাইরে থাকা ছবিগুলো ব্যবহারকারীকে দেখানো হয় না। এগুলোকে ডিফার্ড করা যেতে পারে, যাতে এগুলো LCP-তে প্রভাব না ফেলে এবং এটিকে বিলম্বিত না করে। ব্যবহারকারী স্ক্রল করে ছবিগুলোর দিকে এগোলে, সেগুলোকে পরে লোড করার জন্য লেজি-লোডিং ব্যবহার করা যেতে পারে।
অপ্টিমাইজেশন চ্যালেঞ্জ
দলগুলো পূর্বে তালিকাভুক্ত সমস্যাগুলোর কারণে পারফরম্যান্সের ক্ষতি মূল্যায়ন করতে পারে এবং সেগুলো কাটিয়ে ওঠার জন্য সর্বোত্তম সমাধান প্রয়োগ করতে পারে। তবে, বাস্তবে প্রায়শই এমনটা হয় না এবং অদক্ষ ইমেজগুলো ওয়েবের গতি কমিয়ে দিতে থাকে। এর সম্ভাব্য কারণগুলোর মধ্যে রয়েছে:
- অগ্রাধিকার : ওয়েব ডেভেলপাররা সাধারণত কোড, জাভাস্ক্রিপ্ট এবং ডেটা অপটিমাইজেশনের উপর বেশি মনোযোগ দেন। ফলে, ছবির সমস্যা বা সেগুলোকে কীভাবে অপটিমাইজ করতে হয়, সে সম্পর্কে তারা অবগত নাও থাকতে পারেন। ডিজাইনারদের তৈরি বা ব্যবহারকারীদের আপলোড করা ছবিগুলো তাদের অগ্রাধিকারের তালিকায় উপরের দিকে নাও থাকতে পারে।
- রেডিমেড সমাধান : ডেভেলপাররা ইমেজ অপটিমাইজেশনের সূক্ষ্ম বিষয়গুলো সম্পর্কে অবগত থাকলেও, তাদের ফ্রেমওয়ার্ক বা টেক-স্ট্যাকের জন্য একটি সর্বাঙ্গীণ রেডিমেড সমাধানের অভাব একটি প্রতিবন্ধক হতে পারে।
- ডাইনামিক ইমেজ : অ্যাপ্লিকেশনের অংশ হিসেবে থাকা স্ট্যাটিক ইমেজ ছাড়াও, ব্যবহারকারীরা ডাইনামিক ইমেজ আপলোড করেন অথবা এগুলো বাহ্যিক ডেটাবেস বা সিএমএস (CMS) থেকে সংগ্রহ করা হয়। যেখানে ইমেজের উৎস ডাইনামিক, সেখানে এই ধরনের ইমেজের আকার নির্ধারণ করা চ্যালেঞ্জিং হতে পারে।
- মার্কআপের আধিক্য : বিভিন্ন আকারের ছবির জন্য ইমেজ সাইজ বা
srcsetঅন্তর্ভুক্ত করার সমাধানে প্রতিটি ছবির জন্য অতিরিক্ত মার্কআপের প্রয়োজন হয়, যা ক্লান্তিকর হতে পারে।srcsetঅ্যাট্রিবিউটটি ২০১৪ সালে চালু করা হলেও বর্তমানে মাত্র ২৬.৫% ওয়েবসাইট এটি ব্যবহার করে ।srcsetব্যবহার করার সময় ডেভেলপারদের বিভিন্ন আকারের ছবি তৈরি করতে হয়। just-gimme-an-img- এর মতো টুল এক্ষেত্রে সাহায্য করতে পারে, কিন্তু প্রতিটি ছবির জন্য এটি ম্যানুয়ালি ব্যবহার করতে হয়। - ব্রাউজার সমর্থন : AVIF এবং WebP-এর মতো আধুনিক ইমেজ ফরম্যাটগুলো ছোট আকারের ইমেজ ফাইল তৈরি করে, কিন্তু যেসব ব্রাউজার এগুলো সমর্থন করে না, সেগুলোতে বিশেষ ব্যবস্থাপনার প্রয়োজন হয়। ডেভেলপারদের কন্টেন্ট নেগোসিয়েশন বা
<picture> এলিমেন্টের মতো কৌশল ব্যবহার করতে হয়, যাতে ছবিগুলো সব ব্রাউজারে পরিবেশিত হয়। - লেজি লোডিং-এর জটিলতা : স্ক্রিনের নিচের দিকের ছবিগুলোর জন্য লেজি-লোডিং বাস্তবায়ন করতে একাধিক কৌশল এবং লাইব্রেরি রয়েছে। এর মধ্যে সেরাটি বেছে নেওয়া একটি চ্যালেঞ্জ হতে পারে। ডেভেলপাররাও হয়তো জানেন না যে ডিফার্ড ছবি লোড করার জন্য স্ক্রিনের 'ফোল্ড' থেকে সর্বোত্তম দূরত্ব কোনটি। ডিভাইসের ভিন্ন ভিন্ন ভিউপোর্ট সাইজ এই বিষয়টিকে আরও জটিল করে তুলতে পারে।
- পরিবর্তনশীল প্রেক্ষাপট : ব্রাউজারগুলো পারফরম্যান্স উন্নত করার জন্য নতুন HTML বা CSS ফিচার সমর্থন করা শুরু করায়, ডেভেলপারদের পক্ষে সেগুলোর প্রত্যেকটি মূল্যায়ন করা কঠিন হয়ে পড়তে পারে। উদাহরণস্বরূপ, ক্রোম ‘Fetch Priority’ ফিচারটি একটি ‘Origin Trial’ হিসেবে চালু করছে। এটি পেজের নির্দিষ্ট ছবির অগ্রাধিকার বাড়াতে ব্যবহার করা যেতে পারে। সার্বিকভাবে, এই ধরনের উন্নয়নগুলো যদি কম্পোনেন্ট পর্যায়ে মূল্যায়ন ও প্রয়োগ করা হতো, তবে ডেভেলপারদের জন্য কাজটি আরও সহজ হতো।
সমাধান হিসেবে ছবির উপাদান
ইমেজ অপ্টিমাইজ করার সুযোগ এবং প্রতিটি অ্যাপ্লিকেশনের জন্য আলাদাভাবে তা বাস্তবায়নের চ্যালেঞ্জগুলোই আমাদেরকে ইমেজ কম্পোনেন্টের ধারণার দিকে চালিত করেছে। একটি ইমেজ কম্পোনেন্ট সেরা অনুশীলনগুলোকে একত্রিত ও প্রয়োগ করতে পারে। <img> এলিমেন্টকে একটি ইমেজ কম্পোনেন্ট দিয়ে প্রতিস্থাপন করে ডেভেলপাররা তাদের ইমেজের পারফরম্যান্স সংক্রান্ত সমস্যাগুলো আরও ভালোভাবে সমাধান করতে পারেন।
গত এক বছর ধরে, আমরা Next.js ফ্রেমওয়ার্কের Image কম্পোনেন্টটি ডিজাইন ও ইমপ্লিমেন্ট করার জন্য কাজ করেছি। এটিকে Next.js অ্যাপে বিদ্যমান <img> এলিমেন্টগুলোর সরাসরি প্রতিস্থাপন হিসেবে নিম্নোক্তভাবে ব্যবহার করা যায়।
// 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" />
}
যেহেতু ডেভেলপাররা ইমেজ কম্পোনেন্টটি আকারবিহীন অবস্থায় ব্যবহার করতে পারেন না, তাই ডিজাইনটি নিশ্চিত করে যে তারা ছবির আকার বিবেচনা করার জন্য সময় নেবেন এবং লেআউটের স্থান পরিবর্তন রোধ করবেন।
প্রতিক্রিয়াশীলতা সহজতর করুন
বিভিন্ন ডিভাইসে ছবি রেসপন্সিভ করার জন্য, ডেভেলপারদের অবশ্যই <img> এলিমেন্টে srcset এবং sizes অ্যাট্রিবিউট সেট করতে হয়। আমরা Image কম্পোনেন্টের মাধ্যমে এই কাজটি কমাতে চেয়েছিলাম। আমরা Next.js Image কম্পোনেন্টটি এমনভাবে ডিজাইন করেছি যাতে প্রতি অ্যাপ্লিকেশনে অ্যাট্রিবিউটের মান শুধুমাত্র একবারই সেট করা হয়। আমরা লেআউট মোডের উপর ভিত্তি করে Image কম্পোনেন্টের সমস্ত ইনস্ট্যান্সে এগুলো প্রয়োগ করি। আমরা একটি তিন-ধাপের সমাধান নিয়ে এসেছি:
-
deviceSizesপ্রপার্টি: এই প্রপার্টিটি অ্যাপ্লিকেশন ব্যবহারকারীদের মধ্যে প্রচলিত ডিভাইসগুলোর উপর ভিত্তি করে এককালীন ব্রেকপয়েন্ট কনফিগার করতে ব্যবহার করা যেতে পারে। ব্রেকপয়েন্টের ডিফল্ট মানগুলো কনফিগ ফাইলে অন্তর্ভুক্ত থাকে। -
imageSizesপ্রপার্টি: এটিও একটি কনফিগারযোগ্য প্রপার্টি যা ডিভাইস সাইজ ব্রেকপয়েন্টগুলোর সাথে সঙ্গতিপূর্ণ ইমেজ সাইজগুলো পেতে ব্যবহৃত হয়। - প্রতিটি ইমেজের
layoutঅ্যাট্রিবিউট: প্রতিটি ইমেজের জন্যdeviceSizesএবংimageSizesপ্রোপার্টিগুলো কীভাবে ব্যবহার করা হবে, তা নির্দেশ করতে এটি ব্যবহৃত হয়। লেআউট মোডের জন্য সমর্থিত ভ্যালুগুলো হলোfixed,fill,intrinsicএবংresponsive
যখন রেসপন্সিভ বা ফিল লেআউট মোড সহ কোনো ছবির জন্য অনুরোধ করা হয়, তখন Next.js পেজটি অনুরোধকারী ডিভাইসের আকারের উপর ভিত্তি করে পরিবেশন করার জন্য ছবিটি শনাক্ত করে এবং সেই অনুযায়ী ছবির srcset ও sizes নির্ধারণ করে।
নিম্নলিখিত তুলনাটি দেখায় যে কীভাবে লেআউট মোড ব্যবহার করে বিভিন্ন স্ক্রিনে ছবির আকার নিয়ন্ত্রণ করা যায়। আমরা Next.js ডক্স-এ শেয়ার করা একটি ডেমো ছবি ব্যবহার করেছি, যা একটি ফোন এবং একটি সাধারণ ল্যাপটপে দেখা হয়েছে।
| ল্যাপটপের স্ক্রিন | ফোনের স্ক্রিন |
|---|---|
| লেআউট = ইন্ট্রিনসিক: ছোট ভিউপোর্টে কন্টেইনারের প্রস্থের সাথে মানানসই হতে ছোট হয়ে যায়। বড় ভিউপোর্টে ছবির ইন্ট্রিনসিক আকারের বাইরে বড় হয় না। কন্টেইনারের প্রস্থ ১০০%। | |
 |  |
| লেআউট = স্থির: ছবিটি রেসপন্সিভ নয়। এর প্রস্থ এবং উচ্চতা স্থির, যা ` | |
 |  |
| লেআউট = রেসপন্সিভ: অ্যাস্পেক্ট রেশিও বজায় রেখে বিভিন্ন ভিউপোর্টে কন্টেইনারের প্রস্থের উপর নির্ভর করে আকার ছোট বা বড় করা। | |
 |  |
লেআউট = ফিল: প্যারেন্ট কন্টেইনারটি পূরণ করার জন্য প্রস্থ এবং উচ্চতা প্রসারিত করা হয়। (এই উদাহরণে প্যারেন্ট <div> এর প্রস্থ 300*500 নির্ধারণ করা হয়েছে) | |
 |  |
অন্তর্নির্মিত লেজি-লোডিং প্রদান করুন
ইমেজ কম্পোনেন্ট ডিফল্ট হিসেবে একটি বিল্ট-ইন, উচ্চ পারফরম্যান্স সম্পন্ন লেজি লোডিং সলিউশন প্রদান করে। <img> এলিমেন্ট ব্যবহার করার সময় লেজি লোডিংয়ের জন্য কয়েকটি বিকল্প রয়েছে, কিন্তু সেগুলোর সবগুলোরই কিছু অসুবিধা আছে যা ব্যবহার করাকে কঠিন করে তোলে। একজন ডেভেলপার নিম্নলিখিত লেজি লোডিং পদ্ধতিগুলোর মধ্যে যেকোনো একটি অবলম্বন করতে পারেন:
-
loadingঅ্যাট্রিবিউটটি নির্দিষ্ট করুন: এটি সকল আধুনিক ব্রাউজারে সমর্থিত । - ইন্টারসেকশন অবজারভার এপিআই ব্যবহার করুন: একটি কাস্টম লেজি-লোডিং সলিউশন তৈরি করতে প্রচেষ্টা এবং একটি সুচিন্তিত ডিজাইন ও বাস্তবায়ন প্রয়োজন। ডেভেলপারদের কাছে সবসময় এর জন্য সময় নাও থাকতে পারে।
- ইমেজ লেজি-লোড করার জন্য একটি থার্ড-পার্টি লাইব্রেরি ইম্পোর্ট করুন: লেজি লোডিং-এর জন্য একটি উপযুক্ত থার্ড-পার্টি লাইব্রেরি মূল্যায়ন এবং ইন্টিগ্রেট করতে অতিরিক্ত প্রচেষ্টার প্রয়োজন হতে পারে।
Next.js-এর Image কম্পোনেন্টে, লোডিং ডিফল্টরূপে "lazy" মোডে সেট করা থাকে। লেজি লোডিং Intersection Observer ব্যবহার করে প্রয়োগ করা হয়, যা বেশিরভাগ আধুনিক ব্রাউজারে উপলব্ধ । এটি চালু করার জন্য ডেভেলপারদের অতিরিক্ত কিছু করার প্রয়োজন হয় না, তবে প্রয়োজনে তারা এটি বন্ধও করতে পারেন।
গুরুত্বপূর্ণ ছবিগুলো আগে থেকে লোড করুন
প্রায়শই, LCP এলিমেন্টগুলো ছবি হয়, এবং বড় আকারের ছবি LCP-কে বিলম্বিত করতে পারে। গুরুত্বপূর্ণ ছবিগুলো প্রি-লোড করে রাখা একটি ভালো উপায়, যাতে ব্রাউজার ছবিটি দ্রুত খুঁজে পেতে পারে। <img> এলিমেন্ট ব্যবহার করার সময়, HTML হেডে নিম্নলিখিতভাবে একটি প্রি-লোড হিন্ট অন্তর্ভুক্ত করা যেতে পারে।
<link rel="preload" as="image" href="important.png">
একটি সু-পরিকল্পিত ইমেজ কম্পোনেন্টে, ব্যবহৃত ফ্রেমওয়ার্ক নির্বিশেষে, ছবি লোড হওয়ার ক্রম পরিবর্তন করার একটি উপায় থাকা উচিত। Next.js-এর ইমেজ কম্পোনেন্টের ক্ষেত্রে, ডেভেলপাররা images কম্পোনেন্টের priority অ্যাট্রিবিউট ব্যবহার করে প্রি-লোডের জন্য উপযুক্ত ছবি নির্দেশ করতে পারেন।
<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />
priority অ্যাট্রিবিউট যোগ করলে মার্কআপ সরল হয় এবং এটি ব্যবহার করা আরও সুবিধাজনক। ইমেজ কম্পোনেন্ট ডেভেলপাররা পেজের above-the-fold ইমেজগুলোর জন্য, যেগুলো নির্দিষ্ট মানদণ্ড পূরণ করে, সেগুলোর প্রি-লোডিং স্বয়ংক্রিয় করতে হিউরিস্টিকস প্রয়োগের বিকল্পগুলোও খতিয়ে দেখতে পারেন।
উচ্চ-পারফরম্যান্স ইমেজ হোস্টিংকে উৎসাহিত করুন
ইমেজ অপটিমাইজেশন স্বয়ংক্রিয় করার জন্য ইমেজ সিডিএন ব্যবহারের পরামর্শ দেওয়া হয়, এবং এগুলি WebP ও AVIF-এর মতো আধুনিক ইমেজ ফরম্যাটও সাপোর্ট করে। Next.js-এর ইমেজ কম্পোনেন্টটি একটি লোডার আর্কিটেকচার ব্যবহার করে ডিফল্টভাবে একটি ইমেজ সিডিএন ব্যবহার করে। নিচের উদাহরণটিতে দেখানো হয়েছে যে, এই লোডারটি Next.js কনফিগ ফাইলে সিডিএন কনফিগার করার সুযোগ দেয়।
module.exports = {
images: {
loader: 'imgix',
path: 'https://ImgApp/imgix.net',
},
}
এই কনফিগারেশনের মাধ্যমে, ডেভেলপাররা ইমেজ সোর্সে রিলেটিভ ইউআরএল ব্যবহার করতে পারেন এবং ফ্রেমওয়ার্কটি রিলেটিভ ইউআরএল-এর সাথে সিডিএন পাথ যুক্ত করে অ্যাবসোলিউট ইউআরএল তৈরি করবে। Imgix , Cloudinary , এবং Akamai-এর মতো জনপ্রিয় ইমেজ সিডিএনগুলো সমর্থিত। এই আর্কিটেকচারটি অ্যাপের জন্য একটি কাস্টম loader ফাংশন প্রয়োগ করার মাধ্যমে নিজস্ব ক্লাউড প্রোভাইডার ব্যবহারের সুযোগ দেয়।
সেলফ-হোস্টেড ইমেজ সমর্থন করুন
এমন পরিস্থিতি হতে পারে যেখানে ওয়েবসাইটগুলো ইমেজ সিডিএন (CDN) ব্যবহার করতে পারে না। সেক্ষেত্রে, একটি ইমেজ কম্পোনেন্টকে অবশ্যই সেলফ-হোস্টেড ইমেজ সাপোর্ট করতে হবে। Next.js-এর ইমেজ কম্পোনেন্ট একটি বিল্ট-ইন ইমেজ সার্ভার হিসেবে একটি ইমেজ অপটিমাইজার ব্যবহার করে, যা একটি সিডিএন-এর মতো এপিআই (API) প্রদান করে। সার্ভারে ইনস্টল করা থাকলে, এই অপটিমাইজারটি প্রোডাকশন ইমেজ ট্রান্সফরমেশনের জন্য শার্প (Sharp) ব্যবহার করে। যারা নিজেদের ইমেজ অপটিমাইজেশন পাইপলাইন তৈরি করতে চান, তাদের জন্য এই লাইব্রেরিটি একটি ভালো পছন্দ।
প্রগতিশীল লোডিং সমর্থন করে
প্রগ্রেসিভ লোডিং হলো একটি কৌশল, যা মূল ছবিটি লোড হওয়ার সময় সাধারণত উল্লেখযোগ্যভাবে নিম্ন মানের একটি প্লেসহোল্ডার ছবি প্রদর্শন করে ব্যবহারকারীর আগ্রহ ধরে রাখতে ব্যবহৃত হয়। এটি অনুভূত পারফরম্যান্স উন্নত করে এবং ব্যবহারকারীর অভিজ্ঞতা বাড়ায়। এটি স্ক্রিনের নিচের বা উপরের অংশের ছবির জন্য লেজি লোডিং-এর সাথে একত্রে ব্যবহার করা যেতে পারে।
Next.js-এর Image কম্পোনেন্টটি placeholder প্রপার্টির মাধ্যমে ছবির জন্য প্রগ্রেসিভ লোডিং সমর্থন করে। আসল ছবিটি লোড হওয়ার সময় একটি নিম্ন-মানের বা ঝাপসা ছবি প্রদর্শনের জন্য এটিকে একটি LQIP (লো-কোয়ালিটি ইমেজ প্লেসহোল্ডার) হিসেবে ব্যবহার করা যেতে পারে।
প্রভাব
এই সমস্ত অপ্টিমাইজেশন অন্তর্ভুক্ত করার ফলে, আমরা প্রোডাকশনে Next.js ইমেজ কম্পোনেন্ট নিয়ে সাফল্য পেয়েছি এবং অন্যান্য টেক স্ট্যাকের সাথেও অনুরূপ ইমেজ কম্পোনেন্ট নিয়ে কাজ করছি।
যখন লেবনকয়েন তাদের পুরোনো জাভাস্ক্রিপ্ট ফ্রন্টএন্ডকে নেক্সট.জেএস-এ মাইগ্রেট করে , তখন তারা তাদের ইমেজ পাইপলাইনকেও নেক্সট.জেএস ইমেজ কম্পোনেন্ট ব্যবহার করার জন্য আপগ্রেড করে। যে পেজটি <img> থেকে next/image-এ মাইগ্রেট করা হয়েছিল, সেখানে এলসিপি (LCP) ২.৪ সেকেন্ড থেকে কমে ১.৭ সেকেন্ড হয়ে যায়। পেজটির জন্য ডাউনলোড হওয়া মোট ইমেজ বাইটের পরিমাণ ৬৬৩ কিলোবাইট থেকে কমে ৩২৬ কিলোবাইট হয় (যার মধ্যে প্রায় ১০০ কিলোবাইট লেজি-লোডেড ইমেজ বাইট ছিল)।
অর্জিত শিক্ষা
যারা Next.js অ্যাপ তৈরি করছেন, তারা অপটিমাইজেশনের জন্য Next.js Image কম্পোনেন্ট ব্যবহার করে উপকৃত হতে পারেন। তবে, আপনি যদি অন্য কোনো ফ্রেমওয়ার্ক বা CMS-এর জন্য একই ধরনের পারফরম্যান্স অ্যাবস্ট্রাকশন তৈরি করতে চান, তাহলে এই পথে আমাদের অর্জিত কিছু শিক্ষা আপনার জন্য সহায়ক হতে পারে।
সেফটি ভালভ উপকারের চেয়ে অপকারই বেশি করতে পারে।
Next.js ইমেজ কম্পোনেন্টের একটি প্রাথমিক সংস্করণে, আমরা একটি unsized অ্যাট্রিবিউট দিয়েছিলাম যা ডেভেলপারদের সাইজিংয়ের বাধ্যবাধকতা এড়িয়ে অনির্দিষ্ট মাপের ছবি ব্যবহার করার সুযোগ দিত। আমরা ভেবেছিলাম, যেসব ক্ষেত্রে ছবির উচ্চতা বা প্রস্থ আগে থেকে জানা সম্ভব নয়, সেখানে এটি প্রয়োজনীয় হবে। কিন্তু, আমরা লক্ষ্য করি যে ব্যবহারকারীরা GitHub ইস্যুগুলোতে সাইজিংয়ের বাধ্যবাধকতাজনিত সমস্যার একটি সর্বজনীন সমাধান হিসেবে ' unsized ' অ্যাট্রিবিউটটি ব্যবহারের সুপারিশ করছেন, এমনকি এমন ক্ষেত্রেও যেখানে CLS-এর ক্ষতি না করেই সমস্যাটির সমাধান করা যেত। ফলস্বরূপ, আমরা unsized অ্যাট্রিবিউটটিকে অপ্রচলিত (deprecated) ঘোষণা করে সরিয়ে দিয়েছি।
অপ্রয়োজনীয় বিরক্তি থেকে দরকারি ঘর্ষণকে আলাদা করুন
একটি ছবির আকার নির্ধারণের আবশ্যকতা হলো 'কার্যকরী প্রতিবন্ধকতা'-র একটি উদাহরণ। এটি কম্পোনেন্টটির ব্যবহারকে সীমিত করে, কিন্তু বিনিময়ে অসাধারণ পারফরম্যান্স সুবিধা প্রদান করে। সম্ভাব্য পারফরম্যান্স সুবিধাগুলো সম্পর্কে ব্যবহারকারীদের একটি স্পষ্ট ধারণা থাকলে, তারা সহজেই এই সীমাবদ্ধতা মেনে নেবে। তাই, ডকুমেন্টেশন এবং কম্পোনেন্টটি সম্পর্কে প্রকাশিত অন্যান্য সামগ্রীতে এই সুবিধা-অসুবিধার বিষয়টি ব্যাখ্যা করা সমীচীন।
তবে, পারফরম্যান্সের সাথে আপোস না করেই এই ধরনের অসুবিধার বিকল্প সমাধান খুঁজে নেওয়া সম্ভব। উদাহরণস্বরূপ, Next.js ইমেজ কম্পোনেন্ট তৈরির সময় আমরা অভিযোগ পেয়েছিলাম যে, স্থানীয়ভাবে সংরক্ষিত ছবিগুলোর সাইজ খুঁজে বের করাটা বেশ বিরক্তিকর ছিল। আমরা স্ট্যাটিক ইমেজ ইম্পোর্ট যুক্ত করেছি, যা একটি Babel প্লাগইন ব্যবহার করে বিল্ড টাইমে স্থানীয় ছবিগুলোর ডাইমেনশন স্বয়ংক্রিয়ভাবে সংগ্রহ করার মাধ্যমে এই প্রক্রিয়াটিকে সহজ করে তোলে।
সুবিধাজনক বৈশিষ্ট্য এবং কর্মক্ষমতা অপ্টিমাইজেশনের মধ্যে ভারসাম্য বজায় রাখুন
যদি আপনার ইমেজ কম্পোনেন্ট ব্যবহারকারীদের উপর কেবল "অপ্রয়োজনীয় বাধা" সৃষ্টি করে, তবে ডেভেলপাররা সাধারণত এটি ব্যবহার করতে চাইবে না। আমরা দেখেছি যে, যদিও ইমেজ সাইজিং এবং srcset ভ্যালুর স্বয়ংক্রিয় জেনারেশনের মতো পারফরম্যান্স ফিচারগুলোই সবচেয়ে গুরুত্বপূর্ণ ছিল, স্বয়ংক্রিয় লেজি লোডিং এবং বিল্ট-ইন ব্লারি প্লেসহোল্ডারের মতো ডেভেলপার-বান্ধব ফিচারগুলোও Next.js ইমেজ কম্পোনেন্টের প্রতি আগ্রহ বাড়িয়েছে।
ব্যবহার বাড়াতে ফিচারগুলোর জন্য একটি রোডম্যাপ তৈরি করুন।
এমন একটি সমাধান তৈরি করা খুব কঠিন যা সব পরিস্থিতিতে নিখুঁতভাবে কাজ করে। এমন কিছু ডিজাইন করার প্রলোভন জাগতে পারে যা ৭৫% মানুষের জন্য ভালোভাবে কাজ করে এবং তারপর বাকি ২৫%-কে বলা হয় যে, "এইসব ক্ষেত্রে, এই উপাদানটি আপনার জন্য নয়।"
বাস্তবে, এই কৌশলটি একজন কম্পোনেন্ট ডিজাইনার হিসেবে আপনার লক্ষ্যের সাথে সাংঘর্ষিক হয়ে দাঁড়ায়। আপনি চান ডেভেলপাররা আপনার কম্পোনেন্টটি গ্রহণ করুক, যাতে তারা এর পারফরম্যান্সগত সুবিধাগুলো ভোগ করতে পারে। এটি করা কঠিন হয়ে পড়ে যদি এমন একদল ব্যবহারকারী থাকে যারা মাইগ্রেট করতে পারে না এবং নিজেদের এই আলোচনা থেকে বাদ পড়া বলে মনে করে। তারা সম্ভবত হতাশা প্রকাশ করবে, যা নেতিবাচক ধারণা তৈরি করবে এবং কম্পোনেন্টটি গ্রহণে প্রভাব ফেলবে।
আপনার কম্পোনেন্টের জন্য একটি রোডম্যাপ থাকা বাঞ্ছনীয়, যা দীর্ঘমেয়াদে সমস্ত যুক্তিসঙ্গত ব্যবহারের ক্ষেত্রগুলো অন্তর্ভুক্ত করে। কম্পোনেন্টটি যে সমস্যাগুলো সমাধান করার জন্য তৈরি, সে সম্পর্কে প্রত্যাশা নির্ধারণের জন্য ডকুমেন্টেশনে কী সমর্থিত নয় এবং কেন, তা স্পষ্টভাবে উল্লেখ করাও সহায়ক।
উপসংহার
ইমেজের ব্যবহার ও অপ্টিমাইজেশন একটি জটিল বিষয়। ডেভেলপারদেরকে চমৎকার ইউজার এক্সপেরিয়েন্স নিশ্চিত করার পাশাপাশি ইমেজের পারফরম্যান্স ও কোয়ালিটির মধ্যে ভারসাম্য খুঁজে বের করতে হয়। এই কারণে ইমেজ অপ্টিমাইজেশন একটি উচ্চ-ব্যয়বহুল ও ব্যাপক প্রভাব সৃষ্টিকারী উদ্যোগ।
প্রতিটি অ্যাপকে বারবার নতুন করে সবকিছু তৈরি করার পরিবর্তে, আমরা একটি সেরা অনুশীলন টেমপ্লেট তৈরি করেছি যা ডেভেলপার, ফ্রেমওয়ার্ক এবং অন্যান্য টেক-স্ট্যাক তাদের নিজস্ব বাস্তবায়নের জন্য রেফারেন্স হিসেবে ব্যবহার করতে পারে। এই অভিজ্ঞতাটি নিঃসন্দেহে মূল্যবান প্রমাণিত হবে, যখন আমরা অন্যান্য ফ্রেমওয়ার্ককে তাদের ইমেজ কম্পোনেন্টগুলোতে সহায়তা করব।
Next.js ইমেজ কম্পোনেন্ট সফলভাবে Next.js অ্যাপ্লিকেশনগুলোর পারফরম্যান্স উন্নত করেছে, যার ফলে ব্যবহারকারীর অভিজ্ঞতাও বৃদ্ধি পেয়েছে। আমরা বিশ্বাস করি যে এটি একটি চমৎকার মডেল যা বৃহত্তর ইকোসিস্টেমেও ভালোভাবে কাজ করবে, এবং যেসব ডেভেলপার তাদের প্রোজেক্টে এই মডেলটি গ্রহণ করতে আগ্রহী, আমরা তাদের মতামত জানতে চাই।