HTML Images

आज की वेबसाइट बिना तस्वीरों के अधूरी लगती है। इमेजेज़ से वेबसाइट सुंदर, आकर्षक और विज़ुअल बनती है। HTML में इमेज जोड़ने के लिए हम <img> टैग का इस्तेमाल करते हैं। ये एक self-closing tag होता है, यानी इसे बंद करने की जरूरत नहीं पड़ती।

HTML Image Tag — Basic Syntax

<img src="image.jpg" alt="Description of image">

Attribute (एट्रीब्यूट)	उपयोग (Use)
src	इमेज की फ़ाइल का पाथ (URL या फ़ाइल का नाम)
alt	अगर इमेज लोड न हो तो दिखने वाला टेक्स्ट (वैकल्पिक टेक्स्ट)

Example 1: Simple Image

<img src="flower.jpg" alt="सुंदर फूल" width="300" height="200">

Output:

HTML Image Attributes Explained

Attribute (एट्रिब्यूट)	विवरण (Description)
src	इमेज का सोर्स — यानी कहाँ से इमेज आएगी (Source of the image file)।
alt	Alternative text (वैकल्पिक पाठ) जो कि SEO और accessibility (पहुँच-योग्यता) के लिए बहुत ज़रूरी है। यह तब दिखता है जब इमेज लोड नहीं हो पाती।
width / height	इमेज का साइज पिक्सेल में सेट करता है। ये ब्राउज़र को इमेज के लिए जगह रिज़र्व करने में मदद करते हैं।
title	जब यूज़र इमेज पर माउस ले जाए (hover करे), तो एक Tooltip (छोटा टेक्स्ट बॉक्स) दिखाता है।
loading="lazy"	इमेज को तभी लोड करता है जब यूज़र उसके पास स्क्रॉल करे (Speed और पेज परफॉर्मेंस बढ़ाता है)। इसे लेज़ी लोडिंग कहते हैं।

Example 2: Title और Alt के साथ

<img src="tajmahal.jpg" alt="Taj Mahal" title="Taj Mahal - Seven Wonders" width="400">

Output: माउस ले जाने पर Tooltip “Taj Mahal - Seven Wonders” दिखेगा।

Tip: अगर इमेज लोड नहीं होती

कभी-कभी इमेज फाइल गायब होती है या नाम गलत होता है। ऐसे में alt टेक्स्ट दिखता है — जो बहुत काम का होता है।

<img src="wrongname.jpg" alt="Image not found">

Output: “Image not found” टेक्स्ट दिखाई देगा।

Example 3: Online Image (Absolute URL)

आप किसी बाहरी वेबसाइट की इमेज भी इस्तेमाल कर सकते हैं।

<img src="https://htfyweb.com/html/img_chania.jpg" alt="Mountain" width="400">

Output: यह इंटरनेट से सीधे इमेज दिखाएगा।

Example 4: Folder से Image जोड़ना (Relative Path)

अगर आपकी इमेज किसी फ़ोल्डर में रखी है, तो path इस तरह से लिखें:

<img src="images/nature.jpg" alt="Nature View" width="400">

Folder Structure:

project/
 ├── index.html
 └── images/
      └── nature.jpg

Example 5: Border और Style लगाना

<img src="bird.jpg" alt="Bird" style="border: 3px solid #333; border-radius: 10px;">

Output: बर्ड इमेज पर गोल किनारे और बॉर्डर दिखाई देंगे।

Example 6: Image को Center में दिखाना

<div style="text-align:center;">
  <img src="sunset.jpg" alt="Sunset" width="400">
</div>

Output: इमेज पेज के बीच में आ जाएगी।

Example 7: Image को Clickable बनाना

आप किसी इमेज को भी Link बना सकते हैं — मतलब, क्लिक करते ही यूज़र किसी पेज या साइट पर चला जाएगा।

<a href="https://www.google.com" target="_blank">
  <img src="google-logo.png" alt="Google Logo" width="150">
</a>

Output: क्लिक करने पर Google खुलेगा।

Example 8: Background Image (CSS के साथ)

<div style="background-image: url('bg.jpg'); 
            background-size: cover;
            height: 300px;
            color: white;
            text-align: center;
            padding-top: 100px;">
  Welcome to My Website 🌅
</div>

Output: एक सुंदर background image वाला सेक्शन।

Example 9: Responsive Image (Auto Fit)

Responsive इमेज अपने-आप स्क्रीन के अनुसार adjust हो जाती है। इसके लिए हम CSS में width: 100%; height: auto; लिखते हैं।

<img src="mountain.jpg" alt="Responsive Mountain" style="width:100%; height:auto;">

यह मोबाइल, टैबलेट, और डेस्कटॉप — सभी में सही दिखेगा।

Bonus Example: Image Caption के साथ (Figure Tag)

<figure>
  <img src="river.jpg" alt="River View" width="400">
  <figcaption>यह एक सुंदर नदी का दृश्य है।</figcaption>
</figure>

Output: इमेज के नीचे कैप्शन (caption text) दिखेगा।

Lazy Loading (Performance बढ़ाने का तरीका)

अगर आपके पेज पर बहुत सारी इमेज हैं, तो loading="lazy" attribute इस्तेमाल करें।

<img src="forest.jpg" alt="Forest" width="400" loading="lazy">

इससे पेज तेजी से खुलेगा क्योंकि इमेज तभी लोड होगी जब यूज़र वहां पहुंचेगा।

Tips:

alt हमेशा लिखें — SEO और Accessibility दोनों के लिए ज़रूरी है।
बड़ी इमेज को पहले compress करें (Page Speed के लिए)।
WebP या AVIF format इमेज का उपयोग करें — ये हल्के और आधुनिक हैं।
Responsive design में width: 100% का प्रयोग करें।

Attribute (एट्रिब्यूट)	विवरण (Description)
src	इमेज का सोर्स — यानी कहाँ से इमेज आएगी (Source of the image file)।
alt	Alternative text (वैकल्पिक पाठ) जो कि SEO और accessibility (पहुँच-योग्यता) के लिए बहुत ज़रूरी है। यह तब दिखता है जब इमेज लोड नहीं हो पाती।
width / height	इमेज का साइज पिक्सेल में सेट करता है। ये ब्राउज़र को इमेज के लिए जगह रिज़र्व करने में मदद करते हैं।
title	जब यूज़र इमेज पर माउस ले जाए (hover करे), तो एक Tooltip (छोटा टेक्स्ट बॉक्स) दिखाता है।
loading="lazy"	इमेज को तभी लोड करता है जब यूज़र उसके पास स्क्रॉल करे (Speed और पेज परफॉर्मेंस बढ़ाता है)। इसे लेज़ी लोडिंग कहते हैं।