রেসপন্সিভ ছবি — srcset, sizes, picture আর lazy loading

১ · সমস্যাটা কী — একটি ছবি, হাজার রকম পর্দা

ধরুন আপনার একটি অনলাইন শাড়ির দোকান আছে। ফটোগ্রাফার দামি ক্যামেরায় ছবি তুলে দিয়েছেন — প্রতিটি ছবি ৩০০০ পিক্সেল চওড়া, ফাইল কয়েক মেগাবাইট। আপনি সেই ফাইলই সাইটে তুলে দিলেন। বড় মনিটরে দারুণ দেখাচ্ছে।

এবার একজন ক্রেতার কথা ভাবুন। তিনি গ্রামের বাজারে বসে একটি কম দামের ফোনে, মোবাইল ডেটার ছোট প্যাকেজে আপনার সাইট খুলেছেন। তাঁর ফোনের পর্দায় ছবিটি দেখাবে বড়জোর কয়েকশো পিক্সেল চওড়ায়। অথচ ফোনটিকে নামাতে হচ্ছে পুরো ৩০০০ পিক্সেলের ফাইল। ফল তিনটি: পাতা খুলতে অনেক সময় লাগে, তাঁর কেনা ডেটার একটা বড় অংশ এক পাতাতেই শেষ হয়, আর দুর্বল ফোনটি বিশাল ছবি খুলতে গিয়ে গরম হয়, আটকে যায়। দশটি পণ্যের পাতায় দশ গুণ। অনেক ক্রেতা অপেক্ষা না করে চলে যান।

উল্টো দিকেও সমস্যা আছে। শুধু ছোট ফাইল দিলে আধুনিক ফোনে ছবি ঝাপসা লাগে। কারণ বেশিরভাগ ফোনের পর্দা খুব ঘন: একটি CSS pixel-এর জায়গায় সেখানে ২টি বা ৩টি আসল বিন্দু থাকে। এই অনুপাতের নাম device pixel ratio (DPR). ৩৬০ CSS পিক্সেল চওড়া একটি ফোনের DPR ৩ হলে পুরো চওড়া ছবিকে ঝকঝকে দেখাতে লাগে ৩৬০ × ৩ = ১০৮০টি আসল পিক্সেল। পর্ব ২০-এ একক নিয়ে যা দেখেছেন, এখানে সেটাই টাকার হিসাব হয়ে ফিরে আসছে।

রেসপন্সিভ ছবি আসলে তিনটি আলাদা সমস্যার নাম। প্রতিটির হাতিয়ার আলাদা — এই পার্থক্যটা মাথায় রাখলে বাকি পর্ব সহজ হয়ে যাবে:

<img>-এর ভিত্তি — src, alt, width/height আর ফরম্যাট বাছাই — আগেই পর্ব ০৬-এ দেখেছেন। এখানে আমরা সেই ভিত্তির ওপর দাঁড়িয়ে দেখব, কীভাবে একটি ছবিকে সব পর্দার জন্য মানানসই করা যায়।

২ · srcset আর x descriptor — নির্দিষ্ট মাপের ছবি, ঝকঝকে সব পর্দায়

সবচেয়ে সহজ ক্ষেত্র দিয়ে শুরু করি: এমন ছবি, যার চওড়া পর্দাভেদে বদলায় না। যেমন মন্তব্যের পাশে ৬৪ পিক্সেলের প্রোফাইল ছবি, বা হেডারে ১৬০ পিক্সেলের লোগো। এখানে একটাই প্রশ্ন: পর্দাটি কতটা ঘন? সাধারণ পর্দায় ৬৪ পিক্সেলের ফাইলই যথেষ্ট; DPR ২-এর ফোনে লাগবে ১২৮ পিক্সেলের ফাইল।

এর জন্য আছে srcset attribute. এর ভেতরে কমা দিয়ে আলাদা করে কয়েকটি ফাইল লেখা হয়, প্রতিটির পাশে একটি x descriptor: 1x মানে “সাধারণ পর্দার জন্য”, 2x মানে “দ্বিগুণ ঘন পর্দার জন্য”।

<img src="avatar-64.jpg"
     srcset="avatar-64.jpg 1x, avatar-128.jpg 2x, avatar-192.jpg 3x"
     width="64" height="64" alt="রহিমা আক্তার">

খেয়াল করুন, src রয়ে গেছে। যে খুব পুরোনো ব্রাউজার srcset চেনে না, সে src নেয়; আর আধুনিক ব্রাউজারের কাছে src হলো 1x-এর বিকল্প। width="64" লেখা থাকায় ফাইল যত বড়ই হোক, ছবি দেখাবে ৬৪ CSS পিক্সেলেই — বাড়তি পিক্সেল যায় ধারালো ভাবের জন্য, আকারের জন্য নয়।

নিচের এডিটরে চেনার সুবিধার জন্য ১x আর ২x-এ দুটি আলাদা প্রচ্ছদ দেওয়া হয়েছে (বাস্তবে এরা একই ছবির দুই মাপ হতো)। আপনার পর্দায় কোনটি এল দেখুন:

<img src="../image/c-programming-cover.jpg"
     srcset="../image/c-programming-cover.jpg 1x,
             ../image/python-programming-cover.jpg 2x"
     width="300" height="158"
     alt="কোর্সের প্রচ্ছদ">

<p>devicePixelRatio: <b id="dpr"></b> · এসেছে: <code id="file">…</code></p>
<script>
  var img = document.querySelector('img');
  function show() {
    document.getElementById('dpr').textContent = devicePixelRatio;
    document.getElementById('file').textContent = img.currentSrc.split('/').pop();
  }
  img.complete ? show() : img.addEventListener('load', show);
</script>

৩ · w descriptor আর sizes — ব্রাউজার কীভাবে ছবি বাছে

বেশিরভাগ ছবি কিন্তু নির্দিষ্ট মাপের নয়। খবরের সাইটে মূল ছবি ফোনে পুরো চওড়া, ট্যাবলেটে অর্ধেক, ডেস্কটপে এক-তৃতীয়াংশ। এখানে x descriptor অচল, কারণ ছবির ঘর নিজেই বদলাচ্ছে — ঘনত্ব জানলেও কাজ হয় না, ঘরের চওড়াও জানা দরকার।

সমাধান দুই ভাগে। প্রথম ভাগ: w descriptor দিয়ে প্রতিটি ফাইলের আসল চওড়া জানান — saree-800.jpg 800w মানে “এই ফাইলটি ৮০০ পিক্সেল চওড়া”। দ্বিতীয় ভাগ: sizes attribute দিয়ে জানান, পাতায় ছবির ঘর কত চওড়া হবে। এই দুটি তথ্য পেলে ব্রাউজার নিজেই অঙ্ক কষে নেয়। এই কৌশলের নাম resolution switching.

<img src="saree-800.jpg"
     srcset="saree-400.jpg 400w,
             saree-800.jpg 800w,
             saree-1600.jpg 1600w"
     sizes="(min-width: 900px) 33vw,
            100vw"
     width="1600" height="2000"
     alt="লাল পাড়ের সাদা জামদানি শাড়ি">

sizes পড়ার নিয়ম: কমা দিয়ে আলাদা করা কয়েকটি জোড়া, প্রতিটিতে একটি media শর্ত আর একটি চওড়া। ব্রাউজার বাঁ থেকে ডানে পড়ে, প্রথম যে শর্তটি মেলে সেটির চওড়া নেয়; শেষেরটির কোনো শর্ত নেই — সেটাই ডিফল্ট। ওপরের কোডের মানে: “viewport অন্তত ৯০০ পিক্সেল চওড়া হলে ছবির ঘর viewport-এর ৩৩%, নইলে পুরো viewport”. এখন ধাপে ধাপে ব্রাউজারের মাথার ভেতরে ঢুকি:

1<img src="saree-800.jpg"2     srcset="saree-400.jpg 400w,3             saree-800.jpg 800w,4             saree-1600.jpg 1600w"5     sizes="(min-width: 900px) 33vw,6            100vw"7     alt="জামদানি শাড়ি">

এবার নিজে দেখুন। আবার চেনার জন্য তিনটি আলাদা প্রচ্ছদ: C = ৪০০w, Python = ৮০০w, Java = ১৬০০w. CSS দিয়ে ছবিকে প্রিভিউর অর্ধেক চওড়ায় রাখা হয়েছে, তাই sizes="50vw" সত্যি কথাই বলছে:

<style>
  img { width: 50%; height: auto; }
</style>
<img src="../image/python-programming-cover.jpg"
     srcset="../image/c-programming-cover.jpg 400w,
             ../image/python-programming-cover.jpg 800w,
             ../image/java-programming-cover.jpg 1600w"
     sizes="50vw"
     width="1200" height="630" alt="কোর্সের প্রচ্ছদ">
<p>এসেছে: <code id="file">…</code></p>
<script>
  var img = document.querySelector('img');
  function show() {
    document.getElementById('file').textContent = img.currentSrc.split('/').pop();
  }
  img.complete ? show() : img.addEventListener('load', show);
</script>

sizes লেখার নিয়ম আর ফাঁদ

• sizes না দিলে ধরা হয় 100vw. সাইডবারের ছোট ছবিতে sizes ভুলে গেলে ব্রাউজার ভাববে ছবি পুরো পর্দা জুড়ে, আর অকারণে বড় ফাইল নামাবে — খুব সাধারণ ভুল।
• sizes-এ % চলে না। শতাংশ কিসের — ঘরের মা-বাবার? সেটা জানতে লেআউট লাগে, যা তখনো হয়নি। তাই vw, px, em বা calc(100vw - 2rem) লিখুন।
• শর্তের ক্রম জরুরি। প্রথম মিলই জেতে, তাই বড় min-width আগে লিখুন। পর্ব ৩১-এর media query-র জ্ঞান এখানে সরাসরি কাজে লাগে।
• একই srcset-এ x আর w মেশানো যায় না। হয় সব x, নয় সব w. আর w ব্যবহার করলে sizes দিন।
• মোটামুটি ঠিক হলেই চলে। sizes আপনার CSS-এর আন্দাজ মাত্র, পিক্সেল-নিখুঁত হওয়ার দরকার নেই। তবে CSS বদলালে sizes-ও বদলাতে মনে রাখুন — দুটি আলাদা জায়গায় একই তথ্য, এটাই এই পদ্ধতির দুর্বলতা।

৪ · picture আর media — ফোনের জন্য আলাদা করে কাটা ছবি (art direction)

বৈশাখী মেলার একটি ব্যানারের কথা ভাবুন: চওড়া ছবি, বাঁ দিকে নাগরদোলা, মাঝখানে লোকজন, ডান কোণে ছোট্ট একটি মাটির পুতুলের দোকান। ডেস্কটপে চমৎকার। ফোনে সেই একই ছবি ছোট হয়ে এমন ফিতার মতো হয় যে কিছুই বোঝা যায় না। এখানে ছোট ফাইল দিয়ে লাভ নেই — দরকার অন্যভাবে কাটা ছবি: ফোনে শুধু পুতুলের দোকানের কাছ থেকে তোলা অংশ, প্রায় বর্গাকার। এর নাম art direction — পত্রিকার আর্ট ডিরেক্টর যেমন পাতার মাপ দেখে ছবি কাটেন।

এর জন্য আছে <picture> element. এর ভেতরে কয়েকটি <source> আর শেষে একটি <img>. প্রতিটি <source>-এর media শর্ত থাকে; ব্রাউজার উপর থেকে নিচে পড়ে, প্রথম যে source-এর শর্ত মেলে সেটির srcset নেয়। কোনোটি না মিললে <img>-এর নিজের src/srcset.

<picture>
  <!-- ফোনে: শুধু লোগো, যাতে পড়া যায় -->
  <source media="(max-width: 600px)"
          srcset="../logo.webp"
          width="3162" height="1137">
  <!-- বাকি সবখানে: পুরো ব্যানার -->
  <img src="../image/ABCL-TECH-Cover.jpg"
       width="1280" height="720"
       style="max-width: 100%; height: auto"
       alt="ABCL TECH — বাংলায় প্রযুক্তি শিক্ষা">
</picture>

ওপরের এডিটরে লক্ষ করার মতো তিনটি নিয়ম:

• <source>-এ src নয়, srcset. (<video>-এর source-এ ছিল src — দুটো গুলিয়ে ফেলা খুব সাধারণ ভুল।) প্রতিটি source-এর srcset-এ আবার w descriptor আর sizes-ও দেওয়া যায়, অর্থাৎ art direction-এর সাথে মাপ বদলও একসাথে চলে।
• alt, loading, fetchpriority, class, style — সব <img>-এ। পর্দায় আঁকা হয় আসলে ওই <img>-টিই; <picture> শুধু একটি মোড়ক। তাই CSS-এ ছবির মাপ দিতে চাইলে picture img লিখুন।
• source-এ width/height. ফোনের কাটা ছবির অনুপাত আলাদা হলে <source>-এ নিজের width/height দিন, যাতে সেখানেও জায়গা আগে থেকে ঠিক থাকে (CLS না হয়)। সব প্রধান ব্রাউজারের নতুন সংস্করণে এটি কাজ করে; যে ব্রাউজার চেনে না, সে <img>-এর মাপ নেয়।

৫ · picture আর type — AVIF থেকে WebP থেকে JPEG

পর্ব ০৬-এ দেখেছেন, AVIF আর WebP একই মানের ছবি প্রায়ই JPEG-এর চেয়ে অনেক ছোট ফাইলে দেয়। কিন্তু সব ব্রাউজার সব ফরম্যাট চেনে না — বিশেষ করে বহুদিন আপডেট না হওয়া পুরোনো ফোন। সমাধান: <source>-এ type attribute দিয়ে ফাইলের MIME type লিখে দেওয়া। ব্রাউজার ফাইল না নামিয়েই বুঝে ফেলে, “এই ফরম্যাট আমি চিনি কি না”।

<picture>
  <source type="image/avif" srcset="saree-800.avif 800w, saree-1600.avif 1600w" sizes="(min-width: 900px) 33vw, 100vw">
  <source type="image/webp" srcset="saree-800.webp 800w, saree-1600.webp 1600w" sizes="(min-width: 900px) 33vw, 100vw">
  <img src="saree-800.jpg" srcset="saree-800.jpg 800w, saree-1600.jpg 1600w" sizes="(min-width: 900px) 33vw, 100vw"
       width="1600" height="2000" alt="লাল পাড়ের সাদা জামদানি শাড়ি" loading="lazy">
</picture>

এবার এই সাইটের দুটি আসল ফাইল দিয়ে দেখি: logo.webp (WebP) আর logo-white.png (PNG). প্রথম source-এ ইচ্ছে করে একটি কাল্পনিক ফরম্যাট লেখা হয়েছে, যা কোনো ব্রাউজার চেনে না:

<picture>
  <source type="image/x-future" srcset="../image/course.jpg">
  <source type="image/webp" srcset="../logo.webp">
  <img id="logo" src="../image/logo-white.png" width="300"
       style="height: auto; background: #0d1f3c"
       alt="ABCL TECH লোগো">
</picture>
<p>যে ফাইলটি এসেছে: <code id="out">…</code></p>
<script>
  var logo = document.getElementById('logo');
  function show() {
    var file = logo.currentSrc.split('/').pop();
    document.getElementById('out').textContent = file;
    console.log('currentSrc: ' + file);
  }
  logo.complete ? show() : logo.addEventListener('load', show);
</script>

৬ · কখন আনবেন — loading, fetchpriority আর decoding

কোন ফাইল আনবেন, তা ঠিক হলো। এবার প্রশ্ন: কখন আনবেন, আর কোনটি আগে? একটি পাতায় ৩০টি ছবি থাকলে সবগুলো একসাথে চাইলে ধীর নেটওয়ার্কে ভিড় লেগে যায় — ঢাকার জ্যামের মতো, যেখানে অ্যাম্বুলেন্সও আটকে থাকে। পাতার প্রথম পর্দার বড় ছবিটি (hero ছবি) হলো সেই অ্যাম্বুলেন্স: এটি যত দেরিতে আসে, LCP তত খারাপ।

সময় →         0s     1s     2s     3s
HTML           ██
hero.jpg         ░░░░░░████████        ← ভিড়ে আটকে
gallery 1–20     ██████████████        (নিচের ছবি, কেউ দেখছে না)
LCP                           ▲ ≈ 2.6s

সময় →         0s     1s     2s     3s
HTML           ██
style.css        ███
layout              ▪              ← lazy ছবি এর আগে আনা হয় না
hero.jpg             ░░████████    ← দেরিতে শুরু
LCP                             ▲ ≈ 2.9s

সময় →         0s     1s     2s     3s
HTML           ██
hero.jpg        ██████             ← preload scanner পেয়েই আগে আনে
gallery 1–3            ███         (পর্দার কাছে এলে)
gallery 4–20                       (স্ক্রল না করলে কখনোই না)
LCP                 ▲ ≈ 1.2s

              আগে        পরে
নামানো ছবি      21টি   →    1 + দেখা ছবিগুলো
LCP            ≈ 2.6s →    ≈ 1.2s
CLS            0     →    0       (সব ছবিতে width/height)
দর্শকের ডেটা    বেশি   →    অনেক কম

নিচের এডিটরে একটি লম্বা পাতা: উপরে একটি সাধারণ ছবি, তারপর অনেক ফাঁকা জায়গা, একদম নিচে একটি lazy ছবি। console-এ চোখ রাখুন, তারপর প্রিভিউর ভেতরে নিচে স্ক্রল করুন:

<p>নিচে স্ক্রল করুন ↓ আর console দেখুন</p>
<img src="../image/course.jpg" alt="কোর্সের ছবি"
     width="240" height="134" fetchpriority="high">

<div style="height: 5000px; background: linear-gradient(#fff, #cbd5e1)"></div>

<img id="far" src="../image/vibe-coding.jpg" alt="ভাইব কোডিং"
     width="240" height="134" loading="lazy" decoding="async">
<p>পাতার শেষ</p>

<script>
  document.querySelectorAll('img').forEach(function (img) {
    var name = img.src.split('/').pop();
    function done() { console.log('এসেছে: ' + name); }
    img.complete ? done() : img.addEventListener('load', done);
  });
</script>

৭ · CSS-এর দিক — object-fit, aspect-ratio, image-set() আর রেসপন্সিভ SVG

HTML ঠিক করে কোন ফাইল আসবে; CSS ঠিক করে সেটি পাতায় কেমন বসবে। রেসপন্সিভ লেআউটের প্রথম নিয়মটি আপনি পর্ব ৩০-এ দেখেছেন: img { max-width: 100%; height: auto; } — ছবি কখনো নিজের ঘরের চেয়ে চওড়া হবে না, আর উচ্চতা অনুপাত মেনে চলবে। এবার আরেক ধাপ এগোই।

object-fit আর object-position — ছবিকে ঘরে বসানো

অনলাইন দোকানের পণ্যের গ্রিডে সব কার্ড সমান মাপের হওয়া চাই, কিন্তু বিক্রেতাদের তোলা ছবি কোনোটা লম্বা, কোনোটা চওড়া। ছবিকে জোর করে বর্গাকার ঘরে বসালে টেনে চ্যাপ্টা হয়ে যায়। object-fit ঠিক করে ছবি তার ঘরে কীভাবে বসবে, আর object-position ঠিক করে কোন অংশটি ঘরের মাঝখানে থাকবে। আর aspect-ratio দিয়ে ঘরটিকে এক লাইনে বর্গাকার (বা ১৬:৯) করা যায়:

.row { display: flex; flex-wrap: wrap; gap: 12px; }
figure { margin: 0; text-align: center; }

img {
  width: 150px;
  height: auto;          /* height attribute-কে বাতিল করে */
  aspect-ratio: 1;       /* বর্গাকার ঘর */
  border: 2px solid #334155;
}

.fill    { object-fit: fill; }      /* ডিফল্ট: টেনে চ্যাপ্টা */
.cover   { object-fit: cover; }     /* ঘর ভরায়, কিনারা কাটে */
.contain { object-fit: contain; background: #e2e8f0; }
.pos     { object-fit: cover; object-position: left center; }

object-fit, object-position আর aspect-ratio তিনটিই Baseline Widely available. একটি সতর্কতা: cover ছবির কিনারা কাটে, তাই জরুরি কিছু (মুখ, দাম, লেখা) কিনারায় থাকলে object-position দিয়ে সেটি রক্ষা করুন — বা art direction-এর কথা ভাবুন। আর cover ছবির ফাইল ছোট করে না; ফাইলের পিক্সেল পুরোটাই নামে, শুধু অংশটি দেখায়।

image-set() — CSS background-এর srcset

সাজসজ্জার পটভূমি-ছবি HTML-এ নয়, CSS-এর background-image-এ থাকে (পর্ব ২২)। সেখানে srcset-এর মতো বিকল্প দিতে আছে image-set() function: প্রতিটি বিকল্পের সাথে 1x/2x ঘনত্ব, আর চাইলে type() দিয়ে ফরম্যাট। ব্রাউজার যে ফরম্যাট চেনে না সেটি বাদ দেয়, তারপর পর্দার ঘনত্বের সাথে মানানসইটি নেয়। w descriptor নেই — CSS-এ ঘরের চওড়া মেলাতে চাইলে media query লাগে।

.hero {
  min-height: 200px;
  padding: 16px;
  color: white;
  text-shadow: 0 1px 4px black;
  background-color: #0d1f3c;   /* ছবি না এলে */
  /* পুরোনো ব্রাউজারের জন্য আগে একটি সাধারণ url() */
  background-image: url("../image/course.jpg");
  background-image: image-set(
    url("../image/java-programming-cover.jpg") type("image/x-future"),
    url("../image/course.jpg") 1x,
    url("../image/vibe-coding.jpg") 2x
  );
  background-size: cover;
  background-position: center;
}

image-set()-এর prefix ছাড়া রূপ ২০২৩ সালে সব প্রধান ব্রাউজারে পৌঁছেছে (Baseline); পুরোনো কোডে -webkit-image-set() দেখবেন — এখন আর দরকার নেই। মনে রাখুন, background-ছবির alt নেই; তাই তথ্যপূর্ণ ছবি (পণ্য, মানুষ, চার্ট) সবসময় <img>-এ রাখুন।

রেসপন্সিভ SVG — একটি ফাইলই যথেষ্ট

SVG ছবি vector, তাই এর জন্য srcset লাগে না: একই ফাইল ৫০ পিক্সেলেও ঝকঝকে, ২০০০ পিক্সেলেও। রেসপন্সিভ করার চাবি হলো viewBox — আঁকার খাতার নিজস্ব মাপ। viewBox থাকলে বাইরে থেকে শুধু চওড়া দিলেই চলে, উচ্চতা অনুপাত মেনে আসে:

<svg viewBox="0 0 300 120" role="img" aria-label="বিক্রি: জানুয়ারি ৪০, ফেব্রুয়ারি ৭০, মার্চ ১০০"
     style="width: 100%; height: auto; max-width: 600px">
  <rect x="10"  y="80" width="60" height="40"  fill="#16a34a"/>
  <rect x="110" y="50" width="60" height="70"  fill="#16a34a"/>
  <rect x="210" y="20" width="60" height="100" fill="#16a34a"/>
</svg>

inline SVG-তে width/height attribute না দিলে কিছু পরিস্থিতিতে সেটি ঘরের পুরো চওড়া নিয়ে নেয়, আর <img src="logo.svg">-এ ফাইলের ভেতরে মাপ না থাকলে আকার অনুমান কঠিন হয় — তাই নিরাপদ অভ্যাস: viewBox রাখুন, <img>-এ width/height দিন, আর CSS-এ max-width: 100%; height: auto. ঘর আর খাতার অনুপাত না মিললে কী হবে, তা ঠিক করে preserveAspectRatio (ডিফল্ট: মাঝখানে বসাও, পুরোটা দেখাও — অনেকটা object-fit: contain-এর মতো)। SVG-র পুরো জগৎ পর্ব ৪৪-এ।

৮ · ছবির কারখানা আর যাচাই — টুল, image CDN, DevTools ও currentSrc

একটি ছবির ৩টি মাপ × ৩টি ফরম্যাট = ৯টি ফাইল। ২০০ পণ্যের দোকানে প্রায় দুই হাজার ফাইল। হাতে বানানো অসম্ভব — এই কাজ করে যন্ত্র। তিন রকম পথ আছে:

build tool দেখতে কেমন, তার একটি ছোট নমুনা — Node.js আর sharp দিয়ে একটি ছবি থেকে কয়েকটি মাপের AVIF আর WebP:

import sharp from 'sharp';

const widths = [400, 800, 1600];
for (const w of widths) {
  await sharp('saree.jpg').resize({ width: w }).avif({ quality: 50 }).toFile(`saree-${w}.avif`);
  await sharp('saree.jpg').resize({ width: w }).webp({ quality: 75 }).toFile(`saree-${w}.webp`);
  await sharp('saree.jpg').resize({ width: w }).jpeg({ quality: 80, mozjpeg: true }).toFile(`saree-${w}.jpg`);
}

আর একটি image CDN-এর ঠিকানা সাধারণত এমন দেখায় (প্রতিটি সেবার নিয়ম আলাদা, এটি শুধু ধারণা দেওয়ার জন্য): https://img.example.com/saree.jpg?w=800&format=auto. format=auto মানে সার্ভার ব্রাউজারের পাঠানো Accept header দেখে ঠিক করবে AVIF, WebP না JPEG — একে বলে content negotiation. তখন HTML-এ <picture>-এর type ছাড়াই শুধু srcset লিখলেই চলে। সুবিধা বড়, তবে খরচ, নির্দিষ্ট কোম্পানির ওপর নির্ভরতা আর সেই সেবা বন্ধ হলে কী হবে — এসবও ভাবুন। ছোট সাইটের জন্য build tool প্রায়ই যথেষ্ট আর বিনামূল্যে।

কোন ছবি আসলে এল — যাচাইয়ের তিন উপায়

1. Network panel. F12 → Network → ফিল্টারে Img. পাতা আবার লোড করুন (প্রথমে “Disable cache” চিহ্ন দিন, নইলে cache-এর ফাইল বিভ্রান্ত করবে)। কোন ফাইল এল, কত KB, কখন শুরু হলো আর Priority কলামে (ডান-ক্লিক করে কলাম যোগ করতে হয়) কত গুরুত্ব পেল — সব দেখা যায়।
2. Device toolbar. Ctrl + Shift + M দিয়ে ফোনের মাপ আর DPR বেছে নিন, তারপর Network-এ দেখুন ফোনে কোন ফাইল নামছে। প্রতিবার মাপ বদলের পর cache বন্ধ রেখে আবার লোড করুন।
3. currentSrc. Elements প্যানেলে ছবিটি বেছে Console-এ $0.currentSrc লিখুন — ব্রাউজার যে ঠিকানা বেছে নিয়েছে, সেটা দেখাবে। img.src কিন্তু সবসময় শুধু src attribute-এর লেখাই দেয়, বাছাই করা ফাইল নয়।

নিচের ছোট মাপার যন্ত্রটি একসাথে সব দেখায়: viewport, DPR, প্রতিটি ছবি কোন ফাইল নিল, কত চওড়ায় দেখাচ্ছে আর সেই চওড়ায় ঝকঝকে দেখাতে আসলে কত পিক্সেল দরকার:

// প্রতিটি ছবি: কোন ফাইল এল, কত চওড়ায় দেখাচ্ছে, কত পিক্সেল দরকার
function report() {
  console.log('viewport: ' + innerWidth + 'px, devicePixelRatio: ' + devicePixelRatio);
  document.querySelectorAll('img').forEach(function (img) {
    var file = img.currentSrc.split('/').pop();
    var need = Math.round(img.clientWidth * devicePixelRatio);
    console.log('#' + img.id + ' -> ' + file);
    console.log('   shown ' + img.clientWidth + ' CSS px, needs ~' + need + ' device px');
  });
}
// সব ছবি আসা আর layout শেষ হওয়া পর্যন্ত অপেক্ষা, তারপর মাপা
(function wait() {
  var ready = document.body.offsetWidth > 0 &&
    Array.from(document.images).every(function (i) { return i.complete; });
  ready ? report() : setTimeout(wait, 50);
})();

৯ · AI-এর যুগে রেসপন্সিভ ছবি

AI-কে “একটা ই-কমার্স প্রোডাক্ট গ্রিড বানাও” বললে সুন্দর কোড আসে, কিন্তু ছবির অংশে প্রায়ই পুরোনো বা আধা-সঠিক অভ্যাস থাকে। কারণ AI শিখেছে বহু বছরের কোড থেকে, যার বেশিরভাগ লেখা হয়েছিল srcset আর lazy loading আসার আগে বা ভুলভাবে। আর ছবির ভুল চোখে ধরা পড়ে না — ছবি তো দেখাচ্ছেই! ধরা পড়ে দর্শকের ডেটার বিলে আর Lighthouse-এর রিপোর্টে।

AI-এর দেওয়া ছবির কোড যাচাইয়ের চেকলিস্ট

• sizes-এর প্রতিটি সংখ্যা নিজের CSS লেআউটের সাথে মিলিয়েছি — কলাম, gap আর padding ধরে
• DevTools-এর Network (Img, cache বন্ধ) আর Device toolbar দিয়ে ফোন ও ডেস্কটপে কোন ফাইল নামছে দেখেছি; কোনো ছবি দরকারের চেয়ে অনেক বড় নয়
• Lighthouse চালিয়ে LCP, CLS আর “Properly size images”, “Serve images in modern formats” ধরনের পরামর্শ দেখেছি
• validator.w3.org-এ শূন্য error — w descriptor থাকলে sizes না থাকা, source-এ src, x ও w মেশানো এখানে ধরা পড়ে
• নতুন কিছু (যেমন sizes="auto", কোনো নতুন ফরম্যাট) দেখলে MDN-এর Baseline চিহ্ন আর Can I use-এ সাপোর্ট মিলিয়েছি