HTML पेज में इमेज हाइट और विड्थ एट्रिब्यूट का उपयोग कैसे करें?

परिचय

HTML पेज में इमेज जोड़ने के लिए <img> टैग का उपयोग किया जाता है। इसके साथ, हमें इमेज की ऊंचाई और चौड़ाई पिक्सेल में सेट करने के लिए height और width एट्रिब्यूट्स का उपयोग करने की आवश्यकता होती है। बस ध्यान रखें कि इन दोनों एट्रिब्यूट्स को निर्दिष्ट करें।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Document</title> 
    </head> 
    <body> 
        <img src="/green/images/logo.png" alt="We Learners" width="170" height="70"> 
    </body> 
</html>

आउटपुट

width और height एट्रिब्यूट्स क्यों महत्वपूर्ण हैं?

• लेआउट शिफ्ट रोकता है (CLS - Cumulative Layout Shift) - ब्राउज़र को इमेज लोड होने से पहले स्पेस रिजर्व करने देता है
• पेज लोड प्रदर्शन सुधारता है - ब्राउज़र लेआउट जल्दी कैलकुलेट कर सकता है
• उपयोगकर्ता अनुभव बेहतर - कंटेंट इधर-उधर नहीं कूदता
• Core Web Vitals - CLS स्कोर सुधारता है

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

1. हमेशा width और height निर्दिष्ट करें

<!-- अच्छा -->
<img src="photo.jpg" alt="विवरण" width="800" height="600">

<!-- खराब -->
<img src="photo.jpg" alt="विवरण">

2. CSS में aspect-ratio उपयोग करें (आधुनिक)

<style>
    img {
        max-width: 100%;
        height: auto;
        /* aspect-ratio चौड़ाई/ऊंचाई अनुपात बनाए रखता है */
    }
    
    .hero-img { aspect-ratio: 16 / 9; }
    .square-img { aspect-ratio: 1 / 1; }
    .portrait-img { aspect-ratio: 3 / 4; }
</style>

3. रिस्पॉन्सिव इमेजेस के लिए

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

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

<picture>
    <source media="(max-width: 600px)" srcset="mobile.jpg" width="400" height="300">
    <source media="(max-width: 1200px)" srcset="tablet.jpg" width="800" height="600">
    <img src="desktop.jpg" width="1200" height="900" alt="विवरण">
</picture>

आधुनिक CSS: object-fit और object-position

<style>
    .img-container {
        width: 300px;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
    }
    
    .img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* cover, contain, fill, scale-down, none */
        object-position: center; /* center, top, bottom, left, right, 50% 50% */
    }
</style>

<div class="img-container">
    <img src="photo.jpg" alt="विवरण" width="600" height="400">
</div>

SVG के लिए विशेष नोट

<!-- SVG के लिए width/height एट्रिब्यूट्स वैकल्पिक हैं -->
<img src="icon.svg" alt="आइकन" width="24" height="24">

<!-- या CSS में -->
<style>
    .icon { width: 24px; height: 24px; }
</style>
<img src="icon.svg" alt="आइकन" class="icon">

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

• width/height न देना (लेआउट शिफ्ट)
• असली इमेज डायमेंशन्स से अलग मान देना (विकृति)
• CSS में width: 100%; height: auto; के साथ width/height एट्रिब्यूट्स न देना
• बहुत बड़ी इमेजेस उपयोग करना (बैंडविड्थ बर्बादी)

सारांश