🟢 Foundation · Lesson 10

Images in HTML

HTML में Images

The img Tag — two attributes minimum

<img src="school-building.jpg" alt="Alpine Public School main building">

[photo of the school building appears here]

src (source) — WHERE the image file is: a filename in the same folder, a path like images/logo.png, or a full URL.
alt (alternative text) — WHAT the image shows, in words.
Empty element — no closing tag, no content to wrap. The image itself comes from the file, not from between tags.

Why alt is Non-Negotiable (3 real reasons)

Who reads alt	Why it matters
Blind users' screen readers	Speak the alt aloud — without it the user hears "image" and nothing else
Google Images	Cannot "see" photos; ranks your image for searches based on alt text (free SEO traffic!)
The browser, on failure	If the file is missing or the connection is slow, alt text shows in the broken frame

<img src="topper.jpg" alt="Priya Sharma receiving the Class 10 topper award">  ✅ describes
<img src="topper.jpg" alt="image">                                            ❌ useless
<img src="border-line.png" alt="">                                            ✅ empty alt for pure decoration

The decoration rule: purely decorative images (divider lines, background flourishes) get an empty alt="" — this tells screen readers "skip me, nothing to say", which is correct and intentional. Omitting alt entirely is invalid; empty alt is a deliberate choice.

width, height — and the jumping-page problem

<img src="banner.jpg" alt="Admission open banner" width="600" height="300">

Why professionals ALWAYS write width and height: while the image file downloads, the browser doesn't know its size — so it renders the page, then the image arrives and pushes everything down. You have experienced this: about to tap a button and the page jumps, you tap an ad instead. That jump is called layout shift (Google measures it as CLS and ranks you down for it). Giving width+height reserves the exact space in advance — no jump, better ranking.

Tip: write the image's real pixel size in the attributes; final display size can still be controlled by CSS later — the attributes' job is the space reservation.

figure and figcaption — image with a caption

<figure>
    <img src="annual-day.jpg" alt="Students performing on annual day stage">
    <figcaption>Annual Day 2026 – Class 5 dance performance</figcaption>
</figure>

[photo] Annual Day 2026 – Class 5 dance performance (small caption under the photo)

HTML5 pair for "an image with its caption" — newspapers, galleries, blog posts. Semantic: the caption is officially ATTACHED to the image, not just a paragraph floating below it.

Choosing the Format

Format	Best for	Note
JPG	Photos	Small files, no transparency
PNG	Logos, screenshots	Transparency supported, bigger files
WebP	Everything modern	25-35% smaller than JPG/PNG; all current browsers support it
SVG	Icons, logos	Vector — infinitely sharp at any size (own chapter later)
GIF	Simple animations	Old; use video/WebP for anything serious

Image Not Showing? The 4-step Fix

1. SPELLING: photo.jpg ≠ Photo.jpg ≠ photo.jpeg
   (servers are case-sensitive - the #1 cause!)
2. PATH: is the file really where src says?
   src="images/a.jpg" needs an images folder NEXT TO the html file
3. EXTENSION: file saved as .jpg but src says .png?
4. Right-click broken icon → Open image in new tab →
   the URL it tried tells you exactly what it looked for

Broken icon 🖼️ + your alt text = browser searched, file not found where src pointed

img Tag — कम से कम दो attributes

<img src="school-building.jpg" alt="Alpine Public School main building">

[school building की photo यहां दिखती है]

src (source) — image file KAHAN है: same folder में filename, images/logo.png जैसा path, या पूरा URL.
alt (alternative text) — image में KYA है, शब्दों में.
Empty element — न closing tag, न लपेटने को content. Image खुद file से आती है, tags के बीच से नहीं.

alt क्यों Non-Negotiable है (3 असली वजहें)

alt कौन पढ़ता है	क्यों ज़रूरी
Blind users के screen readers	alt बोलकर सुनाते हैं — इसके बिना user को सिर्फ "image" सुनाई देता है
Google Images	Photos "देख" नहीं सकता; alt text के आधार पर searches में rank करता है (free SEO traffic!)
Browser, fail होने पर	File गायब हो या connection धीमा, टूटे frame में alt text दिखता है

<img src="topper.jpg" alt="Priya Sharma receiving the Class 10 topper award">  ✅ describe करता है
<img src="topper.jpg" alt="image">                                            ❌ बेकार
<img src="border-line.png" alt="">                                            ✅ सजावट के लिए खाली alt

Decoration rule: शुद्ध सजावटी images (divider lines, background flourishes) को खाली alt="" — यह screen readers से कहता है "मुझे skip करो, कहने को कुछ नहीं", जो सही और जानबूझकर है. alt पूरा छोड़ देना invalid है; खाली alt एक सोचा-समझा फैसला.

width, height — और उछलते page की problem

<img src="banner.jpg" alt="Admission open banner" width="600" height="300">

Professionals HAMESHA width-height क्यों लिखते हैं: Image file download होते समय browser को उसका size पता नहीं — तो page बना देता है, फिर image आती है और सब नीचे धकेल देती है. आपने झेला है: button दबाने ही वाले थे कि page उछला और ad दब गया. उस उछाल को layout shift कहते हैं (Google इसे CLS में मापकर ranking गिराता है). Width+height देने से exact जगह पहले से reserve — न उछाल, बेहतर ranking.

Tip: attributes में image का असली pixel size लिखिए; final display size बाद में CSS से control होगा — attributes का काम जगह reserve करना है.

figure और figcaption — caption वाली image

<figure>
    <img src="annual-day.jpg" alt="Students performing on annual day stage">
    <figcaption>Annual Day 2026 – Class 5 dance performance</figcaption>
</figure>

[photo] Annual Day 2026 – Class 5 dance performance (photo के नीचे छोटा caption)

"Caption के साथ image" का HTML5 जोड़ा — अखबार, galleries, blog posts. Semantic: caption officially image से JUDA है, नीचे तैरता paragraph भर नहीं.

Format कैसे चुनें

Format	Best for	Note
JPG	Photos	छोटी files, transparency नहीं
PNG	Logos, screenshots	Transparency supported, बड़ी files
WebP	हर modern चीज़	JPG/PNG से 25-35% छोटा; सारे current browsers support करते हैं
SVG	Icons, logos	Vector — किसी भी size पर पूरी तरह sharp (अपना chapter आगे)
GIF	Simple animations	पुराना; serious काम के लिए video/WebP

Image नहीं दिख रही? 4-Step Fix

1. SPELLING: photo.jpg ≠ Photo.jpg ≠ photo.jpeg
   (servers case-sensitive hain - #1 wajah!)
2. PATH: file sach me wahi hai jahan src keh raha hai?
   src="images/a.jpg" ko html file ke BAGAL me images folder chahiye
3. EXTENSION: file .jpg me save hui par src .png keh raha hai?
4. Toote icon par right-click → Open image in new tab →
   jo URL usne try kiya wahi batata hai usne kahan dhoondha

टूटा icon 🖼️ + आपका alt text = browser ने ढूंढा, src जहां बोल रहा था वहां file नहीं मिली

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.