Next.js ইমেজ অপটিমাইজেশনের জন্য একটি বিল্ট-ইন Image কম্পোনেন্ট প্রদান করে, যা ওয়েবপেজে ইমেজ লোডিং এবং প্রদর্শনকে আরও দক্ষ এবং দ্রুত করে তোলে। এটি স্বয়ংক্রিয়ভাবে ইমেজকে সাইজ, রেজোলিউশন, এবং ফরম্যাটে অপটিমাইজ করে, যাতে আপনার ওয়েবসাইটের লোডিং টাইম কমে যায় এবং SEO (Search Engine Optimization) উন্নত হয়।
Next.js এর Image কম্পোনেন্ট ইমেজ অপটিমাইজেশন, লাজি লোডিং, এবং রেসপনসিভিটি (responsive) সমর্থন করে, যা ডেভেলপারদের জন্য অত্যন্ত উপকারী।
এখানে Next.js Image কম্পোনেন্ট ব্যবহার করে কিভাবে ইমেজ প্রদর্শন করা যায়, তা বিস্তারিতভাবে আলোচনা করা হলো।
১. Next.js Image কম্পোনেন্ট ব্যবহার করা
Next.js এ ইমেজ ব্যবহারের জন্য আপনাকে next/image মডিউল থেকে Image কম্পোনেন্ট ইম্পোর্ট করতে হবে। এরপর আপনি এই কম্পোনেন্টে ইমেজের সোর্স, আউটপুট সাইজ, ইমেজের লোডিং পদ্ধতি এবং অন্যান্য অপশন নির্ধারণ করতে পারেন।
উদাহরণ:
import Image from 'next/image'
export default function MyComponent() {
return (
<div>
<h1>Welcome to Next.js!</h1>
<Image
src="/images/my-image.jpg"
alt="A sample image"
width={500}
height={300}
/>
</div>
)
}
এখানে:
src: ইমেজের সোর্স (এটি স্ট্যাটিক ফাইল হতে পারে যাpublic/ফোল্ডারে রাখা থাকে অথবা একটি URL হতে পারে)।alt: ইমেজের বর্ণনা। এটি SEO এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।widthএবংheight: ইমেজের আউটপুট সাইজ। এটি আপনার ইমেজকে রেসপনসিভভাবে রেন্ডার করতে সহায়তা করে।
২. ইমেজ অপটিমাইজেশন
Next.js এর Image কম্পোনেন্ট স্বয়ংক্রিয়ভাবে ইমেজ অপটিমাইজেশন সম্পন্ন করে। এর ফলে ইমেজের সাইজ কমে যায় এবং লোডিং স্পিড বেড়ে যায়। ইমেজটি সঠিক রেজোলিউশনে লোড হয় এবং বিভিন্ন স্ক্রীনে (ডিভাইসের স্ক্রীন সাইজ অনুযায়ী) এটি রেসপনসিভ হয়।
Next.js আপনার ইমেজের সাইজ এবং ফরম্যাটে অপটিমাইজেশন করতে পারে (যেমন JPEG, PNG, WEBP ইত্যাদি)। এটি মোবাইল এবং ডেস্কটপে ইমেজের সর্বোত্তম রেজোলিউশন নিশ্চিত করে।
৩. লাজি লোডিং (Lazy Loading)
Next.js এর Image কম্পোনেন্ট লাজি লোডিং সমর্থন করে, অর্থাৎ ইমেজটি তখনই লোড হয় যখন এটি ভিউপোর্টে (দেখা যায় এমন অংশে) আসবে। এর ফলে ওয়েবপেজের প্রাথমিক লোড টাইম কমে যায় এবং ব্যান্ডউইথ সাশ্রয় হয়।
এটি ডিফল্টভাবে সক্রিয় থাকে এবং আপনি ইচ্ছেমতো এটি বন্ধ করতে পারেন loading="eager" প্যারামিটার দিয়ে।
<Image
src="/images/my-image.jpg"
alt="A sample image"
width={500}
height={300}
loading="eager" // ইমেজটি প্রাথমিক লোডের সময়ই লোড হবে
/>
৪. Responsive ইমেজ
Next.js এর Image কম্পোনেন্ট রেসপনসিভ ইমেজ সমর্থন করে, যা বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী ইমেজের সাইজ স্বয়ংক্রিয়ভাবে ঠিক করে।
এটি করতে আপনি layout="responsive" অপশন ব্যবহার করতে পারেন। এই অপশনে আপনি শুধুমাত্র ইমেজের width এবং height উল্লেখ করবেন, এবং কম্পোনেন্টটি তা রেসপনসিভভাবে রেন্ডার করবে।
উদাহরণ:
<Image
src="/images/my-image.jpg"
alt="A responsive image"
width={1200}
height={800}
layout="responsive"
/>
এখানে layout="responsive" এর মাধ্যমে ইমেজটি সঠিক রেসপনসিভ সাইজে পরিণত হবে, এবং এটি স্ক্রীন সাইজের উপর নির্ভর করে নিজেকে মানিয়ে নেবে।
৫. ইমেজ সোর্স হিসেবে URL ব্যবহার
Next.js এর Image কম্পোনেন্ট শুধুমাত্র লোকাল ফাইলের জন্য নয়, বাইরের সোর্স (যেমন একটি CDN বা API থেকে আসা ইমেজ) থেকেও ইমেজ লোড করতে পারে। তবে, বাইরের সোর্স থেকে ইমেজ লোড করার আগে আপনাকে next.config.js ফাইলে সেই ডোমেইনটির অনুমতি দিতে হবে।
উদাহরণ:
// next.config.js
module.exports = {
images: {
domains: ['example.com'],
},
}
এখন আপনি example.com ডোমেইনের সোর্স থেকে ইমেজ ব্যবহার করতে পারবেন:
<Image
src="https://example.com/images/remote-image.jpg"
alt="Remote image"
width={500}
height={300}
/>
৬. কাস্টম সাইজ এবং ফরম্যাট
Next.js এর Image কম্পোনেন্ট আপনাকে কাস্টম সাইজ এবং ফরম্যাট সেট করার সুযোগ দেয়, যাতে ইমেজটি আপনার চাহিদা অনুযায়ী সঠিকভাবে অপটিমাইজড হয়।
উদাহরণ:
<Image
src="/images/my-image.jpg"
alt="A custom size image"
width={800}
height={600}
quality={75} // ইমেজের কোয়ালিটি (0 থেকে 100)
format="webp" // কাস্টম ফরম্যাট (যেমন: webp)
/>
এখানে quality এবং format প্যারামিটার দিয়ে আপনি ইমেজের কোয়ালিটি এবং ফরম্যাট নিয়ন্ত্রণ করতে পারেন।
সারাংশ
Next.js এর Image কম্পোনেন্ট একটি শক্তিশালী টুল, যা ইমেজ অপটিমাইজেশন, লাজি লোডিং, রেসপনসিভ ইমেজ লোডিং, এবং বাইরের সোর্স থেকে ইমেজ লোড করার ক্ষমতা প্রদান করে। এটি আপনার ওয়েবপেজের লোডিং স্পিড উন্নত করতে সহায়ক এবং SEO ফ্রেন্ডলি ওয়েবসাইট তৈরি করার জন্য অত্যন্ত উপযোগী।
Read more
