वेबपेज में इमेज दिखाने का बेसिक HTML कोड

वेबपेज में इमेज दिखाने का बेसिक HTML कोड

किसी भी आकर्षक वेबसाइट बनाने के लिए इमेज का उपयोग बेहद ज़रूरी होता है। आज हम सीखेंगे कि HTML में <img> टैग का इस्तेमाल करके वेबपेज पर इमेज कैसे दिखाते हैं.^[1][2][3]

HTML कोड में

टैग से इमेज दिखाने का बेसिक उदाहरण

HTML इमेज टैग क्या है?

HTML में <img> टैग एक सेल्फ-क्लोसिंग एलिमेंट है जिसका उपयोग वेबपेज पर इमेज डिस्प्ले करने के लिए किया जाता है. यह टैग empty element होता है, यानी इसे बंद करने के लिए कोई क्लोसिंग टैग की ज़रूरत नहीं होती.^[2][3][4][5]

इमेज टैग का बेसिक सिंटैक्स

<img src=”इमेज_का_पाथ” alt=”वैकल्पिक_टेक्स्ट” width=”चौड़ाई” height=”ऊंचाई”>

मुख्य एट्रिब्यूट्स

src एट्रिब्यूट (ज़रूरी)

यह बताता है कि इमेज फाइल कहां स्थित है। यह एट्रिब्यूट अनिवार्य है और ब्राउज़र को निर्देश देता है कि सर्वर पर इमेज को कहाँ देखना है.^[3][5]

<img src=”मेरी-इमेज.jpg”>

alt एट्रिब्यूट (महत्वपूर्ण)

यह वैकल्पिक टेक्स्ट प्रदान करता है जब इमेज लोड नहीं हो पाती। SEO के लिए भी यह बहुत महत्वपूर्ण है क्योंकि सर्च इंजन इसे समझ सकते हैं.^[2][3][5]

<img src=”फूल.jpg” alt=”सुंदर गुलाब का फूल”>

width और height एट्रिब्यूट

ये इमेज की चौड़ाई और ऊंचाई तय करते हैं। वैल्यू पिक्सेल में दी जाती है.^[3][4][6]

<img src=”इमेज.jpg” alt=”नमूना इमेज” width=”500” height=”300”>

व्यावहारिक उदाहरण

बेसिक इमेज एलिमेंट

<!DOCTYPE html>
<html>
<head>
<title>इमेज का उदाहरण</title>
</head>
<body>
<h1>मेरी वेबसाइट</h1>
<img src=”प्रकृति.jpg” alt=”खूबसूरत प्राकृतिक दृश्य” width=”600” height=”400”>
</body>
</html>

रेस्पॉन्सिव इमेज बनाना

CSS के साथ इमेज को रेस्पॉन्सिव बनाने के लिए max-width प्रॉपर्टी का उपयोग करें:^[7][5]

<img src=”इमेज.jpg” alt=”रेस्पॉन्सिव इमेज” style=”max-width: 100%; height: auto;”>

फाइल पाथ के प्रकार

स्थानीय इमेज (Local Image)

<img src=”images/फोटो.jpg” alt=”स्थानीय फोटो”>

वेब URL से इमेज

<img src=”https://example.com/इमेज.jpg” alt=”ऑनलाइन इमेज”>

बेहतर प्रैक्टिसेज

1. हमेशा alt टेक्स्ट दें

<img src=”उत्पाद.jpg” alt=”नया स्मार्टफोन – XYZ मॉडल”>

2. उचित फाइल साइज़ का उपयोग करें

वेबसाइट की गति के लिए इमेज का साइज़ कम रखें.^[5]

3. सही फाइल फॉर्मेट चुनें

· फोटो के लिए: JPEG

· ग्राफिक्स के लिए: PNG

· एनीमेशन के लिए: GIF

CSS के साथ इमेज स्टाइलिंग

बॉर्डर और शैडो

<img src=”पोर्ट्रेट.jpg” alt=”व्यक्ति की तस्वीर”
style=”border: 2px solid #333; box-shadow: 5px 5px 10px grey;”>

गोल कोने वाली इमेज

<img src=”प्रोफाइल.jpg” alt=”प्रोफाइल फोटो”
style=”border-radius: 50%; width: 150px; height: 150px;”>

सामान्य समस्याएं और समाधान

इमेज लोड नहीं हो रही

· फाइल पाथ चेक करें

· फाइल का नाम सही है या नहीं देखें

· इमेज फॉर्मेट समर्थित है या नहीं जांचें^[5]

इमेज बहुत बड़ी या छोटी दिख रही है

CSS या HTML एट्रिब्यूट्स से साइज़ कंट्रोल करें:

<img src=”बड़ी-इमेज.jpg” alt=”बड़ी इमेज” style=”max-width: 100%;”>

निष्कर्ष

HTML में इमेज दिखाना एक सरल प्रक्रिया है जिसमें <img> टैग का सही उपयोग करना होता है। src एट्रिब्यूट से इमेज का पाथ देना, alt टेक्स्ट से एक्सेसिबिलिटी बढ़ाना, और width/height से साइज़ कंट्रोल करना – ये सभी महत्वपूर्ण बातें हैं.^[2][3][5]

याद रखें कि अच्छी वेबसाइट के लिए इमेज का सही उपयोग, उचित साइज़, और तेज़ लोडिंग बहुत ज़रूरी है। प्रैक्टिस करते रहें और अलग-अलग इमेज एट्रिब्यूट्स के साथ एक्सपेरिमेंट करें।

<div style=”text-align: center”>⁂</div>

1.

2. https://ehindistudy.com/2025/01/27/html-image-tag-hindi/

3. https://aiyoit.com/tutorial/what-is-html-image-in-hindi/

4.

https://ktlhtmlinhindi.blogspot.com/p/inserting-images-in-web-page.html

5. https://www.w3schools.com/html/html_images.asp

6. https://techsebatein.com/html-image-tag-in-hindi/

7.

8.

9.

10.

11.

12.

13.

14.

15.

16. https://www.mindluster.com/lesson/27523-video

17. https://web.dev/html?hl=hi

18.

19. https://ppl-ai-code-interpreter-files.s3.amazonaws.com/web/direct-files/89f5d0498b1a9ce7b314baba86621238/8d268a19-0227-4a30-846a-a889314c968c/facd273d.md

20.

21.