ওয়েবসাইটের গতি বাড়াতে ইমেজ অপ্টিমাইজেশন: সম্পূর্ণ গাইড

ইমেজ = পেজের মোট ওজনের প্রায় ৫০%। এগুলো অপ্টিমাইজ করাই সবচেয়ে বড় পারফরম্যান্স উন্নতি।

---

কেন ইমেজ অপ্টিমাইজ করবেন?

• ৫৩% মোবাইল ব্যবহারকারী সাইট ছেড়ে দেন যদি লোডিং ৩ সেকেন্ডের বেশি লাগে
• ১ সেকেন্ডের দেরি = ৭% কম কনভার্সন
• Core Web Vitals (LCP, CLS) সরাসরি Google র‍্যাংকিংকে প্রভাবিত করে

---

ধাপ ১: সঠিক ফরম্যাট বেছে নিন

• WebP — সব ওয়েবের জন্য সেরা (JPEG-এর চেয়ে ২৫–৩৫% ছোট)
• PNG — ট্রান্সপারেন্সি, লোগো, স্ক্রিনশটের জন্য
• JPEG — যখন WebP পাওয়া যায় না তখন ফটোর জন্য
• SVG — আইকন ও লোগোর জন্য
• AVIF — নেক্সট-জেন, WebP fallback-সহ ব্যবহার করুন

---

ধাপ ২: কম্প্রেস করুন

TinyImg ব্যবহার করুন — ফ্রি, প্রাইভেট, তাৎক্ষণিক।

---

ধাপ ৩: রেসপন্সিভ ইমেজ

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

---

ধাপ ৪: Lazy Loading

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

উপরের দিকের (above-fold) ইমেজে কখনো lazy load করবেন না। সবসময় width/height সেট করুন।

---

ধাপ ৫: ইমেজ ডাইমেনশন

<img src="photo.webp" alt="Photo" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

ধাপ ৬: CDN ব্যবহার করুন

Cloudflare (ফ্রি টিয়ার), Cloudinary, imgix, Vercel।

---

ধাপ ৭: পারফরম্যান্স পরিমাপ করুন

• LCP লক্ষ্যমাত্রা: ২.৫ সেকেন্ডের নিচে
• CLS লক্ষ্যমাত্রা: ০.১-এর নিচে
• মোট ইমেজ: ৫০০KB-এর নিচে

টুল: PageSpeed Insights, Lighthouse, WebPageTest।

---

অপ্টিমাইজেশন চেকলিস্ট

• WebP ফরম্যাট
• TinyImg দিয়ে কম্প্রেস করুন
• srcset + sizes
• শুধু নিচের ইমেজে lazy load
• সব ইমেজে width + height
• CDN চালু
• PageSpeed Insights অডিট

TinyImg — এখান থেকে শুরু করুন, একদম ফ্রি।