HTML पेज में इमेज कैसे इन्सर्ट करें?

परिचय

इमेजेस को HTML पेज में किसी भी सेक्शन में आसानी से इन्सर्ट किया जा सकता है। HTML पेज में इमेज इन्सर्ट करने के लिए <img> टैग का उपयोग करें। यह एक खाली टैग है, जिसमें केवल एट्रिब्यूट्स होते हैं क्योंकि क्लोजिंग टैग की आवश्यकता नहीं होती।

महत्वपूर्ण नोट

<img> टैग को <body>...</body> टैग के अंदर उपयोग करना चाहिए।

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

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML img Tag</title> 
    </head> 
    <body> 
        <img src="https://www.tutorialspoint.com/html/images/test.png" 
             alt="Simply Easy Learning" 
             width="200" 
             height="80"> 
    </body> 
</html>

आउटपुट

उन्नत उपयोग

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

<img src="image.jpg" 
     alt="विवरण" 
     style="max-width: 100%; height: auto;">

Picture एलिमेंट (आर्ट डायरेक्शन)

<picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <source media="(max-width: 1200px)" srcset="medium.jpg">
    <img src="large.jpg" alt="विवरण">
</picture>

srcset के साथ रिस्पॉन्सिव इमेजेस

<img src="image-800w.jpg" 
     srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     alt="विवरण">

लेज़ी लोडिंग (प्रदर्शन के लिए)

<img src="image.jpg" alt="विवरण" loading="lazy">

सर्वोत्तम अभ्यास

1. हमेशा alt एट्रिब्यूट प्रदान करें - स्क्रीन रीडर्स और SEO के लिए
2. चौड़ाई और ऊंचाई निर्दिष्ट करें - लेआउट शिफ्ट (CLS) रोकने के लिए
3. उपयुक्त फॉर्मेट चुनें - WebP, AVIF आधुनिक ब्राउज़र्स के लिए; JPEG फोटोज के लिए; PNG पारदर्शिता के लिए
4. इमेजेस ऑप्टिमाइज़ करें - संपीड़न, सही आयाम
5. लेज़ी लोडिंग उपयोग करें - व्यूपोर्ट के बाहर की इमेजेस के लिए
6. CDN का उपयोग करें - तेज़ डिलीवरी के लिए

सामान्य गलतियाँ

• alt एट्रिब्यूट भूल जाना
• बहुत बड़ी इमेजेस उपयोग करना
• width/height न सेट करना (लेआउट शिफ्ट का कारण)
• CSS के बजाय HTML एट्रिब्यूट्स से स्टाइल करना