Image Types

🖼️ Basic Image Tag — Pehli Photo

<img> tag page pe ek image dikhata hai. Zyada tar HTML tags ke unlike, iska koi closing tag nahi hota. Yeh self-closing element hai — jaise photo frame, bas deewar pe laga do.

Do zaroori attributes: src (image file kahan hai) aur alt (image mein kya hai, screen readers ke liye aur jab image load na ho). Alt nahi = accessibility kharab + SEO kharab.

🛺

Hyderabad Analogy: src jaise photo lab ka address — "yahan jaake picture lo." alt jaise photo ke peeche likhna "Charminar, 1591" — agar photo fade ho jaaye toh pata chale kya thi.

Code Example

HTML — Basic Image Tag — Pehli Photo

<!-- Basic image -->
<img src="charminar.jpg" alt="Hyderabad mein Charminar">

<!-- Internet se image -->
<img src="https://example.com/biryani.jpg" alt="Hyderabadi Dum Biryani">

<!-- Width aur height ke saath -->
<img src="golconda.jpg" alt="Golconda Fort" width="600" height="400">

<!-- Broken image — file nahi mili -->
<img src="missing.jpg" alt="Yeh alt text tab dikhega jab image na chale">

src="..."Image file ka path — local ya URL

alt="..."Alternative text — jab image fail ho toh dikhe, screen readers padhte hain

width="600"Display width pixels mein (optional par recommended)

height="400"Display height pixels mein (layout shift prevent karta hai)

✅ When to Use

Page pe koi bhi photo, logo, icon ya illustration
E-commerce ya menu pages mein product images
Profile pictures, banners, gallery images

❌ When NOT to Use

Decorative images jo koi matlab nahi add karti (CSS background use karo)
Jab image ke upar text chahiye (CSS background-image use karo)

💡

Hamesha width aur height attributes specify karo chahe CSS se resize karo. Yeh CLS (Cumulative Layout Shift) prevent karta hai — images load hone pe page nahi hilta. Google low CLS wali pages ko zyada rank karta hai.

← Back to Images Chapter