7. Images (Optimization & Art Direction)

1. The Img Tag (Inline-Replaced Element)

Basic: <img src="cat.jpg" alt="Cute cat"> se image lagti hai.

Pro: <img> ek inline-replaced element hai. Iska matlab markup padhte waqt HTML file mein wo object maujood nahi hota. Browser execution ke waqt Network HTTP request bhej kar file laata hai aur UI repaint karta hai. Agar files properly optimized na ho toh website ki load speed (First Contentful Paint) destroy ho sakti hai.

2. The Alt Attribute (Crucial Triple Threat)

Pro: alt tag ko ignor mat karein. Iske 3 bade fayde hain:

1. SEO Engine: Google Image recognition ki bajaye mainly Alt text se samajhta hai image kya dikha rahi hai.
2. Web Accessibility: Screen Readers blind users ko bol kar sunate hain. Agar image sirf layout design ke liye hai, toh alt="" (empty) chhod dein taaki A11Y tools isko skip kar dein.
3. Network Failure: Slow net mein photo render nahi hui toh alt text wahan block mein print ho jata hai.

3. Width, Height & Cumulative Layout Shift (CLS)

Pro: Pehle log width/height CSS se set karte the. Par modern Web Vitals ne usko change kar diya hai. Ab HTML attributes width="500" height="300" Dena mandatory practice hai. Kyunki agar browser ko dimensions nahi pata, toh image load hote hi baaki content ko achanak niche dhakelti hai (Layout Shift). Attributes dene se browser pehle se hi blank memory space (aspect-ratio box) reserve kar leta hai.

4. Responsive Images & HTML5 Picture Element

Pro: Desktop ki 4K (5MB) image mobile par bhej kar CSS se shrink karna data wastage hai. HTML5 ne iska solid solution Art Direction diya hai:

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 480px)" srcset="medium.jpg">
  <img src="mobile.jpg" alt="Responsive Hero">
</picture>

Browser screen resolution check karta hai, aur condition match hone par sirf aur sirf wahi ek optimized image request karta hai. Isse mobile performance super fast ho jati hai.

5. Lazy Loading (Native Feature)

Pro: loading="lazy" attribute image tab tak network se request nahi hone deta jab tak user scroll karke uske viewport pass (fold) na aa jaye. JavaScript based lazy loading ki ab zarurat nahi rahi.