इमेज

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

इमेज शामिल करने का मुख्य तरीका <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" />

ऐसा <source> बच्चों के साथ-साथ <picture> एलिमेंट के साथ भी किया जा सकता है, जो <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 इमेज शामिल की जा सकती हैं. हालांकि, .svg एक्सटेंशन वाली (या data-uri के तौर पर) वाली SVG इमेज को <img> एलिमेंट का इस्तेमाल करके एम्बेड किया जा सकता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इस पत्रिका में पूरी तरह से सजावट की जा रही है. इसमें एक खाली alt एट्रिब्यूट है. साथ ही, इसमें role none भी है, क्योंकि इमेज सिर्फ़ प्रज़ेंटेशन पर आधारित SVG है. अगर सही हो, तो 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 एट्रिब्यूट, कॉमा लगाकर अलग की गई वैल्यू की एक सूची स्वीकार करता है. हर वैल्यू में, ऐसेट का यूआरएल होता है और उसके बाद स्पेस होता है. इसके बाद, उस इमेज के विकल्प के बारे में जानकारी देने वाले बटन होते हैं. अगर विड्थ डिस्क्रिप्टर का इस्तेमाल किया गया है, तो आपको पिछले विकल्प के अलावा हर srcset विकल्प के लिए, मीडिया क्वेरी या सोर्स साइज़ के साथ sizes एट्रिब्यूट भी शामिल करना होगा. 'जानें' सेक्शन में srcset की मदद से रिस्पॉन्सिव इमेज और जानकारी देने वाले सिंटैक्स शामिल हैं.

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

<picture> और <source>

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

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

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

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

लेज़ी लोडिंग

loading एट्रिब्यूट, JS सुविधा वाले ब्राउज़र को इमेज लोड करने का तरीका बताता है. डिफ़ॉल्ट eager वैल्यू का मतलब है कि एचटीएमएल के पार्स होते ही, इमेज तुरंत लोड हो जाती है. भले ही, इमेज, दिखने वाले व्यूपोर्ट के बाहर हो. loading="lazy" को सेट करने पर, इमेज को लोड होना तब तक टाला जाता है, जब तक कि उसके व्यूपोर्ट में आने की संभावना न हो. "संभावित" को ब्राउज़र की ओर से, व्यूपोर्ट से इमेज की दूरी के आधार पर तय किया जाता है. जैसे-जैसे उपयोगकर्ता स्क्रोल करता है, यह जानकारी अपडेट हो जाती है. लेज़ी लोडिंग, बैंडविथ और सीपीयू (CPU) को बचाने में मदद करती है. इस वजह से, ज़्यादातर उपयोगकर्ताओं के लिए परफ़ॉर्मेंस बेहतर होती है. अगर 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 के साथ-साथ ब्लिंक पर आधारित ब्राउज़र fetchpriority एट्रिब्यूट के साथ भी काम करता है. अगर इमेज किसी सर्वर साइड मैप का हिस्सा है, तो शायद ही इसका इस्तेमाल किया जाए. ऐसे में, ismap बूलियन एट्रिब्यूट शामिल करें. साथ ही, डिवाइसों को पॉइंट किए बिना उपयोगकर्ताओं के लिए लिंक में <img> को नेस्ट करें.

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

जांचें कि आपको कितना समझ आया

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