Get Started 🚀
← Back to Images Chapter
Image Types

⚙️ Image Attributes — Width, Loading, Title

<img src="..." alt="..." loading="lazy" width="600">

Attributes image ke settings hain — jaise photo frame waale ko bolo "4x6 size, black frame, glass cover." Zyada settings = better display.

width/height — Image load hone pe layout shift prevent karta hai. loading="lazy" — Tab hi load hota hai jab user scroll kare paas. Bandwidth bachata hai. title — Hover pe tooltip text. decoding="async" — Browser image decode karte waqt baaki content render kar sakta hai.

🛺
Hyderabad Analogy: loading="lazy" jaise Swiggy delivery guy — woh tumhare darwaze tak nahi aata jab tak tumhara order ready nahi hota (tum scroll karo image ke paas). Sabka time aur bandwidth bachata hai.

Code Example

HTML — Image Attributes — Width, Loading, Title
<!-- Saari useful attributes ke saath -->
<img
  src="charminar.jpg"
  alt="Charminar raat mein"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
  title="Charminar — Hyderabad ka iconic monument"
>

<!-- Eager loading — above-the-fold images ke liye -->
<img
  src="hero-biryani.jpg"
  alt="Paradise Biryani hero image"
  width="1200"
  height="600"
  loading="eager"
>

<!-- Chhota icon — lazy loading ki zaroorat nahi -->
<img src="icon.svg" alt="Menu" width="24" height="24">
loading="lazy"Tab hi load jab scroll paas aaye — bandwidth bachata hai
loading="eager"Turant load — hero/above-fold images ke liye
decoding="async"Decode karte waqt page render block mat karo
title="..."Hover pe tooltip text (alt se alag hai!)
width + heightLayout shift prevent karta hai — hamesha specify karo

✅ When to Use

  • loading="lazy" fold ke neeche SAARI images ke liye
  • loading="eager" hero images aur above-fold content ke liye
  • CLS prevent karne ke liye HAR image pe width/height
  • Badi images ke liye decoding="async"

❌ When NOT to Use

  • Above-fold images pe loading="lazy" (LCP delay hota hai — SEO ke liye bura)
  • Alt ki jagah title use karna (dono ka alag purpose hai)
💡
Sabse bada performance mistake: width/height NAHI dalna. Bina inke browser ko image size ka pata nahi chalta download tak — page hilta hai. Har image pe width/height dalo. Below-fold images ke saath loading="lazy" combine karo.
← Back to Images Chapter