14/02/2026

Images & Media in HTML

ওয়েবসাইটে image, video, media শুধু design সুন্দর করার জন্য না — SEO, accessibility (সবাই যেন ব্যবহার করতে পারে), আর user experience-এর জন্য খুব গুরুত্বপূর্ণ।

5️⃣ Images & Media in HTML

  • alt attribute (SEO + accessibility)
  • <figure> & <figcaption>
  • <video> with controls
  • Proper media usage (performance + best practice)

🔹 1. alt attribute (SEO & Accessibility)

  • 👉 alt মানে alternative text
  • 👉 image load না হলে বা screen reader ব্যবহার করলে এই text দেখা/শোনা যায়

✅ কেন গুরুত্বপূর্ণ?

  • SEO-তে help করে (Google image বুঝতে পারে)
  • Blind user screen reader দিয়ে বুঝতে পারে

Example:


          <img src="laptop.jpg" alt="A modern laptop on desk">

❌ ভুল example:


          <img src="laptop.jpg" alt="image">
  • 👉 এখানে “image” কোনো meaning দেয় না
  • 👉 সবসময় descriptive লিখো

🔹 2. <figure> & <figcaption>

👉 Image + Caption একসাথে group করার জন্য use হয়

✅ কেন use করবো?

  • Semantic HTML (Google & browser বুঝে content structure)
  • caption দিয়ে extra info দেয়া যায়

Example:


            <figure>
              <img src="coding.jpg" alt="Person coding on laptop">
              <figcaption>Learning JavaScript step by step</figcaption>
            </figure>

👉 এখানে image + caption logically connected

🔹 3. <video> with controls

👉 Website-এ video show করার জন্য <video> use হয়

Example:


            <video controls width="400">
              <source src="video.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video>

Important attributes:

  • controls → play, pause, volume button দেখায়
  • autoplay → auto play (⚠️ avoid করা ভালো)
  • loop → বারবার play হবে
  • muted → sound off

🔹 4. Proper Media Usage (Performance & Best Practice)

👉 শুধু media use করলেই হবে না, smartভাবে use করতে হবে

Good Practices:

✔️ Image optimize করো

  • large image ব্যবহার করলে site slow হয়ে যায়
  • use: compressed image (WebP, JPG)

✔️ Correct format use করো

  • image → JPG / PNG / WebP
  • video → MP4 (best support)

✔️ Lazy loading use করো


            <img src="image.jpg" alt="Example" loading="lazy">
NOTE
🔹 Lazy Loading কী?

Lazy loading হলো যখন একটি image বা video স্ক্রিনে দেখানোর প্রয়োজন হয়, তখনই load হয়। loading="lazy" → browser কে বলে “পরে load করো”

ধরো তোমার page-এ ২০টা image আছে, Normal হলে → সব ২০টা একসাথে load হবে , Lazy loading হলে → শুধু visible (screen-এ যা আছে) load হবে|

📌 Result: Page fast load হয়, Internet data কম লাগে,User experience better

⚠️ Important Tip : Above-the-fold (screen-এর top part) image-এ lazy use না করাই ভালো| User প্রথমেই দেখতে চায়, Delay হলে bad UX

✔️ Avoid unnecessary media

👉 বেশি image/video = slow website

✔️ Responsive media

 
            <img src="image.jpg" style="max-width:100%;" alt="Responsive image">

Conclusion

HTML-এ media use করা শুধু design না — এটা:

  • 🔍 SEO improve করে
  • ♿ Accessibility improve করে
  • ⚡ Performance optimize করে

👉 Short summary:

  • alt = must (SEO + accessibility)
  • <figure> = clean structure
  • <video> = built-in media support
  • Optimization = faster site + better ranking