HTML Images

HTML Images का उपयोग वेबपेज को visually attractive और informative बनाने के लिए किया जाता है।
Images user का attention बढ़ाती हैं और content को आसानी से समझने में मदद करती हैं।

HTML में Image दिखाने के लिए <img> Tag

HTML में images दिखाने के लिए <img> tag का उपयोग होता है।
यह एक self-closing tag होता है।

Basic Syntax

<img src="image.jpg" alt="Sample Image">

<img> Tag के Important Attributes

1. src (Source)

Image का path या URL बताता है।

<img src="photo.png">

2. alt (Alternative Text)

अगर image load नहीं होती, तो यह text दिखाई देता है।
SEO और accessibility के लिए बहुत जरूरी होता है।

<img src="logo.png" alt="Company Logo">

3. width और height

Image का size set करने के लिए।

<img src="image.jpg" width="300" height="200">

Better practice है कि size CSS से control किया जाए।

Local Image Example

<img src="images/banner.jpg" alt="Website Banner">

यह image उसी website के images folder से load होगी।

External Image (Online URL)

<img src="https://example.com/image.jpg" alt="Online Image">

External images slow loading कर सकती हैं, इसलिए सोच-समझकर use करें।

Image को Clickable Link बनाना

<a href="https://google.com">
  <img src="google.png" alt="Google">
</a>

Image पर click करने से link open होगा।

Image Alignment

CSS से Center Image

<img src="pic.jpg" alt="Image" style="display:block; margin:auto;">

Responsive Images

Mobile-friendly website के लिए image responsive होनी चाहिए।

<img src="photo.jpg" alt="Responsive Image" style="max-width:100%; height:auto;">

Background Image (CSS)

HTML में direct background image नहीं लगती, इसके लिए CSS का उपयोग होता है।

<style>
body {
  background-image: url("bg.jpg");
  background-size: cover;
}
</style>

Image Formats

Format	Use
JPG / JPEG	Photos
PNG	Transparent images
GIF	Simple animations
SVG	Icons, logos
WebP	Modern, fast loading

Broken Image Problem

जब image path गलत होता है या file missing होती है, image show नहीं होती।

Wrong:

<img src="imag.jpg">

Correct:

<img src="image.jpg">

Always alt attribute जरूर लिखें।

Accessibility और Images

Screen readers alt text को पढ़ते हैं।
अगर image decorative है, तो empty alt use करें।

<img src="design.png" alt="">

Common Mistakes

• alt attribute छोड़ देना
• बहुत heavy image use करना
• Image size HTML में fix कर देना
• Wrong file path देना

Best Practices

• Image compress करें
• Proper file name रखें
• Responsive images use करें
• SEO के लिए meaningful alt text लिखें

Real World Example

<figure>
  <img src="nature.jpg" alt="Green Forest">
  <figcaption>Beautiful Green Forest</figcaption>
</figure>

Summary

HTML Images <img> tag से add की जाती हैं।
src और alt attributes सबसे important होते हैं।
Responsive और optimized images professional websites के लिए जरूरी हैं।