-এর ভেতরে কেন বিকল্প লেখা রাখা যায় না, অথচ -এ যায়? এই ছোট সিদ্ধান্তের দাম ওয়েব কীভাবে দিয়েছে?

১৯৯৩ সালে ওয়েব তখনো একদম নতুন। Marc Andreessen মেইলিং লিস্টে -এর প্রস্তাব দেন, আর প্রায় সাথে সাথেই নিজের Mosaic ব্রাউজারে চালু করে দেন। Tim Berners-Lee-সহ কয়েকজন চেয়েছিলেন আরও সাধারণ একটি ট্যাগ — যেমন বা — যা ছবি, শব্দ বা অন্য যেকোনো ফাইল আনতে পারবে, আর ভেতরে বিকল্প লেখা রাখা যাবে। কিন্তু Mosaic দ্রুত জনপ্রিয় হলো, হাজার হাজার পাতায় লেখা হয়ে গেল, আর ওয়েবের নিয়ম হলো — চালু হয়ে যাওয়া জিনিস আর ভাঙা যায় না। ফলাফল: একটি void element, ভেতরে কিছু রাখা যায় না। তাই বিকল্প লেখার জন্য পরে alt attribute যোগ করতে হলো (HTML 2.0-তে)। কিন্তু attribute-এর ভেতরে শুধু সাধারণ লেখা চলে — লিংক, তালিকা বা টেবিল নয়। একটি চার্টের পূর্ণ বর্ণনা তাই alt-এ ঢোকানো যায় না। পরের প্রায় তিন দশক ধরে ওয়েব এই সিদ্ধান্তের চারপাশে কাজ করেছে।

HTML Images & Video — ছবি, অডিও, ভিডিও ও iframe বাংলায় | পর্ব ০৬

Q: Google Maps embed করা যায়, কিন্তু google.com বা ব্যাংকের সাইট iframe-এ খোলে না কেন? এর পেছনের আক্রমণটি কী?

আক্রমণটির নাম clickjacking . ধরুন একটি প্রতারক সাইট বানাল “ফ্রি মোবাইল রিচার্জ — এখানে চাপুন” বোতাম। ঠিক বোতামের ওপরে সে একটি অদৃশ্য iframe বসাল ( opacity: 0 ), যার ভেতরে আপনার ব্যাংক বা সোশ্যাল মিডিয়ার একটি পাতা — যেখানে আপনি আগে থেকেই লগইন করা। আপনি ভাবছেন রিচার্জের বোতাম চাপছেন, আসলে চাপছেন অদৃশ্য পাতার “টাকা পাঠান” বা “পোস্ট শেয়ার করুন” বোতাম। ২০০৮ সালের দিকে নিরাপত্তা গবেষকেরা এই কৌশলটি প্রকাশ্যে দেখান, আর তখন একটি জনপ্রিয় প্লাগইনের সেটিংস পাতাকে এভাবে ব্যবহার করে ক্যামেরা-মাইক্রোফোনের অনুমতি আদায়ের পদ্ধতিও দেখানো হয়েছিল। সমাধান এল সার্ভারের দিক থেকে। প্রথমে Microsoft তাদের Internet Explorer 8-এ একটি HTTP header চালু করে — X-Frame-Options , যার মান DENY (কারও জানালায় নয়) বা SAMEORIGIN (শুধু নিজের সাইটে)। অন্য ব্রাউজারগুলোও দ্রুত এটি গ্রহণ করে।

এক নজরে · TL;DR

ছবি পেজের ভেতরে থাকে না। <img> শুধু ঠিকানা দেয়; ব্রাউজার আলাদা করে ফাইলটি এনে বসায়। তাই src-এর path ঠিক হওয়া চাই।
alt হলো ছবির বিকল্প লেখা। যিনি চোখে দেখেন না, যাঁর ইন্টারনেট ধীর, আর Google — সবাই ছবিকে চেনে alt দিয়ে। শুধু সাজসজ্জার ছবিতে alt="".
width আর height সবসময় দিন। এতে ছবি আসার আগেই ব্রাউজার জায়গা রেখে দেয়, লেখা লাফায় না (CLS কমে)।
ঠিক ফরম্যাট: ছবি তোলা ফটো → WebP/AVIF বা JPEG; লোগো ও আইকন → SVG; স্বচ্ছ স্ক্রিনশট → PNG বা WebP; GIF-এর বদলে ছোট ভিডিও।
ভিডিও, অডিও আর iframe: controls দিন, শব্দসহ autoplay নয়, <track> দিয়ে বাংলা subtitle, আর প্রতিটি iframe-এ title, loading="lazy" ও প্রয়োজনমতো sandbox.

এই পর্বে যা শিখবেন

ব্রাউজার কীভাবে একটি ছবি খুঁজে আনে, জায়গা রাখে আর পর্দায় আঁকে
তিন রকম ছবির জন্য তিন রকম alt — informative, decorative আর functional
JPEG, PNG, GIF, WebP, AVIF আর SVG — কোন কাজে কোনটি, আর কেন
<figure>, lazy loading, অডিও-ভিডিও, বাংলা subtitle আর caption
YouTube ও Google Maps নিরাপদে বসানো — title, sandbox, allow আর গোপনীয়তার দিক

১ · ছবি পেজের ভেতরে থাকে না — img, src আর alt

একটি অনলাইন দোকানের কথা ভাবুন। পণ্যের পাতায় শাড়ির ছবি, দাম, “অর্ডার করুন” বোতাম। HTML ফাইল খুললে আপনি দাম আর বোতামের লেখা পাবেন, কিন্তু ছবিটি পাবেন না। পাবেন শুধু একটি লাইন — “ছবিটা অমুক জায়গায় রাখা আছে।”

এটাই <img> ট্যাগের মূল কথা। এটি ছবি নয়, ছবির ঠিকানা। ব্রাউজার HTML পড়তে পড়তে <img> পেলে সার্ভারের কাছে আলাদা একটি অনুরোধ পাঠায়: “এই ফাইলটা দাও।” একটি পাতায় ২০টি ছবি থাকলে ব্রাউজার HTML ছাড়াও আরও ২০টি ফাইল আনে।

দর্জির দোকানের অর্ডার স্লিপের কথা ভাবুন। স্লিপে লেখা থাকে “নীল কাপড়, তাক নম্বর ৩”। স্লিপটি কাপড় নয় — কাপড় কোথায় আছে তার নির্দেশ। <img src="..."> ঠিক সেই স্লিপ। তাক নম্বর ভুল হলে (path ভুল হলে) কাপড় আসবে না, ফাঁকা জায়গা থাকবে।

সবচেয়ে ছোট সঠিক ছবির কোডে চারটি attribute থাকে:

Attribute	কাজ	না দিলে কী হয়
`src`	ছবির ফাইল কোথায় — relative বা absolute path (পর্ব ৫)	কিছুই দেখাবে না; এটি বাধ্যতামূলক
`alt`	ছবির বিকল্প লেখা — ছবি না দেখা গেলে বা না দেখলে যা জানানো দরকার	Screen reader ফাইলের নাম পড়তে পারে, যেমন “IMG underscore 2043 dot jpg”
`width`	ছবির প্রস্থ, পিক্সেলে (শুধু সংখ্যা, `px` লিখবেন না)	ছবি আসার আগে ব্রাউজার জায়গা রাখতে পারে না
`height`	ছবির উচ্চতা, পিক্সেলে	ওই একই — পেজ লাফিয়ে ওঠে

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

<h3>কোর্সের প্রচ্ছদ</h3>
<img src="../image/computer-fundamentals-cover.jpg"
     alt="কম্পিউটার ফান্ডামেন্টালস কোর্সের প্রচ্ছদ"
     width="300" height="158">

<h3>এই ফাইলটি সার্ভারে নেই</h3>
<img src="../image/dhaka-metro-rail.jpg"
     alt="উত্তরা স্টেশনে দাঁড়িয়ে থাকা ঢাকা মেট্রোরেল">
<p>ছবি না এলে ব্রাউজার alt-এর লেখাটি দেখায়।</p>

প্রথম ছবিটি ঠিকঠাক এসেছে, ৩০০×১৫৮ পিক্সেলের ঘরে। দ্বিতীয়টির ফাইল নেই, তাই ব্রাউজার একটি ছোট “ভাঙা ছবি” চিহ্ন আর alt-এর লেখাটি দেখাচ্ছে — দুর্বল নেটওয়ার্কে বা ভুল path-এ আপনার দর্শক ঠিক এটাই দেখেন। চেষ্টা করুন: প্রথম ছবির width-কে 150 আর height-কে 79 করুন। তারপর শুধু width="150" রেখে height মুছে দিন — ছবি কি অনুপাত ঠিক রাখল?

মূল ধারণা

<img> একটি void element — এর ভেতরে কিছু লেখা যায় না, তাই </img> বলে কিছু নেই। আবার এটি একটি replaced element: পেজে এর জায়গায় বসে বাইরের একটি জিনিস (ছবির ফাইল), যার নিজস্ব আকার আছে। ডিফল্টভাবে ছবি লেখার মতো inline — লাইনের ভেতরে শব্দের পাশে বসে। এ কারণে ছবির নিচে প্রায়ই একটু অদ্ভুত ফাঁক দেখা যায় — ছবি বসে লেখার লাইনের baseline-এ, আর তার নিচে g, y-এর মতো অক্ষরের লেজের জায়গা ফাঁকা থাকে। CSS-এ ছবিকে display: block দিলে ফাঁকটি চলে যায় (normal flow আর display নিয়ে বিস্তারিত পর্ব ২৩-এ)।

১৯৯৩ সালের ফেব্রুয়ারিতে, তখনকার ছাত্র Marc Andreessen ওয়েবের মেইলিং লিস্টে একটি নতুন ট্যাগের প্রস্তাব দেন — <IMG SRC="..."> — এবং নিজের তৈরি Mosaic ব্রাউজারে সেটি চালু করে দেন। অন্যরা চেয়েছিলেন আরও সাধারণ একটি ট্যাগ, যার ভেতরে বিকল্প লেখাও রাখা যায়। কিন্তু যেটা আগে চালু হয়, ওয়েবে সেটাই টিকে যায়। ভেতরে কিছু রাখা যায় না বলেই পরে alt attribute যোগ করতে হয়েছে।

২ · width আর height — লাফিয়ে ওঠা পেজ (CLS) বন্ধ করুন

মোবাইলে খবরের সাইট পড়ছেন। একটি লিংকে চাপ দিতে যাবেন, ঠিক সেই মুহূর্তে উপরে একটি ছবি এসে বসল — পুরো লেখা নিচে নেমে গেল, আর আপনার আঙুল পড়ল একটি বিজ্ঞাপনে। বিরক্তিকর, তাই না? এর নাম layout shift, আর পুরো পেজ জুড়ে এই লাফালাফির মোট হিসাবকে বলে CLS (Cumulative Layout Shift).

কেন এমন হয়? ব্রাউজার HTML পায় আগে, ছবির ফাইল পায় পরে। width-height না দিলে ছবির আকার সে আগে থেকে জানে না, তাই প্রথমে কোনো জায়গাই রাখে না। ছবি এসে পৌঁছালে তখন জায়গা বানাতে নিচের সবকিছু ঠেলে দেয়। নিচের ডায়াগ্রামে ধাপে ধাপে দেখুন:

width/height নেইHTML এসেছে, ছবি এখনো আসেনি

┌───────────────────────────┐
│ জামদানি শাড়ি — ৳৪,৫০০       │
│ (ছবির জায়গা: ০ পিক্সেল)    │
│ [ অর্ডার করুন ]  ← আঙুল     │
└───────────────────────────┘

width/height নেইছবি এল — সব নিচে লাফ

┌───────────────────────────┐
│ জামদানি শাড়ি — ৳৪,৫০০       │
│ ┌───────────────────────┐ │
│ │   শাড়ির ছবি (৩০০px)   │ │
│ │                       │ │  ← আঙুল পড়ল ছবিতে!
│ └───────────────────────┘ │
│ [ অর্ডার করুন ]  ↓ নেমে গেছে │
└───────────────────────────┘

width="400" height="300"ছবি আসেনি, কিন্তু খালি ঘর তৈরি

┌───────────────────────────┐
│ জামদানি শাড়ি — ৳৪,৫০০       │
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │
│   খালি ঘর — অনুপাত 4:3    │
│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │
│ [ অর্ডার করুন ]  ← আঙুল     │
└───────────────────────────┘

width="400" height="300"ছবি এসে ঘরে বসল — কিছু নড়ল না

┌───────────────────────────┐
│ জামদানি শাড়ি — ৳৪,৫০০       │
│ ┌───────────────────────┐ │
│ │   শাড়ির ছবি            │ │
│ └───────────────────────┘ │
│ [ অর্ডার করুন ]  ← আঙুল ঠিক জায়গায়│
└───────────────────────────┘

width/height ছাড়া, ছবি আসার আগে। ব্রাউজার জানে না ছবি কত বড়, তাই উচ্চতা ধরে নিয়েছে শূন্য। “অর্ডার করুন” বোতাম উপরে উঠে এসেছে, আপনি সেখানে চাপ দিতে যাচ্ছেন।
ছবি এসে পৌঁছাল। এখন ব্রাউজার জানল ছবিটি ৩০০ পিক্সেল উঁচু, তাই নিচের সবকিছু ঠেলে নামিয়ে দিল। আপনার আঙুল পড়ল ভুল জায়গায়। এটাই layout shift — CLS-এর হিসাবে এটি যোগ হয়।
width আর height দেওয়া থাকলে। ছবি আসার আগেই ব্রাউজার attribute দুটি থেকে অনুপাত (৪০০:৩০০ = 4:3) হিসাব করে ঠিক মাপের একটি খালি ঘর রেখে দেয়। বোতাম শুরু থেকেই নিজের আসল জায়গায়।
ছবি এসে নিজের ঘরে বসল। কিছুই নড়ল না, CLS শূন্য। খরচ মাত্র দুটি attribute. এজন্যই নিয়ম: প্রতিটি <img>-এ আসল ছবির width আর height লিখুন।

একটি সাধারণ ভুল ধারণা আছে: “আমি তো CSS দিয়ে ছবি ছোট-বড় করব, তাহলে HTML-এ মাপ লিখে কী হবে?” উত্তর: attribute-এর আসল কাজ এখন অনুপাত জানানো। আধুনিক ব্রাউজার width="400" height="300" দেখে ভেতরে ভেতরে ছবিকে aspect-ratio: 400 / 300 দিয়ে দেয়। CSS-এ width: 100%; height: auto; লিখলেও সেই অনুপাত থাকে, তাই ঘরটি ঠিক মাপেরই হয়। নিচের এডিটরে দুটি ভাঙা ছবি দিয়ে “ছবি আসার আগের” অবস্থাটা দেখুন:

<p><b>১. মাপ ছাড়া</b> — ছবি আসার আগে প্রায় কোনো জায়গা নেই:</p>
<img src="../image/eid-offer.jpg" alt="ঈদ অফার"
     style="display:inline-block; background:#e5e7eb">
<p style="background:#fde68a">নিচের লেখা — ছবি এলে এটি লাফ দেবে</p>

<p><b>২. মাপসহ</b> — ব্রাউজার আগেই ঘর রেখে দিয়েছে:</p>
<img src="../image/eid-offer.jpg" alt="ঈদ অফার"
     width="240" height="135"
     style="display:inline-block; background:#e5e7eb">
<p style="background:#bbf7d0">নিচের লেখা — এটি আর নড়বে না</p>

দুটি ছবির ফাইলই নেই — ধরে নিন এখনো আসেনি। (ফাইল একদম না পেলে ব্রাউজার ভাঙা ছবিকে সাধারণ লেখার মতো দেখায়, তাই এখানে display:inline-block আর ধূসর পটভূমি দিয়ে ঘরটি চোখে পড়ার মতো করা হয়েছে; ফাইল আসার অপেক্ষায় থাকা আসল ছবি এমনিতেই এভাবে ঘর পায়।) প্রথমটির জন্য ব্রাউজার শুধু alt লেখার মতো ছোট্ট জায়গা রেখেছে; আসল ছবি এলে হলুদ লাইনটি অনেক নিচে নেমে যেত। দ্বিতীয়টির জন্য ২৪০×১৩৫ পিক্সেলের একটি ঘর আগেই তৈরি, সবুজ লাইন নিজের আসল জায়গায়। চেষ্টা করুন: দ্বিতীয় ছবিতে height-কে 270 করুন — ঘরটি কেমন বদলায়? তারপর প্রথম ছবিতেও একই মাপ বসিয়ে দেখুন।

আরও গভীরে: HTML স্ট্যান্ডার্ড বলে, <img>-এর width আর height attribute ব্রাউজারের নিজস্ব স্টাইলে aspect-ratio: auto 400 / 300 হিসেবে বসবে। এখানে auto মানে: ছবির ফাইল এসে গেলে ফাইলের নিজের অনুপাতই জিতবে, তার আগে পর্যন্ত attribute-এর অনুপাত দিয়ে ঘর রাখা হবে। ২০১৯–২০২০ সালের দিকে বড় ব্রাউজারগুলো এই আচরণ চালু করে। তার আগে CSS-এ height: auto দিলে attribute-এর তথ্য হারিয়ে যেত, তাই অনেক ডেভেলপার width/height লেখা ছেড়েই দিয়েছিলেন — পুরোনো টিউটোরিয়ালে আজও সেই অভ্যাস দেখবেন।

CLS হলো Google-এর Core Web Vitals-এর তিনটি মাপকাঠির একটি। ০.১ বা তার কম হলে “ভালো” ধরা হয়। এটি সার্চ র‍্যাংকিংয়ে প্রভাব ফেলে, আর তার চেয়েও বড় কথা — ব্যবহারকারীর বিরক্তি কমায়। পুরো হিসাব পর্ব ৪৯-এ দেখবেন।

৩ · ভালো alt লেখার কৌশল — তিন রকম ছবি, তিন রকম উত্তর

alt লেখার সময় নিজেকে একটি প্রশ্ন করুন: “ফোনে কাউকে এই পাতাটি পড়ে শোনালে ছবির জায়গায় কী বলতাম?” উত্তরটিই আপনার alt. যিনি চোখে দেখেন না, তিনি screen reader নামের সফটওয়্যার দিয়ে পাতা শোনেন — আর সেই সফটওয়্যার ছবির জায়গায় alt-টাই পড়ে।

alt সবার জন্য এক রকম নয়। ছবিটি পাতায় কী কাজ করছে, তার ওপর নির্ভর করে। নিচের সিদ্ধান্তের পথটি ধাপে ধাপে দেখুন:

শুধু সাজসজ্জা?alt=""screen reader চুপ
লিংক বা বোতাম?alt="হোম পেজ"কাজটির নাম
ছবিতে লেখা?alt="৫০% ছাড়"লেখাটাই লিখুন
তথ্য দিচ্ছে?alt="…বর্ণনা"প্রসঙ্গমতো ছোট বর্ণনা

Decorative — শুধু সাজসজ্জা। শিরোনামের পাশে একটি ফুলের নকশা, কার্ডের কোণে একটি রেখা। এগুলো সরিয়ে দিলে কোনো তথ্য হারায় না। তাই alt="" (খালি, কিন্তু attribute আছে)। screen reader ছবিটিকে পুরো এড়িয়ে যায়। খেয়াল করুন: alt একদম না লিখলে কিন্তু ফল উল্টো — অনেক screen reader তখন ফাইলের নাম পড়ে শোনায়।
Functional — লিংক বা বোতামের ভেতরে। লোগোতে চাপলে হোম পেজে যায়, বা একটি 🔍 আইকন খোঁজার বোতাম। এখানে ছবির চেহারা নয়, কাজটি বলুন: alt="ABCL TECH হোম পেজ", alt="খুঁজুন"। “নীল রঙের ম্যাগনিফাইং গ্লাস” লিখলে শ্রোতা বুঝবেন না চাপলে কী হবে।
লেখাওয়ালা ছবি। ব্যানারে লেখা “ঈদ অফার — সব পণ্যে ৫০% ছাড়”। alt-এ সেই লেখাটাই হুবহু দিন। আরও ভালো উপায়: লেখা ছবির ভেতরে না রেখে আসল HTML লেখা হিসেবে রাখুন — তখন খোঁজা যায়, অনুবাদ করা যায়, বড়ও করা যায়।
Informative — তথ্য দিচ্ছে। খবরে বন্যার ছবি, পণ্যের ছবি, একটি চার্ট। প্রসঙ্গ অনুযায়ী যা জরুরি সেটুকু লিখুন, সাধারণত এক-দুই বাক্যে। “ছবি” বা “image of” লিখবেন না — screen reader নিজেই আগে “ছবি” বলে দেয়। চার্টের পুরো তথ্য alt-এ ঢোকে না; তখন পাশে লেখা বা টেবিলে তথ্যটি দিন।

প্রসঙ্গ	দুর্বল alt	ভালো alt
অনলাইন দোকানে পণ্য	`alt="shari.jpg"`	`alt="লাল পাড়ের সাদা জামদানি শাড়ি, সামনে থেকে তোলা"`
খবর: নদীভাঙন	`alt="ছবি"`	`alt="যমুনার ভাঙনে নদীতে ধসে পড়া একটি টিনের ঘর"`
লোগো, যা হোম পেজের লিংক	`alt="লোগো"`	`alt="ABCL TECH — হোম পেজ"`
সেকশনের মাঝে নকশার রেখা	`alt="সুন্দর নকশা"`	`alt=""`
একই ছবি, পাশে পুরো বর্ণনা লেখা আছে	বর্ণনা আবার alt-এ	`alt=""` — একই কথা দুবার শোনানো অপ্রয়োজনীয়

একই ছবির alt প্রসঙ্গভেদে বদলায়। ক্রিকেটারের একটি ছবি খেলার খবরে হতে পারে “ছক্কা মারার পর ব্যাট উঁচিয়ে উদযাপন”, আর পোশাকের বিজ্ঞাপনে “নতুন জার্সি পরা খেলোয়াড়, সামনের দিক”। তাই alt লেখার কাজ পুরোপুরি যন্ত্রের হাতে ছেড়ে দেওয়া যায় না। আর alt-এ কখনো কিওয়ার্ড ঠাসবেন না (“শাড়ি শাড়ি সস্তা শাড়ি ঢাকা”) — এটি screen reader ব্যবহারকারীর জন্য যন্ত্রণা, আর সার্চ ইঞ্জিনও একে স্প্যাম ধরে।

alt হলো WCAG নির্দেশিকার একেবারে প্রথম নিয়ম (১.১.১ Non-text Content, Level A) — অর্থাৎ ন্যূনতম মান। অ্যাক্সেসিবিলিটির পুরো ছবি পাবেন পর্ব ১২-তে।

৪ · কোন ছবির জন্য কোন ফরম্যাট — JPEG, PNG, GIF, WebP, AVIF, SVG

ছবির ফাইল মূলত দুই জাতের। Raster ছবি হলো ছোট ছোট রঙিন বিন্দুর (pixel) গ্রিড — মোবাইলে তোলা প্রতিটি ছবি এমন। বড় করলে বিন্দুগুলো চোখে পড়ে, ছবি ঝাপসা হয়। Vector ছবি হলো আঁকার নির্দেশ — “এখানে একটি বৃত্ত, এই রঙে” — তাই যত বড়ই করুন, ধার থাকে ঝকঝকে।

raster ছবি ছোট করার দুই কৌশল। Lossy সংকোচন চোখে কম পড়ে এমন খুঁটিনাটি ফেলে দেয় — ফাইল অনেক ছোট হয়, কিন্তু ফেলে দেওয়া তথ্য আর ফেরে না। Lossless সংকোচন কিছুই ফেলে না, শুধু চালাকি করে গুছিয়ে রাখে — মান ঠিক থাকে, ফাইল তুলনামূলক বড়। কম্পিউটারে ছবি কীভাবে সংখ্যা হয়, সেটি জানতে চাইলে কম্পিউটার ফান্ডামেন্টালস কোর্সের এই পর্বটি দেখুন।

ফরম্যাট	জাত	স্বচ্ছতা / অ্যানিমেশন	কখন ব্যবহার করবেন	সাপোর্ট
JPEG (.jpg)	raster, lossy	না / না	ক্যামেরায় তোলা ছবি, যখন পুরোনো সব জায়গায় চলা জরুরি	সর্বত্র
PNG	raster, lossless	হ্যাঁ / না	স্ক্রিনশট, ধারালো রেখার গ্রাফিক, স্বচ্ছ পটভূমি — ফটোর জন্য নয় (ফাইল বিশাল হয়)	সর্বত্র
GIF	raster, মাত্র ২৫৬ রং	আংশিক / হ্যাঁ	এখন প্রায় কোথাও নয় — অ্যানিমেশনের জন্য ছোট MP4/WebM ভিডিও বা animated WebP অনেক ছোট হয়	সর্বত্র
WebP	raster, lossy ও lossless	হ্যাঁ / হ্যাঁ	প্রায় সব কাজে JPEG ও PNG-এর আধুনিক বদলি; একই মানে সাধারণত বেশ ছোট	Baseline Widely available
AVIF	raster, lossy ও lossless	হ্যাঁ / হ্যাঁ	বড় ফটো, যেখানে প্রতিটি কিলোবাইট দামি; প্রায়ই WebP-র চেয়েও ছোট, তবে বানাতে (encode) সময় বেশি লাগে	Baseline 2024 — সব প্রধান ব্রাউজারে ২০২৪ সাল থেকে; পুরোনো ব্রাউজারের জন্য fallback রাখুন
SVG	vector (লেখা আকারে আঁকার নির্দেশ)	হ্যাঁ / হ্যাঁ	লোগো, আইকন, চার্ট, নকশা — যা যেকোনো আকারে ঝকঝকে থাকা চাই	সর্বত্র

📷 ফটো হলে

AVIF বা WebP, সাথে JPEG fallback. মোবাইলের ৪ মেগাবাইটের ছবি সরাসরি তুলে দেবেন না — আগে দরকারি মাপে ছোট করে সংকোচন করুন।

পণ্য, খবর, ব্যানার

✏️ লোগো বা আইকন হলে

SVG. এক ফাইলেই মোবাইল থেকে ৪K মনিটর — সব জায়গায় ধারালো, আর ফাইল প্রায়ই মাত্র কয়েক কিলোবাইট।

লোগো, আইকন, চার্ট

🖼️ স্ক্রিনশট হলে

PNG বা lossless WebP. লেখা আর রেখা ঝকঝকে থাকে; JPEG-এ লেখার চারপাশে ময়লা দাগ (artifact) পড়ে।

টিউটোরিয়াল, UI ছবি

🎞️ চলমান ছবি হলে

GIF নয়। <video autoplay muted loop playsinline>-এ একটি ছোট MP4 বা WebM — প্রায়ই কয়েক গুণ ছোট।

ডেমো, মিম, অ্যানিমেশন

SVG যেহেতু আসলে লেখা (XML), তাই একে সরাসরি HTML-এর ভেতরেই লেখা যায় — একে বলে inline SVG. নিচে বাংলাদেশের পতাকা আঁকা হয়েছে মাত্র দুটি আকার দিয়ে, আর একই কোড দুই মাপে দেখানো হয়েছে:

<svg width="200" height="120" viewBox="0 0 100 60"
     role="img" aria-label="বাংলাদেশের জাতীয় পতাকা">
  <rect width="100" height="60" fill="#006a4e"/>
  <circle cx="45" cy="30" r="20" fill="#f42a41"/>
</svg>

<svg width="50" height="30" viewBox="0 0 100 60"
     role="img" aria-label="বাংলাদেশের জাতীয় পতাকা, ছোট">
  <rect width="100" height="60" fill="#006a4e"/>
  <circle cx="45" cy="30" r="20" fill="#f42a41"/>
</svg>

দুটি পতাকাই একই নির্দেশ থেকে আঁকা — viewBox="0 0 100 60" বলছে “আঁকার খাতাটা ১০০×৬০ ঘরের”, আর width/height বলছে পর্দায় সেটা কত বড় দেখাবে। তাই ছোট-বড় যাই করুন, বৃত্তের ধার ঝাপসা হয় না। (পতাকার আসল অনুপাত ১০:৬, লাল বৃত্ত মাঝখান থেকে একটু বাঁয়ে।) চেষ্টা করুন: প্রথমটির width-কে 500 আর height-কে 300 করুন; তারপর cx-কে 50 করে দেখুন বৃত্ত ঠিক মাঝে গেলে কেমন লাগে। SVG-র পুরো জগৎ দেখবেন পর্ব ৪৪-এ।

SVG ফাইলের ভেতরে script-ও রাখা যায়। তবে <img src="logo.svg"> দিয়ে দেখালে ব্রাউজার সেই script চালায় না — ছবিটি শুধু ছবি হিসেবেই আঁকা হয়। তাই ব্যবহারকারীর আপলোড করা SVG কখনো inline বসাবেন না; বসাতে হলে <img> দিয়ে দেখান।

৫ · figure, figcaption আর lazy loading

পত্রিকায় ছবির নিচে ছোট করে লেখা থাকে — “ছবি: সংগৃহীত” বা “বন্যায় প্লাবিত সিলেট শহর”। HTML-এ এই জোড়ার জন্য আছে <figure> আর <figcaption>. <figure> হলো একটি স্বয়ংসম্পূর্ণ অংশ, যা মূল লেখা থেকে সরিয়ে পাশে বা পরিশিষ্টে রাখলেও অর্থ ঠিক থাকে — ছবি, চার্ট, কোডের টুকরো, এমনকি একটি উদ্ধৃতিও। <figcaption> তার শিরোনাম বা বিবরণ; এটি <figure>-এর প্রথম বা শেষ সন্তান হতে হয়।

পাতার অনেক নিচের ছবি ব্যবহারকারী হয়তো কখনো স্ক্রল করে দেখবেনই না। তাহলে শুরুতেই সেগুলো আনা মানে তাঁর মোবাইল ডেটা আর সময় নষ্ট। loading="lazy" দিলে ব্রাউজার ছবিটি আনে তখনই, যখন সেটি পর্দার কাছাকাছি আসে — একে বলে lazy loading. এটি <img>-এর জন্য Baseline Widely available, কোনো JavaScript লাগে না।

<figure>
  <img src="../image/course.jpg"
       alt="ল্যাপটপের সামনে একদল তরুণ, পাশে ভাসছে আলোর তৈরি একটি মস্তিষ্ক"
       width="320" height="178"
       loading="lazy" decoding="async">
  <figcaption>ছবি ৬.১ — একসাথে শেখা, একসাথে বানানো।</figcaption>
</figure>

<figure>
  <img src="../logo.webp" alt="ABCL TECH-এর লোগো"
       width="200" height="72">
  <figcaption>ছবি ৬.২ — WebP ফরম্যাটের লোগো।</figcaption>
</figure>

ব্রাউজার নিজে থেকেই <figure>-এর দুই পাশে ফাঁকা জায়গা (margin) দিয়েছে — CSS ছাড়াই এটি ব্রাউজারের ডিফল্ট চেহারা। ক্যাপশন ছবির নিচে, কারণ কোডে সেটি শেষে আছে। চেষ্টা করুন: প্রথম <figcaption> লাইনটি কেটে <img>-এর উপরে বসান — ক্যাপশন উপরে চলে যাবে। ছোট প্রিভিউতে lazy loading-এর পার্থক্য চোখে পড়বে না; DevTools-এর Network প্যানেলে লম্বা পাতায় স্ক্রল করলে দেখবেন ছবিগুলো ধীরে ধীরে আসছে।

কোন ছবিতে lazy দেবেন না

পাতা খুলতেই প্রথম পর্দায় যে বড় ছবিটি দেখা যায় (hero ছবি, ব্যানার), সেটিতে loading="lazy" দেবেন না। ব্রাউজার তখন লেআউট বুঝে নিশ্চিত হওয়া পর্যন্ত ছবি আনতে দেরি করে, ফলে পাতার সবচেয়ে বড় জিনিসটি দেরিতে আসে — Core Web Vitals-এর আরেকটি মাপ LCP খারাপ হয়। বরং এমন ছবিতে fetchpriority="high" দিয়ে বলুন “এটা আগে আনো”। fetchpriority Baseline Newly available (২০২৪); যে ব্রাউজার চেনে না, সে attribute-টি চুপচাপ উপেক্ষা করে, তাই ক্ষতি নেই।

Attribute	মান	কী বলে
`loading`	`lazy` / `eager`	পর্দার কাছে এলে আনো / এখনই আনো (ডিফল্ট `eager`)
`decoding`	`async` / `sync` / `auto`	ছবির ফাইল খুলে pixel বানানোর কাজ বাকি পাতাকে আটকে রেখে করবে কি না — একটি ইঙ্গিত মাত্র, প্রভাব সাধারণত সামান্য
`fetchpriority`	`high` / `low` / `auto`	অন্য ফাইলের তুলনায় এটি কত জরুরি

এক ঝলক: এক ছবির অনেক মাপ (পর্ব ৩২-এর আগাম স্বাদ)

মোবাইলে ৪০০ পিক্সেল চওড়া ছবিই যথেষ্ট, অথচ বড় মনিটরে লাগে ১৬০০। একই ফাইল সবাইকে পাঠালে হয় মোবাইলের ডেটা নষ্ট, নয়তো মনিটরে ঝাপসা ছবি। সমাধান হলো srcset আর <picture> — ব্রাউজারকে কয়েকটি বিকল্প দিয়ে বলা, “পর্দা দেখে যেটা মানায়, সেটাই বেছে নাও”। নিচের কোডটি শুধু চেহারা চেনার জন্য; প্রতিটি অংশের মানে পর্ব ৩২-এ বিস্তারিত দেখবেন:

<!-- একই ছবির তিনটি মাপ: ব্রাউজার পর্দা দেখে বাছবে -->
<img src="saree-800.jpg"
     srcset="saree-400.jpg 400w, saree-800.jpg 800w, saree-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="লাল পাড়ের সাদা জামদানি শাড়ি" width="800" height="1000">

<!-- নতুন ফরম্যাট আগে, না চিনলে পুরোনোটি -->
<picture>
  <source srcset="saree.avif" type="image/avif">
  <source srcset="saree.webp" type="image/webp">
  <img src="saree.jpg" alt="লাল পাড়ের সাদা জামদানি শাড়ি" width="800" height="1000">
</picture>

৬ · অডিও আর ভিডিও — controls, autoplay, poster, source আর track

একসময় ওয়েবে ভিডিও চালাতে Flash-এর মতো আলাদা plugin লাগত। HTML5 থেকে ব্রাউজার নিজেই ভিডিও আর অডিও চালায় — <video> আর <audio> দিয়ে। দুটির নিয়ম প্রায় এক।

Attribute	কাজ	মনে রাখুন
`controls`	Play, pause, শব্দ, সময়রেখা, পূর্ণ পর্দা — ব্রাউজারের নিজের বোতাম	না দিলে ব্যবহারকারী ভিডিও থামাতেই পারবেন না; প্রায় সবসময় দিন
`poster`	ভিডিও চালানোর আগে যে ছবি দেখাবে (শুধু video)	না দিলে প্রথম frame বা কালো পর্দা
`preload`	`none` / `metadata` / `auto` — আগে থেকে কতটা আনবে	মোবাইল ডেটার কথা ভেবে `metadata` বা `none` ভালো
`autoplay`	পাতা খুললেই চালু	শব্দসহ হলে ব্রাউজার সাধারণত আটকে দেয় — নিচে দেখুন
`muted`, `loop`	শব্দ বন্ধ অবস্থায় শুরু / শেষ হলে আবার শুরু	পটভূমির ছোট ভিডিওতে তিনটি একসাথে
`playsinline`	iPhone-এ ভিডিও পাতার ভেতরেই চলবে, পূর্ণ পর্দায় লাফ দেবে না	পটভূমির ভিডিওতে দরকার

Autoplay-র নিয়ম: শব্দসহ ভিডিও নিজে থেকে বেজে ওঠা মানুষের সবচেয়ে অপছন্দের জিনিসগুলোর একটি — অফিসে, মসজিদে বা রাতে পাশের মানুষ ঘুমিয়ে থাকলে তো কথাই নেই। তাই আধুনিক ব্রাউজার শব্দসহ autoplay সাধারণত আটকে দেয়, যতক্ষণ না ব্যবহারকারী পাতায় নিজে কিছু চাপেন। autoplay muted একসাথে দিলে প্রায় সব জায়গায় চলে। এই autoplay policy ব্রাউজারভেদে একটু আলাদা, তাই “autoplay হবেই” ধরে নিয়ে কখনো জরুরি তথ্য শুধু ভিডিওতে রাখবেন না।

এক ভিডিও, কয়েকটি ফাইল — ব্রাউজার কীভাবে বাছে

ভিডিও ফাইলের ভেতরের ছবি আর শব্দ সংকোচন করা থাকে একটি codec দিয়ে (যেমন H.264, VP9, AV1). সব ব্রাউজার সব codec চেনে না। তাই src একটির বদলে কয়েকটি <source> দেওয়া যায় — ব্রাউজার উপর থেকে নিচে পড়ে, যেটি প্রথম চালাতে পারে সেটিই বেছে নেয়। সবচেয়ে নিরাপদ শেষ বিকল্প হলো H.264 codec-এর MP4, যা কার্যত সব ব্রাউজারে চলে।

1<video controls width="640" height="360"2       poster="cover.jpg">3  <source src="class.webm" type="video/webm">4  <source src="class.mp4" type="video/mp4">5  <track kind="subtitles" src="bn.vtt"6         srclang="bn" label="বাংলা" default>7  <track kind="captions" src="en.vtt" srclang="en">8  ভিডিও চলছে না? <a href="class.mp4">ডাউনলোড</a>9</video>

ব্রাউজারের ভাবনা

প্রশ্ন
সিদ্ধান্ত

ঘর আর poster. width/height দেখে ব্রাউজার ৬৪০×৩৬০ ঘর রাখে (ছবির মতোই, লাফ নেই), আর ভিডিও চালানোর আগ পর্যন্ত cover.jpg দেখায়। controls থাকায় ▶ বোতামও আছে।
প্রথম source. ব্রাউজার type দেখে নিজেকে জিজ্ঞেস করে, “আমি কি WebM চালাতে পারি?” ধরা যাক এই ব্রাউজার পারে না — সে ফাইলটি না নামিয়েই পরেরটিতে যায়। type না লিখলে তাকে ফাইল নামিয়ে পরীক্ষা করতে হতো; তাই type লেখা জরুরি।
দ্বিতীয় source. MP4 চালাতে পারে, তাই এটিই চূড়ান্ত। বাকি <source> থাকলেও আর দেখবে না। ক্রমটাই অগ্রাধিকার: ছোট আর আধুনিক ফাইল উপরে, সবার জন্য চলে এমন ফাইল নিচে।
বাংলা subtitle. <track> একটি WebVTT লেখার ফাইল জুড়ে দেয়। srclang="bn" জানায় ভাষা বাংলা, label হলো মেনুতে দেখানো নাম, আর default থাকায় এটি শুরু থেকেই চালু।
দ্বিতীয় track. ইংরেজি captions মেনুতে থাকে, দর্শক চাইলে বেছে নেবেন। kind="captions" মানে এতে শুধু কথা নয়, শব্দের বর্ণনাও আছে (যেমন “[দরজায় টোকা]”) — যাঁরা কানে শোনেন না, তাঁদের জন্য।
ভেতরের লেখা। <video>-এর ভেতরের সাধারণ লেখা শুধু সেই খুব পুরোনো ব্রাউজার দেখায়, যে video ট্যাগই চেনে না। আধুনিক ব্রাউজার এটি উপেক্ষা করে ভিডিও চালায়। মনে রাখুন: ফরম্যাট চালাতে না পারলে এই লেখা দেখানো হয় না — সেজন্যই একাধিক source দেওয়া।

এবার নিজে দেখুন ব্রাউজারের নিজের বোতামগুলো কেমন। এই সাইটে কোনো ভিডিও ফাইল রাখা নেই, তাই ▶ চাপলে চলবে না — কিন্তু poster, নিয়ন্ত্রণ-বোতাম আর জায়গা রাখা ঠিকই দেখতে পাবেন:

<video controls width="320" height="168" preload="none"
       poster="../image/computer-fundamentals-cover.jpg">
  <source src="../media/class.webm" type="video/webm">
  <source src="../media/class.mp4" type="video/mp4">
  ভিডিও চলছে না? <a href="../media/class.mp4">ডাউনলোড করুন</a>
</video>

<p>পডকাস্ট — পর্ব ১:</p>
<audio controls preload="none">
  <source src="../media/podcast.mp3" type="audio/mpeg">
</audio>

উপরে ৩২০×১৬৮ পিক্সেলের ঘরে poster ছবি আর ব্রাউজারের নিজের ▶ বোতাম, নিচে অডিও প্লেয়ারের সরু দণ্ড। প্রতিটি ব্রাউজারে এদের চেহারা একটু আলাদা — এগুলো ব্রাউজারের নিজস্ব নকশা। চেষ্টা করুন: <video> থেকে controls মুছে দিন — বোতাম উধাও, ব্যবহারকারীর হাতে আর কোনো নিয়ন্ত্রণ নেই। তারপর poster-এর মান মুছে দেখুন ঘরটি কেমন দেখায়।

বাংলা subtitle — একটি সাধারণ লেখার ফাইল

WebVTT ফাইল দেখতে খুব সাধারণ: প্রথম লাইনে WEBVTT, তারপর প্রতিটি অংশে সময় আর লেখা। ফাইলটি অবশ্যই UTF-8-এ সেভ করবেন, নইলে বাংলা ভেঙে যাবে (কেন, তা পর্ব ১৪-তে দেখবেন)। ছোট ক্লাস-ভিডিওর জন্য এমন একটি bn.vtt:

WEBVTT

00:00:00.000 --> 00:00:04.000
আসসালামু আলাইকুম! আজ আমরা পেজে ছবি বসানো শিখব।

00:00:04.500 --> 00:00:09.000
প্রথমে দরকার img ট্যাগ আর তার src attribute.

subtitles আর captions এক নয়। kind="subtitles" হলো অনুবাদ বা কথার লিখিত রূপ — যিনি শোনেন কিন্তু ভাষা বোঝেন না, তাঁর জন্য। kind="captions"-এ কথার সাথে গুরুত্বপূর্ণ শব্দের বর্ণনাও থাকে — যিনি শোনেন না, তাঁর জন্য। WCAG অনুযায়ী আগে রেকর্ড করা ভিডিওতে captions দেওয়া ন্যূনতম মানের (Level A) অংশ। একটি সতর্কতা: track ফাইল অন্য ডোমেইনে থাকলে সেই সার্ভারকে অনুমতি (CORS) দিতে হয়, নইলে ব্রাউজার ফাইলটি নেবে না — সবচেয়ে সহজ হলো ভিডিওর পাশেই নিজের সাইটে রাখা।

৭ · iframe — অন্যের পেজ নিজের পেজের জানালায়

আপনার কোচিং সেন্টারের ওয়েবসাইটে YouTube-এর একটি ক্লাস-ভিডিও আর Google Maps-এ অফিসের ঠিকানা দেখাতে চান। এগুলো আপনার ফাইল নয়, অন্যের সাইটের পুরো একটি পাতা। এর জন্য আছে <iframe> — নিজের পাতায় একটি জানালা কাটা, যার ভেতর দিয়ে অন্য একটি পাতা দেখা যায়। জানালার ভেতরের পাতাটি নিজের মতো চলে, নিজের script চালায়, নিজের cookie রাখে।

YouTube-এ ভিডিওর নিচে Share → Embed চাপলে একটি কোড পাবেন। নিচের ডায়াগ্রামে তার প্রতিটি অংশ ধাপে ধাপে দেখুন:

src — কোন পাতা দেখাবে। YouTube-এর সাধারণ ঠিকানা (watch?v=) নয়, embed-এর ঠিকানা লাগে। youtube-nocookie.com হলো YouTube-এর “privacy-enhanced” মোড — দর্শক ভিডিও না চালানো পর্যন্ত বিজ্ঞাপন-ট্র্যাকিংয়ের cookie কম রাখা হয়।
title — জানালার নাম। screen reader iframe-এ পৌঁছে এই নামটি পড়ে, যাতে ব্যবহারকারী বোঝেন ভেতরে কী আছে। “iframe” বা “video” নয় — নির্দিষ্ট করে লিখুন। WCAG মানতে প্রতিটি iframe-এর একটি নাম দরকার (4.1.2, Level A), আর title-ই তার সহজ ও প্রচলিত উপায়।
width/height — জানালার মাপ। ছবির মতোই আগে থেকে জায়গা রাখে। মোবাইলে মাপ মানিয়ে নিতে CSS-এ width: 100%; height: auto; aspect-ratio: 16 / 9; দেওয়া হয় — aspect-ratio এখন Baseline Widely available, পুরোনো “padding-top: 56.25%” কৌশল আর লাগে না।
loading="lazy" — একটি YouTube embed নিজেই কয়েকশো কিলোবাইট script আনে। পাতার নিচে থাকলে lazy দিন, পর্দার কাছে এলে তবেই লোড হবে। iframe-এর জন্যও এটি এখন Baseline.
allow — কোন ক্ষমতা দেবেন। এটি Permissions Policy: ভেতরের পাতা autoplay, পূর্ণ পর্দা, picture-in-picture, ক্যামেরা বা লোকেশন ব্যবহার করতে পারবে কি না। যা দরকার শুধু তা-ই দিন। allowfullscreen পূর্ণ পর্দার অনুমতি দেয়।
referrerpolicy — ভেতরের সাইটকে জানানো হবে আপনার পাতার শুধু ডোমেইন (পুরো ঠিকানা নয়)। এটি ব্রাউজারের ডিফল্টও। YouTube-এর মতো কিছু সেবা কোন সাইটে embed হয়েছে তা জানতে চায়; referrer পুরো বন্ধ করলে ভিডিও না-ও চলতে পারে।

সম্পূর্ণ কোড নিচে। এগুলো বাইরের সাইট থেকে আসে, তাই এই পাতার নিরাপদ প্রিভিউতে চালানো হচ্ছে না — নিজের HTML ফাইলে বসিয়ে দেখুন। VIDEO_ID-এর জায়গায় আসল ভিডিওর আইডি আর Maps-এর pb=… অংশে Google Maps-এর Share → Embed a map থেকে পাওয়া কোড বসাতে হবে।

<!-- YouTube ভিডিও -->
<iframe width="560" height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="HTML শেখার ক্লাস — ছবি যোগ করা"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen></iframe>

<!-- Google Maps — অফিসের ঠিকানা -->
<iframe src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450" style="border:0;"
  title="আমাদের অফিসের অবস্থান — মিরপুর ১০, ঢাকা"
  loading="lazy" allowfullscreen
  referrerpolicy="no-referrer-when-downgrade"></iframe>

sandbox — জানালায় গ্রিল লাগানো

অচেনা কারও পাতা, বিজ্ঞাপন বা ব্যবহারকারীর দেওয়া HTML দেখাতে হলে sandbox attribute দিন। খালি sandbox মানে সব বন্ধ: script চলবে না, ফর্ম জমা হবে না, popup খুলবে না, মূল পাতাকে অন্য ঠিকানায় পাঠাতে পারবে না, আর ভেতরের পাতাকে একটি “অচেনা” origin ধরা হবে। তারপর allow-scripts, allow-forms, allow-popups-এর মতো শব্দ দিয়ে শুধু দরকারি দরজাগুলো খুলুন। (মজার ব্যাপার: এই কোর্সের প্রতিটি লাইভ প্রিভিউ নিজেই একটি sandbox করা iframe.)

<p>sandbox="" — সব বন্ধ:</p>
<iframe title="script বন্ধ থাকা জানালা" width="280" height="70"
  sandbox=""
  srcdoc="<p>ভেতরের পাতা</p><script>document.body.append('✔ script চলল')</script>">
</iframe>

<p>sandbox="allow-scripts" — শুধু script খোলা:</p>
<iframe title="script চালু থাকা জানালা" width="280" height="70"
  sandbox="allow-scripts"
  srcdoc="<p>ভেতরের পাতা</p><script>document.body.append('✔ script চলল')</script>">
</iframe>

দুটি জানালার ভেতরে একই ছোট পাতা (srcdoc দিয়ে সরাসরি লেখা)। প্রথমটিতে শুধু “ভেতরের পাতা” — script আটকে গেছে। দ্বিতীয়টিতে তার নিচে “✔ script চলল”। চেষ্টা করুন: প্রথম iframe-এর sandbox=""-কে sandbox="allow-scripts" করুন — এবার দুটিই এক রকম। তারপর দ্বিতীয়টি থেকে পুরো sandbox attribute মুছে দেখুন।

দুটি সাবধানতা। (১) একই সাইটের পাতায় allow-scripts আর allow-same-origin একসাথে দিলে ভেতরের script চাইলে নিজের sandbox-ই খুলে ফেলতে পারে — তখন sandbox প্রায় অর্থহীন। (২) গোপনীয়তা: প্রতিটি YouTube, Facebook বা Maps embed পাতা খোলামাত্র সেই কোম্পানির সার্ভারে যোগাযোগ করে, দর্শকের IP ঠিকানা আর ব্রাউজারের তথ্য সেখানে পৌঁছায়, cookie-ও বসতে পারে। ইউরোপের মতো জায়গায় এর জন্য আইনি সম্মতি লাগে। ভালো অভ্যাস: youtube-nocookie.com, loading="lazy", অথবা আগে শুধু একটি ছবি আর ▶ বোতাম দেখিয়ে ক্লিক করলে তবেই আসল iframe বসানো (“facade” কৌশল)। এতে পাতাও দ্রুত হয়।

সব সাইট iframe-এ ঢোকা যায় না। <iframe src="https://www.facebook.com"> লিখলে দেখবেন ফাঁকা বা “refused to connect”. কারণ সেই সাইট নিজের সার্ভার থেকে বলে দিয়েছে “আমাকে অন্যের জানালায় বসানো যাবে না”। কেন, তা ভাবনার প্রশ্ন ৪-এ আলোচনা করা হয়েছে।

৮ · পুরোনো পথ: object আর embed

পুরোনো টিউটোরিয়াল বা AI-এর কোডে মাঝে মাঝে <object> আর <embed> দেখবেন। এগুলোর জন্ম Flash, Java applet আর অন্যান্য plugin-এর যুগে — যখন ব্রাউজার নিজে ভিডিও বা ইন্টারঅ্যাকটিভ জিনিস চালাতে পারত না, আলাদা প্রোগ্রাম ডেকে আনত। Adobe ২০২০ সালের ৩১ ডিসেম্বর Flash-এর সমর্থন পুরোপুরি বন্ধ করে, আর ব্রাউজারগুলোও plugin চালানো ছেড়ে দিয়েছে। তাই আজ এই দুটি ট্যাগের কাজ খুব সীমিত।

পুরোনো কোড	আজকের সঠিক উপায়
`<embed src="video.swf">` (Flash)	`<video>` — Flash আর কোথাও চলে না
`<object>` দিয়ে YouTube (পুরোনো embed কোড)	`<iframe>`
`<embed src="song.mp3">`	`<audio controls>`
`<applet>` (Java)	HTML থেকে সম্পূর্ণ বাদ (obsolete)
iframe-এ `frameborder="0"`	CSS-এ `border: 0` — এটি এখন obsolete attribute

তবু একটি জায়গায় <object> এখনো কাজে আসে — PDF দেখানো, সাথে বিকল্প লিংক। <object>-এর ভেতরে লেখা রাখা যায়, যা ব্রাউজার ফাইলটি দেখাতে না পারলে দেখায় (অনেক মোবাইল ব্রাউজার PDF পাতার ভেতরে দেখায় না)। তবে সবচেয়ে নির্ভরযোগ্য ও অ্যাক্সেসিবল উপায় হলো সাধারণ একটি ডাউনলোড লিংক দেওয়া।

<object data="admission-notice.pdf" type="application/pdf"
        width="600" height="800">
  <p>PDF দেখা যাচ্ছে না।
     <a href="admission-notice.pdf">ভর্তি বিজ্ঞপ্তি ডাউনলোড করুন (PDF, ২০০ KB)</a></p>
</object>

পরীক্ষা ও ইন্টারভিউতে — এ ধরনের প্রশ্ন প্রায়ই আসে:

alt="" আর alt না থাকার পার্থক্য কী? খালি alt মানে “সাজসজ্জা, এড়িয়ে যাও”; alt না থাকলে screen reader ফাইলের নাম পড়তে পারে, আর HTML validator ভুল দেখায়।
CSS-এ মাপ দিলেও img-এ width/height কেন? ছবি আসার আগেই অনুপাত জেনে জায়গা রাখতে — layout shift (CLS) এড়াতে।
subtitles আর captions-এর পার্থক্য? subtitles কথার লিখিত রূপ/অনুবাদ; captions-এ শব্দের বর্ণনাও থাকে, শ্রবণপ্রতিবন্ধীদের জন্য।
কিছু সাইট iframe-এ খোলে না কেন? সাইটটি X-Frame-Options বা CSP frame-ancestors দিয়ে embed নিষেধ করেছে — clickjacking ঠেকাতে।
hero ছবিতে loading="lazy" দেওয়া কেন ভুল? প্রথম পর্দার বড় ছবি দেরিতে আসে, LCP খারাপ হয়; সেখানে বরং fetchpriority="high".

৯ · AI-এর যুগে ছবি আর মিডিয়া

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

AI-এর সাধারণ ভুল	সমস্যা	সঠিক কাজ
`alt="image"`, `alt="product photo"`	কোনো তথ্য দেয় না	প্রসঙ্গমতো আসল বর্ণনা, বা সাজসজ্জায় `alt=""`
width/height নেই	CLS বাড়ে	আসল ছবির মাপ লিখুন
সব ছবিতে `loading="lazy"`, hero ছবিসহ	LCP খারাপ	প্রথম পর্দার ছবিতে lazy নয়
`<div>`-এর background দিয়ে তথ্যপূর্ণ ছবি	alt দেওয়ার উপায় নেই, screen reader কিছুই পায় না	তথ্যপূর্ণ ছবি সবসময় `<img>`
iframe-এ `title` নেই, `frameborder="0"` আছে	অ্যাক্সেসিবিলিটি ভুল, obsolete attribute	`title` দিন, বর্ডার CSS-এ
`autoplay` শব্দসহ, `controls` নেই	ব্রাউজার আটকায়, ব্যবহারকারী বিরক্ত	`controls`; autoplay হলে `muted`

AI-কে কোড চাওয়ার সময় শর্তগুলো আগেই বলে দিন। নিচের প্রম্পটটি কপি করে নিজের প্রয়োজনমতো বদলে নিন:

আমার অনলাইন শাড়ির দোকানের জন্য একটি পণ্যের পাতার HTML লিখে দাও। শর্ত: ১. প্রতিটি img-এ বাংলায় অর্থবহ alt, আর আসল width ও height (মূল ছবি 1200×1500). ২. প্রথম বড় ছবিতে loading="lazy" দিও না, fetchpriority="high" দাও; বাকি ছবিতে lazy. ৩. ছবি figure আর figcaption-এ রাখো; div দিয়ে ছবি বানিও না। ৪. একটি YouTube ভিডিও iframe-এ দাও — youtube-nocookie, নির্দিষ্ট title, loading="lazy", কোনো obsolete attribute নয়। ৫. CSS বা JavaScript লাগবে না। শেষে প্রতিটি alt কেন এমন লিখলে, এক লাইনে বলো।

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

প্রতিটি <img>-এ alt আছে, আর alt জোরে পড়ে শুনলে অর্থ বোঝা যায় — “image”, ফাইলের নাম বা কিওয়ার্ডের স্তূপ নয়
validator.w3.org-এ কোড দিয়ে শূন্য error পেয়েছি (missing alt, obsolete attribute এখানে ধরা পড়ে)
DevTools-এ Lighthouse চালিয়ে CLS, LCP আর “Image elements do not have explicit width and height” সতর্কতা দেখেছি
DevTools-এর Network প্যানেলে ছবির আকার (KB) দেখেছি — কোনো ছবি অকারণে মেগাবাইটের বেশি নয়
নতুন কোনো attribute বা ফরম্যাট দেখলে MDN আর Can I use-এ সাপোর্ট মিলিয়েছি

ভাবনার প্রশ্ন

প্রতিটি প্রশ্ন নিয়ে নিজে কিছুক্ষণ ভাবুন — তারপর “→ উত্তর” চাপুন।

প্র ০১<img>-এর ভেতরে কেন বিকল্প লেখা রাখা যায় না, অথচ <video>-এ যায়? এই ছোট সিদ্ধান্তের দাম ওয়েব কীভাবে দিয়েছে?

১৯৯৩ সালে ওয়েব তখনো একদম নতুন। Marc Andreessen মেইলিং লিস্টে <IMG SRC>-এর প্রস্তাব দেন, আর প্রায় সাথে সাথেই নিজের Mosaic ব্রাউজারে চালু করে দেন। Tim Berners-Lee-সহ কয়েকজন চেয়েছিলেন আরও সাধারণ একটি ট্যাগ — যেমন <INCLUDE> বা <EMBED> — যা ছবি, শব্দ বা অন্য যেকোনো ফাইল আনতে পারবে, আর ভেতরে বিকল্প লেখা রাখা যাবে। কিন্তু Mosaic দ্রুত জনপ্রিয় হলো, হাজার হাজার পাতায় <IMG> লেখা হয়ে গেল, আর ওয়েবের নিয়ম হলো — চালু হয়ে যাওয়া জিনিস আর ভাঙা যায় না।

ফলাফল: <img> একটি void element, ভেতরে কিছু রাখা যায় না। তাই বিকল্প লেখার জন্য পরে alt attribute যোগ করতে হলো (HTML 2.0-তে)। কিন্তু attribute-এর ভেতরে শুধু সাধারণ লেখা চলে — লিংক, তালিকা বা টেবিল নয়। একটি চার্টের পূর্ণ বর্ণনা তাই alt-এ ঢোকানো যায় না।

পরের প্রায় তিন দশক ধরে ওয়েব এই সিদ্ধান্তের চারপাশে কাজ করেছে। <object> এসেছিল সেই “সব কিছুর জন্য এক ট্যাগ” স্বপ্ন নিয়ে, ভেতরে বিকল্প রাখা যেত — কিন্তু ব্রাউজারভেদে বাগ এত বেশি ছিল যে জনপ্রিয় হয়নি। HTML5-এর <video> আর <audio> এই শিক্ষা মাথায় রেখে বানানো, তাই এদের ভেতরে <source>, <track> আর বিকল্প লেখা রাখা যায়। একাধিক ফরম্যাট আর মাপের প্রয়োজন যখন এল, তখন <img>-কে বদলানো সম্ভব ছিল না, তাই তৈরি হলো <picture> — যা আসলে একটি মোড়ক, ভেতরে সেই পুরোনো <img>-ই কাজ করে। এজন্যই <picture>-এর ভেতরে <img> না দিলে কিছুই দেখায় না।

মূল উপলব্ধি: ওয়েবের প্রথম দিকের তাড়াহুড়োর সিদ্ধান্তগুলোও আজ চিরস্থায়ী, কারণ ওয়েব পুরোনো পাতা ভাঙে না (backward compatibility). নতুন ফিচার তাই প্রায়ই পুরোনোটাকে মুছে নয়, মুড়ে দিয়ে আসে। কোনো HTML নিয়ম অদ্ভুত লাগলে তার ইতিহাস খুঁজুন — প্রায়ই সেখানেই উত্তর।

প্র ০২নতুন ছবির ফরম্যাট এত ভালো হলে ব্রাউজার সবগুলো যোগ করে না কেন? WebP, AVIF আর JPEG XL-এর গল্প থেকে কী শিখি?

ফরম্যাটের ইতিহাসে প্রযুক্তির চেয়ে প্রায়ই বড় হয়ে ওঠে আইন, নিরাপত্তা আর রাজনীতি। ১৯৮০-র দশকের শেষে আসা GIF যে সংকোচন পদ্ধতি (LZW) ব্যবহার করত, তার patent ছিল Unisys কোম্পানির। ১৯৯০-এর দশকের মাঝামাঝি তারা রয়্যালটি দাবি করলে ডেভেলপাররা ক্ষুব্ধ হন, আর patent-মুক্ত বিকল্প হিসেবে তৈরি হয় PNG — ১৯৯৬ সালে W3C এটিকে সুপারিশ হিসেবে প্রকাশ করে।

Google ২০১০ সালে WebP আনে, কিন্তু সব বড় ব্রাউজারে পৌঁছাতে প্রায় এক দশক লেগে যায়। AVIF এসেছে AV1 ভিডিও codec থেকে, যেটি বানিয়েছে বহু কোম্পানির জোট Alliance for Open Media — রয়্যালটি-মুক্ত রাখার উদ্দেশ্যে। আর JPEG XL কারিগরিভাবে অনেকের প্রশংসা পেলেও ব্রাউজারগুলোর মধ্যে মতভেদে এখনো Baseline নয়।

কেন সব ফরম্যাট যোগ করা হয় না? প্রথম কারণ নিরাপত্তা। প্রতিটি ছবির decoder হলো জটিল কোড, যা ইন্টারনেটের যেকোনো অচেনা ফাইল খোলে — আক্রমণকারীর জন্য আদর্শ দরজা। ২০২৩ সালে WebP-র বহুল ব্যবহৃত library libwebp-তে একটি গুরুতর ত্রুটি ধরা পড়ে, যা বাস্তবে আক্রমণে ব্যবহার হচ্ছিল; Chrome, Firefox, Safari-সহ অসংখ্য অ্যাপকে জরুরি আপডেট দিতে হয়েছিল। প্রতিটি নতুন ফরম্যাট মানে নতুন ঝুঁকির জায়গা, যা চিরকাল রক্ষণাবেক্ষণ করতে হবে — কারণ একবার যোগ করলে ওয়েব থেকে আর সরানো যায় না। দ্বিতীয় কারণ খরচ: ফোনের হার্ডওয়্যারে decoder লাগে, ব্যাটারি খরচ হয়।

আপনার জন্য বাস্তব শিক্ষা: নতুন ফরম্যাট ব্যবহার করুন, কিন্তু <picture> দিয়ে fallback রেখে। আর কোনো ফরম্যাটের সাপোর্ট নিয়ে নিশ্চিত না হলে Can I use বা MDN-এর Baseline চিহ্ন দেখুন।

মূল উপলব্ধি: ওয়েবে “ভালো প্রযুক্তি” যথেষ্ট নয় — patent, নিরাপত্তা, রক্ষণাবেক্ষণ আর সব ব্রাউজারের সম্মতি লাগে। তাই progressive enhancement-ই পেশাদার পথ: নতুন জিনিস আগে, পুরোনো নিরাপদ বিকল্প পেছনে।

প্র ০৩ব্রাউজার কেন আমার ভিডিওকে শব্দসহ নিজে থেকে চলতে দেয় না? এটা কি ডেভেলপারের স্বাধীনতায় হস্তক্ষেপ?

২০১০-এর দশকে খবরের সাইট আর বিজ্ঞাপনদাতারা আবিষ্কার করলেন, পাতা খুললেই ভিডিও চালু হলে “ভিউ” বাড়ে। ফল হলো ভয়াবহ — একটি ট্যাব খুললেই কোথাও থেকে শব্দ বাজছে, কোন ট্যাব থেকে তা খুঁজে পাওয়া যাচ্ছে না। ব্যবহারকারীর অভিযোগ এত বেড়ে যায় যে ব্রাউজারগুলো নিজেই নিয়ম বানায়। ২০১৮ সালের দিকে Chrome একটি বড় autoplay নীতি চালু করে, Safari ও Firefox-ও নিজেদের মতো নিয়ম আনে।

মূল নিয়মটি সব জায়গায় প্রায় এক: শব্দ ছাড়া autoplay চলবে; শব্দসহ autoplay চলবে কেবল তখন, যখন ব্যবহারকারী আগে পাতায় কিছু চেপেছেন, বা সাইটটি তিনি নিয়মিত ব্যবহার করেন বলে ব্রাউজার জানে। ব্রাউজারভেদে খুঁটিনাটি আলাদা, তাই কোড এমনভাবে লিখতে হয় যাতে autoplay আটকে গেলেও পাতা ঠিক থাকে — controls দেওয়া থাকলে ব্যবহারকারী নিজেই চালাবেন।

বাংলাদেশের প্রেক্ষাপটে আরেকটি দিক আছে: ডেটার খরচ। বেশিরভাগ মানুষ মোবাইল ডেটা প্যাকেজে ইন্টারনেট চালান। পাতা খুলতেই একটি ২০ মেগাবাইটের ভিডিও নামতে শুরু করলে তাঁর প্যাকেজের একটা অংশ চলে গেল, অথচ তিনি ভিডিওটা দেখতেই চাননি। এজন্যই preload="none" বা metadata আর একটি ভালো poster শুধু ভদ্রতা নয়, ন্যায্যতার প্রশ্ন।

অ্যাক্সেসিবিলিটির দিকও আছে। যাঁরা screen reader ব্যবহার করেন, পাতা খুলতেই ভিডিওর শব্দ শুরু হলে তাঁরা screen reader-এর কথাই শুনতে পান না। WCAG-এর একটি নিয়ম (১.৪.২ Audio Control) বলে, তিন সেকেন্ডের বেশি নিজে থেকে বাজা শব্দ থামানো বা কমানোর উপায় দিতেই হবে। আর নড়াচড়া দেখলে যাঁদের অসুবিধা হয়, তাঁদের জন্য চলমান পটভূমি ভিডিও থামানোর বোতামও দরকার।

মূল উপলব্ধি: ব্রাউজার “user agent” — সে ব্যবহারকারীর প্রতিনিধি, ডেভেলপারের নয়। ওয়েবের নকশায় ক্ষমতার এই ক্রমটি বারবার দেখবেন: ব্যবহারকারীর স্বার্থ আগে, তারপর লেখকের, তারপর ব্রাউজার নির্মাতার।

প্র ০৪Google Maps embed করা যায়, কিন্তু google.com বা ব্যাংকের সাইট iframe-এ খোলে না কেন? এর পেছনের আক্রমণটি কী?

আক্রমণটির নাম clickjacking. ধরুন একটি প্রতারক সাইট বানাল “ফ্রি মোবাইল রিচার্জ — এখানে চাপুন” বোতাম। ঠিক বোতামের ওপরে সে একটি অদৃশ্য iframe বসাল (opacity: 0), যার ভেতরে আপনার ব্যাংক বা সোশ্যাল মিডিয়ার একটি পাতা — যেখানে আপনি আগে থেকেই লগইন করা। আপনি ভাবছেন রিচার্জের বোতাম চাপছেন, আসলে চাপছেন অদৃশ্য পাতার “টাকা পাঠান” বা “পোস্ট শেয়ার করুন” বোতাম। ২০০৮ সালের দিকে নিরাপত্তা গবেষকেরা এই কৌশলটি প্রকাশ্যে দেখান, আর তখন একটি জনপ্রিয় প্লাগইনের সেটিংস পাতাকে এভাবে ব্যবহার করে ক্যামেরা-মাইক্রোফোনের অনুমতি আদায়ের পদ্ধতিও দেখানো হয়েছিল।

সমাধান এল সার্ভারের দিক থেকে। প্রথমে Microsoft তাদের Internet Explorer 8-এ একটি HTTP header চালু করে — X-Frame-Options, যার মান DENY (কারও জানালায় নয়) বা SAMEORIGIN (শুধু নিজের সাইটে)। অন্য ব্রাউজারগুলোও দ্রুত এটি গ্রহণ করে। পরে এর আধুনিক, আরও নমনীয় রূপ এল Content Security Policy-র frame-ancestors নির্দেশে — কোন কোন সাইট আমাকে embed করতে পারবে, তার নির্দিষ্ট তালিকা।

তাহলে Maps বা YouTube কেন চলে? কারণ Google ইচ্ছে করেই আলাদা একটি “embed” ঠিকানা (/maps/embed, /embed/) বানিয়েছে, যেখানে এই নিষেধ নেই — আর সেখানে এমন কোনো বোতাম নেই যা চাপলে আপনার অ্যাকাউন্টের ক্ষতি হতে পারে। মূল সাইটে নিষেধ, embed-এর পাতায় অনুমতি।

লক্ষ করুন, এটি sandbox-এর উল্টো দিক। sandbox হলো বাইরের পাতা নিজেকে ভেতরের পাতা থেকে রক্ষা করছে; frame-ancestors হলো ভেতরের পাতা নিজেকে বাইরের পাতা থেকে রক্ষা করছে। নিজের সাইট বানালে লগইন বা পেমেন্টের পাতায় এই header দিতে ভুলবেন না।

মূল উপলব্ধি: ওয়েবের নিরাপত্তা দুই দিক থেকে কাজ করে — যে embed করছে, আর যাকে embed করা হচ্ছে। iframe একটি শক্তিশালী জানালা; তাই দুই পক্ষেরই নিজের দরজায় তালা দেওয়ার উপায় আছে।

প্র ০৫AI এখন ছবি দেখে নিজেই বর্ণনা লিখতে পারে। তাহলে কি alt লেখার দায়িত্ব শেষ?

যন্ত্রের লেখা বর্ণনা নতুন নয়। ২০১৬ সালে Facebook “automatic alt text” চালু করে — ছবির ভেতরে কী আছে অনুমান করে লিখত, যেমন “ছবিতে থাকতে পারে: ২ জন মানুষ, হাসছেন, বাইরে”। এখন অনেক screen reader আর ব্রাউজার AI দিয়ে alt-হীন ছবির বর্ণনা বানিয়ে দিতে পারে, আর ছবি তৈরির টুলগুলোও alt প্রস্তাব করে। এটি সত্যিই একটি বড় অগ্রগতি — যেখানে কিছুই ছিল না, সেখানে অন্তত একটা ধারণা পাওয়া যায়।

তবু তিনটি কারণে দায়িত্ব আপনারই থাকে। এক, প্রসঙ্গ। AI দেখে ছবিতে কী আছে, কিন্তু জানে না আপনি ছবিটি কেন দিয়েছেন। একটি ছবি ক্রিকেটের খবরে, জার্সির বিজ্ঞাপনে আর ছবি-প্রতিযোগিতার পাতায় তিন রকম alt চায়। কোনটি সাজসজ্জা (alt=""), কোনটি লিংক (কাজের নাম লাগবে) — এটাও AI ঠিকমতো বোঝে না। দুই, ভুল আর পক্ষপাত। AI কখনো এমন জিনিস “দেখে” যা নেই, ভুল মানুষকে চেনে, বা ছবির ভেতরের বাংলা লেখা ভুল পড়ে। ওষুধের প্যাকেটের ডোজ বা বাসের সময়সূচির ছবিতে একটি ভুল সংখ্যা বিপজ্জনক। তিন, নির্ভরযোগ্যতা। সব ব্যবহারকারীর ডিভাইসে এই AI সুবিধা নেই, আর সার্চ ইঞ্জিন আপনার লেখা alt-টাই পড়ে।

বাস্তবসম্মত পথ হলো AI-কে খসড়া লেখক বানানো, সম্পাদক নয়। শত শত পণ্যের দোকানে AI দিয়ে প্রথম খসড়া লেখান, তারপর মানুষ যাচাই করুন — বিশেষ করে দাম, নাম, লেখা আর প্রসঙ্গ। আর নিয়ম রাখুন: AI-এর বানানো alt-এ “ছবিতে থাকতে পারে” ধরনের অনুমান যেন সরাসরি না যায়।

মূল উপলব্ধি: alt কোনো ছবির বর্ণনা নয় — পাতার ভেতরে ছবির ভূমিকার বর্ণনা। ভূমিকা ঠিক করেন লেখক, তাই alt-এর শেষ দায়ও লেখকের। AI এখানে দ্রুত সহকারী, কিন্তু যাচাই ছাড়া নির্ভরযোগ্য নয়।

অনুশীলন

প্রথম তিনটিতে ভাবা আর দেখাই মূল কাজ; শেষটিতে ছোট একটি কোড লিখবেন।

alt লিখুন: চারটি ছবির জন্য alt লিখুন — (ক) সংবাদ সাইটের হোম পেজে লোগো, যা চাপলে হোম পেজে যায় (খ) রান্নার ব্লগে লেখার শুরুতে শুধু সৌন্দর্যের জন্য একটি মশলার নকশা (গ) ব্যানার, যাতে লেখা “বৈশাখী অফার — ৩০% ছাড়, ১৫ এপ্রিল পর্যন্ত” (ঘ) একটি ভ্রমণ-লেখায় সাজেক ভ্যালির মেঘে ঢাকা পাহাড়ের ছবি।

(ক) Functional: alt="[সাইটের নাম] — হোম পেজ" — লোগোর চেহারা নয়, চাপলে কী হয় সেটা।

(খ) Decorative: alt="" — কোনো তথ্য দেয় না।

(গ) লেখাওয়ালা ছবি: alt="বৈশাখী অফার — ৩০% ছাড়, ১৫ এপ্রিল পর্যন্ত" — হুবহু লেখা। আরও ভালো হয় লেখাটি HTML-এ রাখলে।

(ঘ) Informative: যেমন alt="ভোরে সাজেক ভ্যালির সবুজ পাহাড়ের ভাঁজে ভাঁজে জমে থাকা সাদা মেঘ" — লেখার প্রসঙ্গে যা বোঝানো দরকার, সেটুকুই। “ছবি” শব্দটি লিখবেন না।
CLS চোখে দেখুন: অংশ ২-এর এডিটরে (“মাপ ছাড়া” আর “মাপসহ”) দুটি ছবিরই src বদলে ../image/course.jpg লিখুন। তারপর প্রথম ছবিতে width/height নেই, দ্বিতীয়টিতে আছে — কোনটির নিচের লেখা কতটা সরে গেল, আর দ্বিতীয়টি কি চ্যাপ্টা বা লম্বাটে দেখাচ্ছে?

প্রথম ছবি আসার আগে প্রায় শূন্য জায়গা ছিল; ছবি এসে ১২৮০×৭১৪ আসল মাপে বসায় হলুদ লাইন অনেকখানি নেমে গেছে — এটাই layout shift. দ্বিতীয়টি আগে থেকেই ২৪০×১৩৫ ঘরে ছিল, তাই সবুজ লাইন নড়েনি। তবে course.jpg-এর আসল অনুপাত ১২৮০:৭১৪ (প্রায় ১.৭৯), আর আপনার দেওয়া ২৪০:১৩৫ (প্রায় ১.৭৮) — খুব কাছাকাছি, তাই পার্থক্য সামান্য। অনুপাত বেশি না মিললে ছবি চ্যাপ্টা বা লম্বাটে দেখায়। শিক্ষা: width/height-এ আসল ছবির অনুপাতই লিখুন।
ফরম্যাট বাছুন: এই কাজগুলোর জন্য কোন ফরম্যাট? (ক) রেস্টুরেন্টের মেনুর খাবারের ছবি (খ) সাইটের লোগো (গ) একটি সফটওয়্যারের সেটিংস পাতার স্ক্রিনশট (ঘ) “কীভাবে bKash-এ টাকা পাঠাবেন” দেখানোর ৮ সেকেন্ডের চলমান ডেমো।

(ক) ফটো → AVIF বা WebP, <picture>-এ JPEG fallback সহ।

(খ) লোগো → SVG; সব মাপে ঝকঝকে, ফাইল ছোট।

(গ) স্ক্রিনশট → PNG বা lossless WebP; লেখা ধারালো থাকবে।

(ঘ) চলমান ডেমো → GIF নয়, একটি ছোট MP4 (H.264) বা WebM ভিডিও, <video controls muted playsinline> দিয়ে — যাতে দর্শক থামিয়ে ধাপগুলো পড়তে পারেন।
পণ্যের কার্ড বানান: একটি <figure> লিখুন, যাতে থাকবে এই সাইটের ../image/computer-fundamentals-cover.jpg ছবি (আসল মাপ ১২০০×৬৩০, দেখাবেন ৩০০ চওড়া), অর্থবহ alt, lazy loading, আর <figcaption>-এ কোর্সের নাম ও দাম। তারপর নিচের এডিটরে মিলিয়ে দেখুন।
৩০০ চওড়া হলে উচ্চতা হবে ৬৩০ × ৩০০ ÷ ১২০০ = ১৫৭.৫, অর্থাৎ ১৫৮। একটি সম্ভাব্য উত্তর:
```
<figure>
  <img src="../image/computer-fundamentals-cover.jpg"
       alt="কম্পিউটার ফান্ডামেন্টালস কোর্সের প্রচ্ছদ"
       width="300" height="158" loading="lazy">
  <figcaption>
    <b>কম্পিউটার ফান্ডামেন্টালস</b> — বিনামূল্যে
  </figcaption>
</figure>
```
ছবি ৩০০×১৫৮ ঘরে, নিচে মোটা অক্ষরে কোর্সের নাম আর দাম। এই ছবি ক্যাপশনের সাথে একই তথ্য দিচ্ছে বলে কেউ কেউ এখানে alt=""-ও যুক্তিসঙ্গত মনে করেন — দুটিই গ্রহণযোগ্য, যদি কারণটা বুঝে বেছে নেন। চেষ্টা করুন: <figcaption>-এ দামের পাশে <s>৳৫০০</s> যোগ করে দেখুন কেমন দেখায়।

নিজেকে যাচাই করুন

ভুল হলে কারণসহ ব্যাখ্যা পাবেন, আবার চেষ্টাও করতে পারবেন।

ক্রমব্রাউজার একটি <img width="400" height="300" loading="lazy"> নিয়ে যা যা করে, সঠিক ক্রমে সাজান (▲▼ চেপে সরান)

📄 HTML পড়তে পড়তে <img> ট্যাগটি পায়
📐 width/height থেকে অনুপাত হিসাব করে খালি ঘর রাখে
📜 ব্যবহারকারী স্ক্রল করে ছবিটির কাছাকাছি আসেন
🌐 সার্ভার থেকে ছবির ফাইলটি আনে
🖼️ ফাইল খুলে (decode) ঘরের ভেতরে ছবি আঁকে

একটি পাতায় সেকশনের মাঝে শুধু সৌন্দর্যের জন্য একটি নকশার ছবি আছে। এর জন্য সবচেয়ে ভালো কোনটি?

alt একদম না লেখা
alt=""
alt="ছবি"
alt="সুন্দর নকশা করা একটি ছবি"

CSS-এ ছবির মাপ ঠিক করা থাকলেও <img>-এ width আর height attribute লেখার প্রধান কারণ কী?

ছবির ফাইল ছোট হয়ে দ্রুত আসে
ছবির রং ও মান ভালো হয়
ছবি আসার আগেই জায়গা রেখে layout shift (CLS) ঠেকানো
সার্চ ইঞ্জিন শুধু মাপসহ ছবি খুঁজে পায়

একটি লোগো মোবাইল থেকে বড় মনিটর — সব মাপে ঝকঝকে দেখাতে হবে। কোন ফরম্যাট সবচেয়ে উপযুক্ত?

JPEG
GIF
PNG
SVG

পাতা খুললেই একটি পটভূমি ভিডিও নিজে থেকে চালু হতে হবে। আধুনিক ব্রাউজারে নির্ভরযোগ্যভাবে চালাতে কোনটি দরকার?

autoplay-এর সাথে muted (আর playsinline)
preload="auto"
autoplay loop, শব্দ চালু রেখে
poster attribute

একটি ভিডিওতে বাংলা subtitle যোগ করার সঠিক HTML কোনটি?

<source src="bn.vtt" lang="bn">
<track kind="subtitles" src="bn.vtt" srclang="bn" label="বাংলা">
<video subtitle="bn.vtt">
<caption src="bn.vtt">

পাতা খুলতেই প্রথম পর্দায় দেখা যায় এমন বড় ব্যানার ছবির জন্য কোনটি ভুল অভ্যাস?

width আর height লেখা
fetchpriority="high" দেওয়া
loading="lazy" দেওয়া
AVIF বা WebP ফরম্যাটে রাখা

শব্দকোষ

লেখার মধ্যে ডটেড দাগ দেওয়া শব্দে মাউস রাখুন বা চাপুন — অর্থ দেখাবে। এই পর্বের সব নতুন শব্দ এখানে একসাথে:

মনে রাখুন

<img> ছবির ঠিকানা, ছবি নয় — src, alt, width, height চারটিই দিন।
alt ছবির ভূমিকা বলে: সাজসজ্জায় alt="", লিংকে কাজের নাম, তথ্যে প্রসঙ্গমতো বর্ণনা।
width/height থেকে ব্রাউজার আগেই ঘর রাখে, তাই CLS কমে; hero ছবিতে lazy নয়, বাকিগুলোতে loading="lazy".
ফটো → AVIF/WebP/JPEG, লোগো-আইকন → SVG, স্ক্রিনশট → PNG, অ্যানিমেশন → GIF নয়, ছোট ভিডিও।
ভিডিওতে controls, একাধিক <source>, বাংলা <track>; iframe-এ title, lazy, দরকারমতো sandbox আর গোপনীয়তার কথা মাথায় রাখুন।

পরের পর্বে: বাজারের তালিকা, ক্লাসের রুটিন, ক্রিকেটের স্কোরকার্ড — তথ্য সাজানোর দুই হাতিয়ার তালিকা আর টেবিল। কখন কোনটি, আর টেবিল দিয়ে পেজের লেআউট বানানো কেন আজ ভুল।

ছবি, অডিও, ভিডিও আর iframe