इमेज

सजावटी इमेज, जैसे कि बटन पर बैकग्राउंड ग्रेडिएंट या कॉन्टेंट के सेक्शन या पूरे पेज पर बैकग्राउंड इमेज, दिखाने के लिए होती हैं. इन्हें सीएसएस की मदद से लागू किया जाना चाहिए. जब कोई इमेज, किसी दस्तावेज़ के बारे में ज़्यादा जानकारी देती है, तो उसे कॉन्टेंट माना जाता है. इसलिए, उसे एचटीएमएल के साथ एम्बेड किया जाना चाहिए.

इमेज शामिल करने का मुख्य तरीका यह है कि <img> टैग के साथ src एट्रिब्यूट का इस्तेमाल किया जाए. यह एट्रिब्यूट, इमेज रिसोर्स का रेफ़रंस देता है. साथ ही, alt एट्रिब्यूट का इस्तेमाल करके इमेज के बारे में बताया जाता है.

<img src="images/eve.png" alt="Eve">

<img> पर मौजूद srcset एट्रिब्यूट और <picture> एलिमेंट, दोनों की मदद से मीडिया क्वेरी से जुड़े कई इमेज सोर्स शामिल किए जा सकते हैं. हर इमेज सोर्स में फ़ॉलबैक इमेज सोर्स होता है. इससे डिवाइस के रिज़ॉल्यूशन, ब्राउज़र की क्षमताओं, और व्यूपोर्ट के साइज़ के आधार पर सबसे सही इमेज फ़ाइल दिखाई जा सकती है. srcset एट्रिब्यूट की मदद से, रिज़ॉल्यूशन के आधार पर इमेज के कई वर्शन उपलब्ध कराए जा सकते हैं. साथ ही, sizes एट्रिब्यूट की मदद से, ब्राउज़र के व्यूपोर्ट के साइज़ के आधार पर भी इमेज के कई वर्शन उपलब्ध कराए जा सकते हैं.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

इसे <picture> एलिमेंट और <source> चाइल्ड एलिमेंट की मदद से भी किया जा सकता है. यह <img> को डिफ़ॉल्ट सोर्स के तौर पर लेता है.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

एचटीएमएल में पहले से मौजूद रेस्पॉन्सिव इमेज के इन तरीकों के अलावा, एचटीएमएल में अलग-अलग एट्रिब्यूट का इस्तेमाल करके, इमेज रेंडरिंग की परफ़ॉर्मेंस को भी बेहतर बनाया जा सकता है. <img> टैग और इसलिए ग्राफ़िकल सबमिट बटन <input type="image"> में, height और width एट्रिब्यूट शामिल किए जा सकते हैं. इनसे इमेज का आसपेक्ट रेशियो सेट किया जा सकता है, ताकि कॉन्टेंट लेआउट में बदलाव कम हो. lazy एट्रिब्यूट की मदद से, लेज़ी लोडिंग की सुविधा चालू की जा सकती है.

एचटीएमएल में, सीधे तौर पर <svg> का इस्तेमाल करके एसवीजी इमेज भी शामिल की जा सकती हैं. हालांकि, .svg एक्सटेंशन वाली एसवीजी इमेज या data-uri के तौर पर एसवीजी इमेज को <img> एलिमेंट का इस्तेमाल करके एम्बेड किया जा सकता है.

कम से कम, हर फ़ोरग्राउंड इमेज में src और alt एट्रिब्यूट शामिल होने चाहिए.

src फ़ाइल, एम्बेड की गई इमेज का पाथ और फ़ाइल का नाम है. src एट्रिब्यूट का इस्तेमाल, इमेज का यूआरएल देने के लिए किया जाता है. इसके बाद, ब्राउज़र ऐसेट को फ़ेच करता है और उसे पेज पर रेंडर करता है. <img> के लिए इस एट्रिब्यूट की ज़रूरत होती है. इसके बिना, कुछ भी रेंडर नहीं किया जा सकता.

alt एट्रिब्यूट, इमेज के लिए वैकल्पिक टेक्स्ट उपलब्ध कराता है. इससे उन लोगों को इमेज के बारे में जानकारी मिलती है जो स्क्रीन नहीं देख पाते. जैसे, सर्च इंजन, सुलभता टेक्नोलॉजी, Alexa, Siri, और Google Assistant. अगर इमेज लोड नहीं होती है, तो ब्राउज़र इस टेक्स्ट को दिखा सकता है. धीमे नेटवर्क या सीमित बैंडविथ वाले उपयोगकर्ताओं के अलावा, एचटीएमएल ईमेल में alt टेक्स्ट बहुत काम का होता है. ऐसा इसलिए, क्योंकि कई उपयोगकर्ता अपने ईमेल ऐप्लिकेशन में इमेज को ब्लॉक कर देते हैं.

<img src="path/filename" alt="descriptive text" />

अगर इमेज SVG फ़ाइल टाइप की है, तो role="img" भी शामिल करें. ऐसा VoiceOver बग की वजह से करना ज़रूरी है.

<img src="switch.svg" alt="light switch" role="img" />

alt इमेज के बारे में असरदार जानकारी लिखना

वैकल्पिक टेक्स्ट वाले एट्रिब्यूट छोटे और सटीक होने चाहिए. इनमें इमेज से जुड़ी सभी ज़रूरी जानकारी शामिल होनी चाहिए. साथ ही, ऐसी जानकारी शामिल नहीं होनी चाहिए जो दस्तावेज़ में मौजूद अन्य कॉन्टेंट के लिए ज़रूरी नहीं है या किसी और तरह से काम की नहीं है. टेक्स्ट लिखते समय, टोन ऐसी होनी चाहिए जो साइट की टोन से मिलती-जुलती हो.

इमेज के लिए असरदार वैकल्पिक टेक्स्ट लिखने के लिए, कल्पना करें कि आपको किसी ऐसे व्यक्ति को पूरा पेज पढ़कर सुनाना है जो उसे देख नहीं सकता. सिमैंटिक <img> एलिमेंट का इस्तेमाल करके, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों और बॉट को यह सूचना दी जाती है कि यह एलिमेंट एक इमेज है. alt में "यह "" की इमेज/स्क्रीनशॉट/फ़ोटो है" शामिल करने की ज़रूरत नहीं है. उपयोगकर्ता को यह जानने की ज़रूरत नहीं है कि कोई इमेज मौजूद है. हालांकि, उसे यह ज़रूर पता होना चाहिए कि इमेज में क्या जानकारी दी गई है.

आम तौर पर, आपको यह नहीं कहना चाहिए कि "यह लाल रंग की टोपी पहने हुए कुत्ते की धुंधली इमेज है." इसके बजाय, आपको यह बताना होगा कि इमेज में क्या दिखाया गया है और वह दस्तावेज़ के बाकी कॉन्टेक्स्ट से कैसे जुड़ी है. आस-पास के टेक्स्ट के कॉन्टेक्स्ट और कॉन्टेंट के हिसाब से, जवाब में दी गई जानकारी बदल जाती है.

उदाहरण के लिए, कुत्ते की फ़ोटो के बारे में अलग-अलग तरह से बताया गया है. यह कॉन्टेक्स्ट पर निर्भर करता है. अगर Fluffy, Yuckymeat डॉग फ़ूड की समीक्षा के बगल में मौजूद अवतार है, तो alt="Fluffy" का इस्तेमाल किया जा सकता है.

अगर फ़ोटो, जानवरों के आश्रय स्थल की वेबसाइट पर Fluffy के गोद लेने वाले पेज का हिस्सा है, तो टारगेट ऑडियंस, कुत्ते को गोद लेने वाले संभावित माता-पिता हैं. टेक्स्ट में, इमेज में दी गई जानकारी के बारे में बताया जाना चाहिए. यह जानकारी, गोद लेने वाले व्यक्ति के लिए काम की होनी चाहिए. साथ ही, यह जानकारी आस-पास के टेक्स्ट में दोहराई नहीं जानी चाहिए. ज़्यादा जानकारी देना सही है, जैसे कि alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth". आम तौर पर, गोद लेने के पेज के टेक्स्ट में गोद लिए जाने वाले पालतू जानवर की प्रजाति, नस्ल, उम्र, और लिंग की जानकारी शामिल होती है. इसलिए, इसे ऑल्ट टेक्स्ट में दोहराने की ज़रूरत नहीं है. हालांकि, कुत्ते के बारे में लिखी गई जानकारी में शायद उसके बालों की लंबाई, रंग या खिलौनों के बारे में जानकारी शामिल नहीं होती.

अहम बात यह है कि हमने इमेज के बारे में पूरी जानकारी नहीं दी है. कुत्ते को गोद लेने वाले व्यक्ति को यह जानने की ज़रूरत नहीं है कि कुत्ता घर के अंदर है या बाहर. उसे यह भी जानने की ज़रूरत नहीं है कि कुत्ते ने लाल रंग का कॉलर और नीले रंग का पट्टा पहना है.

आइकॉन के लिए इमेज का इस्तेमाल करते समय, alt एट्रिब्यूट से ऐक्सेस किया जा सकने वाला नाम मिलता है. इसलिए, इमेज की जानकारी देने के बजाय आइकॉन का मतलब बताएं. उदाहरण के लिए, मैग्नीफ़ाइंग ग्लास आइकॉन के ऑल्ट एट्रिब्यूट की वैल्यू search है. घर जैसे दिखने वाले आइकॉन का वैकल्पिक लेख home है. पांच इंच की फ़्लॉपी डिस्क के आइकॉन के बारे में जानकारी save है. अगर सबसे सही तरीकों और एंटी-पैटर्न के बारे में बताने के लिए, Fluffy के दो आइकॉन इस्तेमाल किए जाते हैं, तो हरे रंग की बेरेट पहने हुए मुस्कुराते कुत्ते के आइकॉन पर alt="good" सेट किया जा सकता है. वहीं, लाल रंग की बेरेट पहने हुए गुर्राते कुत्ते के आइकॉन पर alt="bad" सेट किया जा सकता है. हालांकि, सिर्फ़ स्टैंडर्ड आइकॉन का इस्तेमाल करें. अगर आपने स्टैंडर्ड आइकॉन के अलावा, अच्छे और बुरे फ़्लफ़ी जैसे आइकॉन का इस्तेमाल किया है, तो लेजेंड शामिल करें. साथ ही, पक्का करें कि आइकॉन ही आपके यूज़र इंटरफ़ेस (यूआई) एलिमेंट का मतलब समझने का एकमात्र तरीका न हों.

अगर इमेज कोई स्क्रीनशॉट या ग्राफ़ है, तो उसके बारे में जानकारी देने के बजाय, उससे मिली जानकारी के बारे में लिखें. इमेज से हज़ारों शब्दों की जानकारी मिल सकती है. हालांकि, इमेज के ब्यौरे में, सीखी गई सभी बातों को कम शब्दों में बताया जाना चाहिए.

कॉन्टेक्स्ट में ऐसी जानकारी शामिल न करें जिसके बारे में उपयोगकर्ता को पहले से पता है. साथ ही, कॉन्टेंट में भी इसके बारे में बताया गया है. उदाहरण के लिए, अगर आप ब्राउज़र की सेटिंग बदलने के बारे में ट्यूटोरियल वाले पेज पर हैं और पेज पर Chrome ब्राउज़र में मौजूद आइकॉन पर क्लिक करने के बारे में बताया गया है, तो स्क्रीन कैप्चर में पेज का यूआरएल ज़रूरी नहीं है. alt को सिर्फ़ इस विषय तक सीमित रखें: सेटिंग बदलने का तरीका.

alt "सेटिंग आइकॉन, खोज फ़ील्ड के नीचे मौजूद नेविगेशन बार में होता है." हो सकता है. "स्क्रीनशॉट" या "मशीनलर्निंगवर्कशॉप" को शामिल न करें, क्योंकि उपयोगकर्ता को यह जानने की ज़रूरत नहीं है कि यह एक स्क्रीनशॉट है. साथ ही, उसे यह जानने की भी ज़रूरत नहीं है कि तकनीकी लेखक ने निर्देश लिखते समय, कौनसी वेबसाइट सर्फ़ की थी. इमेज का ब्यौरा इस आधार पर दिया गया है कि इमेज को पहली बार क्यों शामिल किया गया था.

अगर स्क्रीन कैप्चर में, chrome://version/ पर जाकर ब्राउज़र के वर्शन नंबर का पता लगाने का तरीका दिखाया गया है, तो पेज के कॉन्टेंट में यूआरएल को निर्देशों के तौर पर शामिल करें. साथ ही, ऑल्ट एट्रिब्यूट के तौर पर एक खाली स्ट्रिंग दें, क्योंकि इमेज में ऐसी कोई जानकारी नहीं है जो आस-पास के टेक्स्ट में नहीं है.

अगर इमेज से कोई अतिरिक्त जानकारी नहीं मिलती है या वह सिर्फ़ सजावट के लिए है, तो भी एट्रिब्यूट मौजूद होना चाहिए. हालांकि, इसकी वैल्यू खाली स्ट्रिंग के तौर पर होनी चाहिए.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com पर फ़ोरग्राउंड में सात इमेज हैं. इसलिए, alt एट्रिब्यूट वाली सात इमेज हैं: ईस्टर एग लाइट स्विच, मैन्युअल आइकॉन, Hal और Eve की दो बायोग्राफ़िकल फ़ोटो, और ब्लेंडर, वैक्यूम क्लीनर, और टोस्टर के तीन अवतार. फ़ोरग्राउंड में मौजूद मैगज़ीन जैसी दिखने वाली इमेज, सिर्फ़ सजावट के लिए है. पेज पर बैकग्राउंड की दो इमेज भी हैं. ये इमेज, सजावट के लिए हैं और इन्हें सीएसएस की मदद से जोड़ा गया है. इसलिए, इन्हें ऐक्सेस नहीं किया जा सकता.

यह मैगज़ीन सिर्फ़ सजावट के लिए है. इसलिए, इसमें alt एट्रिब्यूट की वैल्यू खाली है. साथ ही, role एट्रिब्यूट की वैल्यू none है, क्योंकि इमेज सिर्फ़ दिखाने के लिए SVG है. अगर एसवीजी इमेज काम की हैं, तो उनमें role="img" शामिल होना चाहिए.

<img src="svg/magazine.svg" alt="" role="none" />

पेज पर सबसे नीचे तीन समीक्षाएं दी गई हैं. हर समीक्षा में, पोस्टर की इमेज दी गई है. आम तौर पर, alt टेक्स्ट में, फ़ोटो में मौजूद व्यक्ति का नाम होता है.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

इसके बजाय, यह एक चुटकुले वाला पेज है. इसलिए, आपको ऐसी जानकारी देनी चाहिए जो कम दृष्टि वाले लोगों को साफ़ तौर पर नहीं दिखती. इससे वे चुटकुले का आनंद ले पाएंगे. हम वर्ण के नाम का इस्तेमाल करने के बजाय, ओरिजनल मशीन फ़ंक्शन को alt के तौर पर इस्तेमाल करते हैं:

<img src="images/blender.svg" alt="blender" role="img" />

शिक्षकों की फ़ोटो सिर्फ़ अवतार नहीं हैं, बल्कि बायोग्राफ़िकल इमेज हैं. इसलिए, इनके बारे में ज़्यादा जानकारी मिलती है.

अगर यह कोई असली साइट होती, तो आपको शिक्षक के बारे में कम से कम जानकारी देनी होती. इससे, क्लास में शामिल होने वाला कोई छात्र या छात्रा, क्लास में शामिल होने पर शिक्षक को पहचान सकता है.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

यह एक चुटकुले वाली साइट है. इसलिए, चुटकुले के हिसाब से काम की जानकारी दो:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

अगर आपको किसी दोस्त को फ़ोन पर पेज पढ़कर सुनाना है, तो उसे इस बात से कोई फ़र्क़ नहीं पड़ेगा कि लाल बिंदु कैसा दिखता है. इस मामले में, फ़िल्म के रेफ़रंस का इतिहास मायने रखता है.

ज़्यादा जानकारी देने वाला टेक्स्ट लिखते समय, इस बात का ध्यान रखें कि इमेज में मौजूद कौनसी जानकारी उपयोगकर्ता के लिए ज़रूरी और काम की है. उस जानकारी को टेक्स्ट में शामिल करें. ध्यान रखें कि इमेज के लिए alt एट्रिब्यूट की वैल्यू, कॉन्टेक्स्ट के हिसाब से अलग-अलग होती है. इमेज में मौजूद सभी जानकारी को टेक्स्ट में शामिल किया जाना चाहिए. यह जानकारी, दृष्टिबाधित व्यक्ति के लिए ऐक्सेस करने लायक होनी चाहिए और इमेज के कॉन्टेक्स्ट के हिसाब से होनी चाहिए. इसके अलावा, कोई और जानकारी शामिल नहीं की जानी चाहिए. इसे छोटा, सटीक, और काम का रखें.

एम्बेड की गई इमेज के लिए, src और alt एट्रिब्यूट की वैल्यू सबमिट करना ज़रूरी है. हमें कुछ अन्य एट्रिब्यूट के बारे में भी बात करनी है.

रिस्पॉन्सिव (डिवाइस के हिसाब से आकार बदलने वाली) इमेज

व्यूपोर्ट के साइज़ और स्क्रीन रिज़ॉल्यूशन कई तरह के होते हैं. आपको मोबाइल का इस्तेमाल करने वाले व्यक्ति का बैंडविथ बर्बाद नहीं करना है. इसके लिए, आपको उसे ऐसी इमेज नहीं दिखानी है जो बड़े मॉनिटर के लिए काफ़ी चौड़ी हो. हालांकि, आपको ऐसे छोटे डिवाइसों के लिए ज़्यादा रिज़ॉल्यूशन वाली इमेज दिखानी पड़ सकती हैं जिनका स्क्रीन रिज़ॉल्यूशन, सामान्य स्क्रीन रिज़ॉल्यूशन से चार गुना ज़्यादा होता है. व्यू पोर्ट के साइज़ और स्क्रीन रिज़ॉल्यूशन के आधार पर, अलग-अलग इमेज दिखाने के कुछ तरीके हैं.

<img> srcset एट्रिब्यूट

srcset एट्रिब्यूट की मदद से, एक से ज़्यादा इमेज फ़ाइलें सुझाई जा सकती हैं. ब्राउज़र, व्यूपोर्ट के साइज़ और स्क्रीन रिज़ॉल्यूशन जैसी कई मीडिया क्वेरी के आधार पर यह चुनता है कि किस इमेज का अनुरोध करना है.

हर <img> एलिमेंट के लिए, सिर्फ़ एक srcset एट्रिब्यूट हो सकता है. हालांकि, वह srcset एट्रिब्यूट कई इमेज से लिंक हो सकता है. srcset एट्रिब्यूट में, कॉमा लगाकर अलग की गई वैल्यू की सूची सबमिट की जा सकती है. हर वैल्यू में, ऐसेट का यूआरएल, उसके बाद एक स्पेस, और फिर उस इमेज विकल्प के लिए डिस्क्रिप्टर शामिल होते हैं. अगर चौड़ाई के बारे में बताने वाले डेस्क्रिप्टर का इस्तेमाल किया जाता है, तो आपको sizes एट्रिब्यूट को भी शामिल करना होगा. साथ ही, आखिरी srcset विकल्प को छोड़कर, हर srcset विकल्प के लिए मीडिया क्वेरी या सोर्स साइज़ शामिल करना होगा. srcset के साथ रिस्पॉन्सिव इमेज और जानकारी देने वाले सिंटैक्स के बारे में जानने के लिए, 'जानें' सेक्शन में दी गई जानकारी पढ़ें.

अगर srcset इमेज और src इमेज एक जैसी हैं, तो srcset इमेज को प्राथमिकता दी जाएगी.

<picture> और <source>

एक से ज़्यादा संसाधन उपलब्ध कराने और ब्राउज़र को सबसे सही ऐसेट रेंडर करने की अनुमति देने का दूसरा तरीका, <picture> एलिमेंट का इस्तेमाल करना है. <picture> एलिमेंट एक कंटेनर एलिमेंट है. इसमें कई इमेज के विकल्प होते हैं. ये विकल्प, <source> एलिमेंट में मौजूद होते हैं. इनकी संख्या तय नहीं होती. साथ ही, इसमें एक ज़रूरी <img> एलिमेंट भी होता है.

<source> एट्रिब्यूट में srcset, sizes, media, width, और height शामिल हैं. srcset एट्रिब्यूट, img, source, और link के लिए एक जैसा होता है. हालांकि, आम तौर पर इसे सोर्स पर थोड़ा अलग तरीके से लागू किया जाता है, क्योंकि मीडिया क्वेरी को <srcset> के मीडिया एट्रिब्यूट में लिस्ट किया जा सकता है. <source> एट्रिब्यूट में बताए गए इमेज फ़ॉर्मैट भी <source> के साथ काम करते हैं.type

ब्राउज़र, हर <source> चाइल्ड एलिमेंट पर विचार करता है और उनमें से सबसे सही मैच चुनता है. अगर कोई मैच नहीं मिलता है, तो <img> एलिमेंट के src एट्रिब्यूट का यूआरएल चुना जाता है. सुलभ नाम, नेस्ट किए गए <img> के alt एट्रिब्यूट से मिलता है. <picture> एलिमेंट और सिंटैक्स के बारे में जानकारी देने वाले सेक्शन भी पढ़ें.

परफ़ॉर्मेंस से जुड़ी अन्य सुविधाएं

इमेज से जुड़ी कई अन्य सुविधाएँ भी उपलब्ध हैं. इनसे आपकी साइट की परफ़ॉर्मेंस को बेहतर बनाया जा सकता है.

लेज़ी लोडिंग

loading एट्रिब्यूट, JavaScript की सुविधा वाले ब्राउज़र को बताता है कि इमेज को कैसे लोड करना है. डिफ़ॉल्ट eager वैल्यू का मतलब है कि एचटीएमएल पार्स होने के तुरंत बाद इमेज लोड हो जाती है. भले ही, इमेज दिखने वाले व्यूपोर्ट के बाहर हो. loading="lazy" एट्रिब्यूट सेट करने पर, इमेज को तब तक लोड नहीं किया जाता, जब तक वह व्यूपोर्ट में नहीं दिख जाती. ब्राउज़र, इमेज के व्यूपोर्ट से दूरी के आधार पर यह तय करता है कि इमेज "दिख सकती है" या नहीं. उपयोगकर्ता के स्क्रोल करने पर, यह अपडेट होता है. लेज़ी लोडिंग की मदद से, बैंडविड्थ और सीपीयू को बचाया जा सकता है. इससे ज़्यादातर उपयोगकर्ताओं के लिए परफ़ॉर्मेंस बेहतर होती है. अगर JavaScript बंद है, तो सुरक्षा से जुड़ी वजहों से सभी इमेज डिफ़ॉल्ट रूप से eager पर सेट हो जाती हैं.

<img src="switch.svg" alt="light switch" loading="lazy" />

आसपेक्ट रेशियो

ब्राउज़र को एचटीएमएल मिलते ही, वह उसे रेंडर करना शुरू कर देता है. साथ ही, जब उसे ऐसेट मिलती हैं, तो वह उनके लिए अनुरोध करता है. इसका मतलब है कि ब्राउज़र, <img> टैग का सामना करने और अनुरोध करने के दौरान, एचटीएमएल को पहले से ही रेंडर कर रहा है. साथ ही, इमेज लोड होने में कुछ समय लग सकता है. डिफ़ॉल्ट रूप से, ब्राउज़र alt टेक्स्ट को रेंडर करने के लिए ज़रूरी साइज़ के अलावा, दूसरी इमेज के लिए जगह नहीं रखते.

<img> एलिमेंट में, हमेशा से ही यूनिटलेस height और width एट्रिब्यूट इस्तेमाल किए जा सकते हैं. सीएसएस के फ़ायदे को देखते हुए, इन प्रॉपर्टी का इस्तेमाल बंद कर दिया गया. सीएसएस, इमेज के डाइमेंशन तय कर सकती है. अक्सर, यह max-width: 100%; जैसे किसी एक डाइमेंशन को सेट करती है, ताकि आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बना रहे.

सीएसएस को आम तौर पर <head> में शामिल किया जाता है. इसलिए, <img> के दिखने से पहले ही इसे पार्स कर लिया जाता है. हालांकि, height या आसपेक्ट रेशियो की जानकारी दिए बिना, रिज़र्व की गई जगह alt टेक्स्ट की ऊंचाई (या चौड़ाई) के बराबर होती है.

जब डेवलपर सिर्फ़ चौड़ाई तय करते हैं, तब इमेज को रेंडर करने और उन्हें दिखाने से लेआउट में बदलाव होता है. इससे वेब वाइटल पर बुरा असर पड़ता है. इस समस्या को हल करने के लिए, ब्राउज़र इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के साथ काम करते हैं. <img> पर height और width एट्रिब्यूट शामिल करने से, साइज़ के बारे में जानकारी मिलती है. इससे ब्राउज़र को आसपेक्ट रेशियो के बारे में पता चलता है. साथ ही, इमेज रेंडरिंग के लिए सही जगह रिज़र्व की जा सकती है. जब ब्राउज़र को कोई एक डाइमेंशन मिलता है, जैसे कि हमारे 50% वाले उदाहरण में, तो वह सीएसएस डाइमेंशन के हिसाब से इमेज के लिए जगह सेव करता है. साथ ही, दूसरे डाइमेंशन में चौड़ाई-ऊंचाई के अनुपात को बनाए रखता है.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

अगर सीएसएस को सही तरीके से सेट अप किया गया है, तो आपकी इमेज रिस्पॉन्सिव होंगी. हां, सीएसएस की मदद से, बिना यूनिट वाली शामिल की गई height और width वैल्यू को बदला जा सकता है. इन एट्रिब्यूट को शामिल करने का मकसद, सही आसपेक्ट रेशियो में जगह रिज़र्व करना है. इससे लेआउट में बदलाव कम करके, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. पेज को लोड होने में अब भी उतना ही समय लगेगा. हालांकि, इमेज को स्क्रीन पर दिखाने के दौरान यूज़र इंटरफ़ेस (यूआई) में कोई बदलाव नहीं होगा.

इमेज से जुड़ी अन्य सुविधाएं

<img> एलिमेंट, crossorigin, decoding, referrerpolicy, और Blink पर आधारित ब्राउज़र में fetchpriority एट्रिब्यूट के साथ भी काम करता है. इसका इस्तेमाल कभी-कभी ही किया जाता है. अगर इमेज, सर्वर-साइड मैप का हिस्सा है, तो ismap बूलियन एट्रिब्यूट शामिल करें और <img> को ऐसे उपयोगकर्ताओं के लिए लिंक में नेस्ट करें जिनके पास पॉइंटिंग डिवाइस नहीं हैं.

ismap एट्रिब्यूट, <input type="image" name="imageSubmitName"> पर ज़रूरी नहीं है. साथ ही, यह काम भी नहीं करता है. ऐसा इसलिए, क्योंकि फ़ॉर्म सबमिट करते समय, क्लिक की जगह के x और y कोऑर्डिनेट भेजे जाते हैं. अगर कोई इनपुट नाम है, तो उसमें वैल्यू जोड़ दी जाती हैं. उदाहरण के लिए, जब उपयोगकर्ता इमेज पर क्लिक करके उसे सबमिट करता है, तब फ़ॉर्म के साथ &imageSubmitName.x=169&imageSubmitName.y=66 सबमिट किया जाता है. अगर इमेज में name एट्रिब्यूट नहीं है, तो x और y को इस तरह भेजा जाता है: &x=169&y=66.

देखें कि आपको कितना समझ आया

इमेज के बारे में अपनी जानकारी को परखें.