Next.js এর বিল্ট-ইন Image কম্পোনেন্ট ব্যবহার করে ইমেজ অপটিমাইজেশন করা যায়। এটি ইমেজের সাইজ কমায়, লেজি লোডিং করে এবং ডিভাইস অনুযায়ী রেসপন্সিভ ইমেজ সার্ভ করে।
// আগের কোড
<img src="/images/hero.jpg" alt="Hero Image" className="w-full h-auto" />
// অপটিমাইজড কোড
import Image from 'next/image'
<Image
src="/images/hero.jpg"
alt="Hero Image"
width={1200}
height={600}
priority={true} // হিরো ইমেজের জন্য priority=true দিন
className="w-full h-auto"
/>অপটিমাইজেশন টিপস:
- priority অ্যাট্রিবিউট ব্যবহার করুন: ফোল্ড-এর উপরে থাকা গুরুত্বপূর্ণ ইমেজের জন্য
priority={true}ব্যবহার করুন। এটি LCP (Largest Contentful Paint) উন্নত করবে। - sizes অ্যাট্রিবিউট ব্যবহার করুন: ব্রাউজারকে জানান ইমেজ কত স্পেস নিবে:
<Image
src="/images/hero.jpg"
alt="Hero Image"
width={1200}
height={600}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>- placeholder ব্যবহার করুন: ইমেজ লোড হওয়ার আগে একটি ব্লার প্লেসহোল্ডার দেখাতে:
<Image
src="/images/hero.jpg"
alt="Hero Image"
width={1200}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
/>