Images & Accessibility (<img> Tag)

1. Simple Definition

HTML me webpage par photo ya graphics display karne ke liye <img> element ka use hota hai. Ye ek void / self-closing element hai jisme closing tag nahi hota. Isme do sabse zaroori attributes hote hain: src (image ka path/location) aur alt (alternative text description).

2. Real-Life Analogy

3. Why Do We Need It?

Photos ke bina website boring lagti hai. E-commerce par products, blog posts par diagrams aur social media par photos <img> tag se hi dikhti hain.

4. Syntax

<img src="path/to/image.jpg" alt="Descriptive photo description" width="600" height="400" loading="lazy">

5. Basic Example

<!-- 1. Local Image -->
<img src="/assets/images/developer.webp" alt="Developer working on a laptop at a modern wooden desk" width="500" height="300">

<!-- 2. External Web Image with Lazy Loading -->
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="Laptop showing code on screen" loading="lazy">

6. Output / Expected Result

7. Code Explanation

• src: Image ka file path ya online URL.
• alt: Alternative text jo screen readers bolte hain aur image load fail hone par dikhta hai.
• width & height: Image ka aspect ratio reserve karte hain taaki page load par layout shift (CLS) na ho.
• loading="lazy": Image sirf tab download hoti hai jab user scroll karke uske paas pahunchta hai (Data & Speed saver!).

8. Real-World Example: Product Showcase

<div class="product-card">
  <img src="shoes.webp" alt="Nike Air Running Shoes in Black and Neon Orange" width="300" height="200">
  <h3>Nike Air Zoom 2026</h3>
  <p>Price: ₹4,999</p>
</div>

9. Common Mistakes

10. Best Practices

• Modern image formats use karein jaise WebP ya AVIF (JPEG aur PNG se 70% chote file size me better quality).
• Hamesha width aur height specify karein layout stability ke liye.
• Decorative images ke liye empty alt="" use karein taaki screen reader unhe ignore kare.

11. Try It Yourself

Playground me kisi online URL se image embed karein aur loading="lazy" laga kar test karein.

12. Challenge

Ek profile card banayein jisme round avatar image ho (using CSS border-radius: 50%) aur niche name aur social links hon.

13. Interview Questions

14. Quick Revision

• <img src="..." alt="..."> self-closing hota hai.
• alt SEO aur accessibility ke liye compulsory hai.
• loading="lazy" performance boost karta hai.

15. FAQ

Images & Accessibility (<img> Tag)

1. Simple Definition

The <img> element embeds raster or vector graphic media into a webpage. It is a void (self-closing) element requiring two mandatory attributes: src (the image file path or URL) and alt (alternative textual description for accessibility and fallback).

2. Real-Life Analogy

3. Why Do We Need It?

• Universal Accessibility: Screen readers speak the alt text to visually impaired users.
• Slow Network Fallback: When an image fails to load due to network timeouts, the alt text displays in place of the image.
• SEO & Google Image Search: Search engine crawlers cannot "see" pixels; they rank images via alt text.
• Prevent Layout Shifts: Declaring explicit width and height reserves viewport space before images download, preventing Cumulative Layout Shift (CLS).

4. Syntax

<img 
  src="images/profile.webp" 
  alt="Portrait of Sarah smiling in front of a laptop" 
  width="400" 
  height="300"
  loading="lazy"
>

5. Basic Example

<figure>
  <img 
    src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=500" 
    alt="MacBook on a wooden desk displaying code editor" 
    width="500" 
    height="300" 
    style="max-width: 100%; height: auto; border-radius: 8px;"
  >
  <figcaption>Figure 1: Modern web development workstation.</figcaption>
</figure>

6. Output / Expected Result

Figure 1: Modern web development workstation.

7. Code Explanation

• src: The absolute URL or relative local path to the graphic asset.
• alt: Meaningful description of what the image depicts or its functional purpose.
• loading="lazy": Native browser lazy loading; defers fetching offscreen images until the user scrolls near them.
• width & height: Aspect ratio hints for the browser engine to reserve space and eliminate layout shifts (CLS).
• <figure> & <figcaption>: Semantic container and caption pair for illustrations, charts, and media.

8. Real-World Example

E-commerce stores like Amazon use modern WebP and AVIF image formats with responsive srcset attributes, loading high-res images on 4K desktop screens and optimized compressed thumbnails on mobile networks.

9. Common Mistakes (Beginners Traps)

10. Best Practices

• Always include descriptive alt text. For purely decorative graphics, use empty alt="" so screen readers ignore them.
• Use next-gen formats (WebP, AVIF, SVG) for superior compression.
• Add loading="lazy" for images below the initial fold.

11. Try It Yourself

Open the Live Playground, embed an image from Unsplash, and inspect how it behaves when simulated on a slow network!

12. Mini Challenge

Wrap a responsive product photo inside a <figure> element with an accessible <figcaption>, custom dimensions, and lazy loading.

13. Interview Questions

14. Quick Revision

• <img> is a self-closing void element.
• alt is critical for accessibility, SEO, and fallback rendering.
• Always provide dimensions to maintain zero layout shift.

15. FAQ (Frequently Asked Questions)