Images & Media

ছবি ও মিডিয়া

Read: ~24 min Beginner 10 practice problems Live preview runner

1. Bringing Pages to Life

Text alone can only go so far. This module covers the tags that let a page show images, play video, and play audio — <img>, <figure>, <video>, and <audio>. Used well, media makes a page easier to understand and more engaging; used carelessly, it slows a page down and locks out visitors who rely on screen readers.

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

2. img, src & alt

<img> is a self-closing (void) tag — it never wraps content, it only carries attributes. src points to the image file (relative or absolute path), and alt provides a text description used when the image fails to load, and read aloud by screen readers. A missing or empty alt on a meaningful image is one of the most common accessibility mistakes on the web.

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

image-basics.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Image Basics</title></head>
<body>
  <h1>Our Team</h1>
  <img src="https://placehold.co/300x180?text=Team+Photo"
       alt="Five ABCL TECH team members smiling in the office"
       width="300" height="180">
</body>
</html>

Key insight Every <img> tag should carry a meaningful alt text — this matters for both accessibility and SEO. Purely decorative images (like a background flourish) should use alt="" so screen readers correctly skip them.

প্রতিটি <img> ট্যাগে একটি অর্থবহ alt টেক্সট থাকা উচিত — এটি accessibility ও SEO দুটোর জন্যই গুরুত্বপূর্ণ। শুধুমাত্র সাজসজ্জার জন্য থাকা ছবিতে (যেমন একটি ব্যাকগ্রাউন্ড অলঙ্করণ) alt="" ব্যবহার করা উচিত, যাতে স্ক্রিন রিডার সেটি সঠিকভাবে এড়িয়ে যায়।

3. figure & figcaption

When an image needs a caption — a photo credit, a chart's title, a diagram's label — <figure> wraps the image and <figcaption> to keep them semantically linked as one self-contained unit. This is different from just putting a <p> next to an <img>: <figure> tells browsers and assistive technology that the caption specifically describes that image, even if it were moved elsewhere on the page.

যখন একটি ছবির ক্যাপশন দরকার হয় — একটি ফটো ক্রেডিট, একটি চার্টের টাইটেল, একটি ডায়াগ্রামের লেবেল — তখন <figure> ছবি এবং <figcaption>-কে একটি স্বয়ংসম্পূর্ণ ইউনিট হিসেবে সিমান্টিকভাবে সংযুক্ত রাখে। এটি শুধু <img>-এর পাশে একটি <p> রাখার চেয়ে আলাদা — <figure> ব্রাউজার ও assistive technology-কে জানায় যে ক্যাপশনটি নির্দিষ্টভাবে সেই ছবিকেই বর্ণনা করছে, পেজে অন্য কোথাও সরানো হলেও।

figure.html

<figure>
  <img src="https://placehold.co/320x200?text=Dhaka+Skyline"
       alt="Dhaka city skyline at sunset" width="320" height="200">
  <figcaption>Dhaka skyline at sunset. Photo: ABCL TECH.</figcaption>
</figure>

4. Responsive Images — srcset Basics

A single large image looks fine on a desktop but wastes bandwidth on a phone. The srcset attribute lets you offer several sizes of the same image, each labeled with its real width using the w descriptor, and the browser automatically downloads whichever size best fits the visitor's screen. sizes tells the browser how wide the image will actually display at different viewport widths, so it can pick correctly before the layout even finishes.

একটি বড় ছবি ডেস্কটপে ঠিকঠাক দেখালেও ফোনে ব্যান্ডউইথ নষ্ট করে। srcset অ্যাট্রিবিউট একই ছবির একাধিক সাইজ অফার করার সুযোগ দেয়, প্রতিটি তার প্রকৃত প্রস্থ w ডেস্ক্রিপ্টর দিয়ে লেবেল করা, এবং ব্রাউজার নিজে থেকে সেই সাইজটি ডাউনলোড করে যা ভিজিটরের স্ক্রিনের সাথে সবচেয়ে ভালো মানানসই। sizes ব্রাউজারকে জানায় বিভিন্ন viewport প্রস্থে ছবিটি আসলে কত প্রশস্ত দেখানো হবে, যাতে লেআউট সম্পূর্ণ হওয়ার আগেই সঠিক সাইজ বেছে নিতে পারে।

responsive.html

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A student coding on a laptop">

Note This code block references local files (photo-400.jpg etc.) that do not exist in this live preview sandbox, so the Run output will just show broken-image icons — the point here is to study the syntax, not the rendered pixels.

এই কোড ব্লকটি লোকাল ফাইল (photo-400.jpg ইত্যাদি) রেফার করে যা এই লাইভ প্রিভিউ স্যান্ডবক্সে নেই, তাই Run আউটপুটে ভাঙা-ছবির আইকন দেখাবে — এখানে মূল লক্ষ্য সিনট্যাক্স বোঝা, রেন্ডার করা পিক্সেল নয়।

5. video & audio Tags

The <video> and <audio> tags embed media directly, no plugin required. Add the controls attribute so visitors get play/pause/volume buttons, and provide a <source> child (or several, for different formats) instead of a single src when you want the browser to pick whichever format it supports. Always include fallback text between the tags for browsers that cannot play media at all.

<video> ও <audio> ট্যাগ সরাসরি মিডিয়া এমবেড করে, কোনো প্লাগইন লাগে না। controls অ্যাট্রিবিউট যোগ করলে ভিজিটর play/pause/volume বাটন পান, এবং একটি src-এর বদলে একটি (বা একাধিক, বিভিন্ন ফরম্যাটের জন্য) <source> চাইল্ড দিন, যাতে ব্রাউজার যে ফরম্যাট সাপোর্ট করে সেটি বেছে নিতে পারে। এমন ব্রাউজারের জন্য যারা মিডিয়া চালাতেই পারে না, ট্যাগের ভেতরে ফলব্যাক টেক্সট রাখুন।

media.html

<h2>Lesson Video</h2>
<video controls width="320">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<h2>Lesson Audio</h2>
<audio controls>
  <source src="lesson.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

6. Image Formats: jpg, png, webp, svg

Different formats suit different content. JPG compresses photographs well but loses quality and cannot have transparency. PNG supports transparency and is ideal for logos or screenshots with sharp edges, at a larger file size than JPG. WebP is a modern format that usually beats both JPG and PNG at the same visual quality with a smaller file size, and is supported by all current browsers. SVG is not a pixel image at all — it is XML-based vector markup, so icons and logos drawn as SVG stay perfectly sharp at any size and scale to zero extra file weight for larger displays.

বিভিন্ন কনটেন্টের জন্য বিভিন্ন ফরম্যাট উপযোগী। JPG ফটোগ্রাফ ভালোভাবে কম্প্রেস করে কিন্তু কোয়ালিটি হারায় এবং transparency সাপোর্ট করে না। PNG transparency সাপোর্ট করে এবং লোগো বা স্ক্রিনশটের জন্য আদর্শ, তবে JPG-এর চেয়ে ফাইল সাইজ বড় হয়। WebP একটি আধুনিক ফরম্যাট, যা একই ভিজ্যুয়াল কোয়ালিটিতে সাধারণত JPG ও PNG দুটোর চেয়েই ছোট ফাইল সাইজ দেয়, এবং বর্তমান সব ব্রাউজারে সাপোর্টেড। SVG আসলে পিক্সেল ছবি নয় — এটি XML-ভিত্তিক ভেক্টর মার্কআপ, তাই SVG দিয়ে আঁকা আইকন বা লোগো যেকোনো সাইজে নিখুঁত শার্প থাকে এবং বড় ডিসপ্লের জন্য বাড়তি ফাইল ওজন লাগে না।

Raster (JPG / PNG / WebP)

Made of a fixed grid of pixels
Best for photographs
Loses sharpness when scaled up

✅ Vector (SVG)

Made of mathematical shapes, not pixels
Best for icons, logos, simple illustrations
Stays sharp at any size, tiny file size

7. Glossary (শব্দকোষ)

Term	Meaning	বাংলায়
`alt`	Text alternative to an image, read by screen readers.	ছবির টেক্সট বিকল্প, স্ক্রিন রিডার পড়ে শোনায়।
`<figure>`	Wraps media and its caption as one unit.	মিডিয়া ও তার ক্যাপশনকে একটি ইউনিট হিসেবে মোড়ায়।
`srcset`	Offers multiple image sizes for the browser to choose from.	ব্রাউজারকে বেছে নেওয়ার জন্য একাধিক ছবি সাইজ দেয়।
`controls`	Shows built-in play/pause/volume UI on video/audio.	video/audio-তে বিল্ট-ইন play/pause/volume UI দেখায়।
Vector image	An image made of math shapes (SVG), not pixels.	পিক্সেল নয়, গাণিতিক আকৃতি দিয়ে তৈরি ছবি (SVG)।

8. Practice Problems

Every problem has a Show Answer button. Try each one yourself first.

প্রতিটি প্রশ্নে Show Answer বাটন আছে। প্রথমে নিজে চেষ্টা করুন, তারপর উত্তর মিলিয়ে নিন।

Add an image of a cat with a meaningful alt text describing what is in the photo.

একটি বিড়ালের ছবি যোগ করুন, যাতে ছবিতে কী আছে তা বর্ণনা করে একটি অর্থবহ alt টেক্সট থাকে।
✨ Show Answer (উত্তর দেখুন)
ans1.html
```
<img src="https://placehold.co/300x200?text=Cat"
     alt="An orange tabby cat sleeping on a windowsill"
     width="300" height="200">
```
Wrap that same image in a figure element with a figcaption crediting the photographer.

সেই একই ছবিকে figure এলিমেন্টে মুড়িয়ে দিন, যেখানে figcaption-এ ফটোগ্রাফারের ক্রেডিট থাকবে।
✨ Show Answer (উত্তর দেখুন)
ans2.html
```
<figure>
  <img src="https://placehold.co/300x200?text=Cat"
       alt="An orange tabby cat sleeping on a windowsill"
       width="300" height="200">
  <figcaption>Photo by Rahim Uddin.</figcaption>
</figure>
```
Explain why alt="" (empty) is actually correct for a purely decorative image.

শুধুমাত্র সাজসজ্জার জন্য থাকা একটি ছবির ক্ষেত্রে alt="" (খালি) কেন সঠিক, ব্যাখ্যা করুন।

✨ Show Answer (উত্তর দেখুন)

Answer: An empty alt tells screen readers the image carries no meaningful content, so they skip it silently instead of reading a distracting or meaningless description aloud.

খালি alt স্ক্রিন রিডারকে জানায় ছবিতে কোনো অর্থবহ কনটেন্ট নেই, ফলে তারা বিরক্তিকর বা অর্থহীন কোনো বর্ণনা পড়ে না শুনিয়ে চুপচাপ এড়িয়ে যায়।
Write a srcset attribute offering three widths (480w, 960w, 1440w) of an image named hero.jpg.

hero.jpg নামের একটি ছবির জন্য তিনটি প্রস্থ (480w, 960w, 1440w) অফার করে একটি srcset অ্যাট্রিবিউট লিখুন।
✨ Show Answer (উত্তর দেখুন)
ans4.html
```
<img src="hero-960.jpg"
     srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1440.jpg 1440w"
     alt="Hero banner">
```
Embed a video with controls and a fallback message for unsupported browsers.

controls সহ একটি ভিডিও এমবেড করুন, এবং unsupported ব্রাউজারের জন্য একটি ফলব্যাক মেসেজ যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans5.html
```
<video controls width="320">
  <source src="intro.mp4" type="video/mp4">
  Sorry, your browser cannot play this video.
</video>
```
Which image format would you choose for a company logo that needs a transparent background and perfectly sharp edges at any size, and why?

একটি কোম্পানি লোগোর জন্য কোন ফরম্যাট বাছাই করবেন, যার transparent ব্যাকগ্রাউন্ড ও যেকোনো সাইজে নিখুঁত শার্প কিনারা দরকার — এবং কেন?

✨ Show Answer (উত্তর দেখুন)

Answer: SVG — as a vector format it scales to any size without losing sharpness, supports transparency natively, and typically has a tiny file size for simple logo shapes.

SVG — একটি ভেক্টর ফরম্যাট হিসেবে এটি শার্পনেস না হারিয়ে যেকোনো সাইজে স্কেল করে, transparency স্বাভাবিকভাবেই সাপোর্ট করে, এবং সাধারণ লোগো আকৃতির জন্য ফাইল সাইজ খুবই ছোট হয়।
Fix this image tag that is missing its alt attribute: <img src="team.jpg">

এই ইমেজ ট্যাগে alt অ্যাট্রিবিউট অনুপস্থিত, এটি ঠিক করুন: <img src="team.jpg">
✨ Show Answer (উত্তর দেখুন)
ans7.html
```
<img src="team.jpg" alt="ABCL TECH team standing together in the office">
```
Embed an audio clip with controls and an mp3 source.

controls ও একটি mp3 সোর্স দিয়ে একটি অডিও ক্লিপ এমবেড করুন।
✨ Show Answer (উত্তর দেখুন)
ans8.html
```
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
```
Explain in one or two sentences why JPG is a poor choice for a logo that needs a transparent background.

transparent ব্যাকগ্রাউন্ড দরকার এমন একটি লোগোর জন্য JPG কেন খারাপ পছন্দ, এক বা দুই বাক্যে ব্যাখ্যা করুন।

✨ Show Answer (উত্তর দেখুন)

Answer: JPG has no support for transparency at all — every pixel must have a solid color — so a logo saved as JPG will always show a visible rectangular background instead of blending into the page.

JPG-এর transparency সাপোর্ট একেবারেই নেই — প্রতিটি পিক্সেলে একটি নিরেট রঙ থাকতেই হবে — তাই JPG-তে সেভ করা লোগো সবসময় একটি দৃশ্যমান আয়তাকার ব্যাকগ্রাউন্ড দেখাবে, পেজের সাথে মিশে যাবে না।
Build a small gallery section with two figures, each containing an image and a one-line figcaption.

দুটি figure দিয়ে একটি ছোট গ্যালারি সেকশন বানান, প্রতিটিতে একটি ছবি ও এক লাইনের figcaption থাকবে।
✨ Show Answer (উত্তর দেখুন)
ans10.html
```
<h2>Gallery</h2>
<figure>
  <img src="https://placehold.co/200x140?text=Sunrise" alt="Sunrise over a rice field" width="200" height="140">
  <figcaption>Sunrise near Rangpur.</figcaption>
</figure>
<figure>
  <img src="https://placehold.co/200x140?text=River" alt="A river boat at dusk" width="200" height="140">
  <figcaption>Evening on the Padma.</figcaption>
</figure>
```

Summary — Module 05

<img> displays images with src and a meaningful alt; <figure>/<figcaption> pair an image with its caption as one unit. srcset lets the browser pick the right image size for each device. <video> and <audio> embed media natively with built-in controls. JPG, PNG, WebP, and SVG each suit different kinds of images — photos, transparency, modern compression, and infinitely scalable vector graphics respectively.

<img> src ও একটি অর্থবহ alt দিয়ে ছবি দেখায়; <figure>/<figcaption> ছবি ও ক্যাপশনকে একটি ইউনিট হিসেবে জোড়া লাগায়। srcset ব্রাউজারকে প্রতিটি ডিভাইসের জন্য সঠিক ছবি সাইজ বেছে নিতে দেয়। <video> ও <audio> বিল্ট-ইন controls সহ সরাসরি মিডিয়া এমবেড করে। JPG, PNG, WebP ও SVG প্রতিটি ভিন্ন ধরনের ছবির জন্য উপযোগী — যথাক্রমে ফটো, transparency, আধুনিক কম্প্রেশন ও অসীমভাবে স্কেলযোগ্য ভেক্টর গ্রাফিক্স।

Next Module → Lists & Tables — সম্পর্কিত আইটেম ও টেবুলার ডেটা সঠিকভাবে সাজানো।

Previous: Links & Navigation Next: Lists & Tables