इमेज

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

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

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

<img> और <picture> में srcset एट्रिब्यूट, दोनों एलिमेंट में एक से ज़्यादा इमेज सोर्स शामिल करने का विकल्प होता है असोसिएट की गई मीडिया क्वेरी, जिसमें हर क्वेरी का फ़ॉलबैक इमेज सोर्स होता है. इससे डिवाइस के हिसाब से सबसे सही इमेज फ़ाइल मिलती है रिज़ॉल्यूशन, ब्राउज़र की क्षमताएं, और व्यूपोर्ट का साइज़. 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 इमेज का इस्तेमाल किया जा सकता है .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 जानकारी लिखना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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