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

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

अच्छी बात यह है कि ऐसा होने से रोकने के लिए सीएसएस में कदम उठाए जा सकते हैं.

अपनी तस्वीरों को सीमित करें

अपनी स्टाइलशीट में, आप यह एलान कर सकते हैं कि max-inline-size का इस्तेमाल करके इमेज को उनके एलिमेंट से ज़्यादा बड़े साइज़ में रेंडर नहीं किया जाना चाहिए.

ब्राउज़र सहायता

• 57
• 79
• 41
• 12.1

सोर्स

img {
  max-inline-size: 100%;
  block-size: auto;
}

ध्यान दें: अगर आप चाहें, तो max-inline-size की जगह max-width का इस्तेमाल किया जा सकता है. हालांकि, याद रखें कि लॉजिकल प्रॉपर्टी के बारे में सोचने की आदत डालना बेहतर होता है.

यही नियम एम्बेड किए गए दूसरे तरह के कॉन्टेंट पर भी लागू किया जा सकता है, जैसे कि वीडियो और iframe.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

यह नियम लागू होने के बाद, ब्राउज़र इमेज को स्क्रीन पर फ़िट करने के लिए, इमेज का साइज़ अपने-आप कम कर देंगे.

auto वैल्यू के तौर पर block-size जोड़ने का मतलब है कि इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) स्थिर रहेगा.

कभी-कभी ऐसा हो सकता है कि इमेज के डाइमेंशन पर आपका कंट्रोल न हो. उदाहरण के लिए, ऐसा तब हो सकता है, जब इमेज को कॉन्टेंट मैनेजमेंट सिस्टम की मदद से जोड़ा गया हो. अगर आपके डिज़ाइन के मुताबिक इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) उसके असल डाइमेंशन से अलग है, तो सीएसएस में aspect-ratio प्रॉपर्टी का इस्तेमाल करें.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

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

ऐसा होने से रोकने के लिए, object-fit प्रॉपर्टी का इस्तेमाल करें.

ब्राउज़र सहायता

• 32
• 79
• 36
• 10

सोर्स

contain की object-fit वैल्यू की मदद से, ब्राउज़र को इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखने के लिए कहा जाता है. भले ही, इसका मतलब ऊपर और नीचे खाली जगह छोड़ना हो.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

cover की object-fit वैल्यू की मदद से, ब्राउज़र को इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखने का निर्देश मिलता है. भले ही, इमेज को सबसे ऊपर और नीचे के हिस्से में ही क्यों न काटा जाए.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

`object-fit` के लिए दो अलग-अलग वैल्यू वाली एक ही इमेज को लागू किया गया. पहली वैल्यू में `contain` की `object-fit` वैल्यू है. दूसरे में `cover` की `object-fit` वैल्यू है.

अगर इमेज को ऊपर और नीचे के हिस्से में समान तरीके से काटने से समस्या हो रही है, तो फ़ोटो का फ़ोकस अडजस्ट करने के लिए, object-position वाली सीएसएस प्रॉपर्टी का इस्तेमाल करें.

ब्राउज़र सहायता

• 32
• 79
• 36
• 10

सोर्स

आपके पास यह पक्का करने का विकल्प होता है कि इमेज का सबसे अहम कॉन्टेंट अब भी दिख रहा हो.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

इमेज डिलीवर करना

सीएसएस के इन नियमों से ब्राउज़र को पता चलता है कि आपको इमेज किस तरह रेंडर करनी हैं. ब्राउज़र को उन इमेज को कैसे हैंडल करना चाहिए, इस बारे में अपने एचटीएमएल में संकेत भी दिए जा सकते हैं.

साइज़ के सुझाव

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

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

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

संकेत लोड हो रहे हैं

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

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

वेबसाइट में फ़ोल्ड के ऊपर हीरो इमेज के लिए, loading का इस्तेमाल नहीं किया जाना चाहिए. अगर आपकी साइट अपने-आप loading="lazy" एट्रिब्यूट लागू करती है, तो इसे लागू होने से रोकने के लिए, आम तौर पर eager एट्रिब्यूट को सेट किया जा सकता है. यह डिफ़ॉल्ट तौर पर उपलब्ध होता है:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

प्राथमिकता पाएं

एलसीपी इमेज जैसी ज़रूरी इमेज के लिए, fetchpriority एट्रिब्यूट को high पर सेट करके, फ़ेच प्राथमिकता का इस्तेमाल करके, लोड करने को और प्राथमिकता दी जा सकती है:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

इससे ब्राउज़र को इमेज को सामान्य तौर पर फ़ेच किए जाने के बाद, लेआउट पूरा होने का इंतज़ार करने के बजाय, इमेज को तुरंत फ़ेच करने का निर्देश मिलेगा. यह ज़्यादा प्राथमिकता पर, इमेज को फ़ेच करने के लिए कहेगा.

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

पहले से लोड करने से जुड़े संकेत

कुछ इमेज शायद शुरुआती एचटीएमएल में उपलब्ध न हों—अगर उन्हें JavaScript से जोड़ा गया हो या सीएसएस में बैकग्राउंड इमेज के रूप में जोड़ा गया हो. इन अहम इमेज को समय से पहले फ़ेच करने के लिए, प्रीलोड का भी इस्तेमाल किया जा सकता है. इसे वाकई ज़रूरी इमेज के लिए fetchpriority एट्रिब्यूट के साथ जोड़ा जा सकता है:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

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

imagesrcset और imagesizes एट्रिब्यूट के ज़रिए, srcset (जिसके बारे में नीचे बताया गया है) के आधार पर रिस्पॉन्सिव इमेज को पहले से लोड करने की सुविधा ज़्यादा बेहतर है और यह कुछ ब्राउज़र में काम करती है, लेकिन सभी में नहीं:

href फ़ॉलबैक को बाहर रखकर, यह पक्का किया जा सकता है कि जिन ब्राउज़र पर यह काम नहीं करता वे गलत इमेज पहले से लोड न करें.

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

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

इमेज डिकोड करना

decoding एट्रिब्यूट को भी img एलिमेंट में जोड़ा जा सकता है. ब्राउज़र को बताया जा सकता है कि इमेज को एसिंक्रोनस तरीके से डिकोड किया जा सकता है. इसके बाद, ब्राउज़र अन्य कॉन्टेंट को प्रोसेस करने को प्राथमिकता दे सकता है.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

अगर कॉन्टेंट की प्राथमिकता के लिए सबसे ज़रूरी इमेज है, तो sync वैल्यू का इस्तेमाल किया जा सकता है.

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

decoding एट्रिब्यूट से इस बात पर कोई असर नहीं पड़ेगा कि इमेज कितनी तेज़ी से डीकोड की जाती है. हालांकि, इससे सिर्फ़ यह तय होगा कि ब्राउज़र, अन्य कॉन्टेंट को रेंडर करने से पहले इमेज के डीकोड होने का इंतज़ार करे या नहीं.

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

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

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

max-inline-size: 100% के इस एलान की वजह से, आपकी इमेज कभी भी अपने कंटेनर से अलग नहीं होंगी. हालांकि, कोई ऐसी बड़ी इमेज होने पर भी अच्छा नहीं लगेगा जो फ़िट होने के लिए सिकुड़ सकती है. अगर कोई व्यक्ति कम बैंडविड्थ वाले नेटवर्क पर छोटी स्क्रीन वाले डिवाइस का इस्तेमाल करता है, तो वह बेवजह बड़े साइज़ की इमेज डाउनलोड कर लेगा.

अगर एक ही इमेज के अलग-अलग साइज़ में कई वर्शन बनाए जाते हैं, तो ब्राउज़र को srcset एट्रिब्यूट का इस्तेमाल करके उनके बारे में बताया जा सकता है.

चौड़ाई का डिस्क्रिप्टर

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

इस उदाहरण में, मेटाडेटा w यूनिट का इस्तेमाल करके, हर इमेज की चौड़ाई के बारे में बताता है. एक w का मतलब है एक पिक्सल.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

srcset एट्रिब्यूट, src एट्रिब्यूट को नहीं बदलता. इसके बजाय, srcset एट्रिब्यूट, src एट्रिब्यूट की मदद से पूरे करता है. आपके पास एक मान्य src एट्रिब्यूट होना चाहिए. हालांकि, अब ब्राउज़र इसकी वैल्यू को srcset एट्रिब्यूट में दिए गए किसी विकल्प से बदल सकता है.

ब्राउज़र तब तक बड़ी इमेज डाउनलोड नहीं करेगा, जब तक कि उनकी ज़रूरत न हो. इससे बैंडविड्थ बचती है.

साइज़

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

sizes एट्रिब्यूट, मीडिया क्वेरी और इमेज की चौड़ाई की कॉमा-सेपरेटेड लिस्ट देता है.

ध्यान दें: किसी एचटीएमएल एलिमेंट में सीएसएस मीडिया क्वेरी का शामिल होना अजीब लगता है. इससे प्रज़ेंटेशन और स्ट्रक्चर को अलग-अलग करने में परेशानी होती है. हालांकि, असरदार होने के लिए साइज़ से जुड़ी ज़रूरी जानकारी समय पर देने का यही एक तरीका है.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

इस उदाहरण में, आप ब्राउज़र को बता रहे हैं कि इमेज को स्क्रीन के एक तिहाई से ज़्यादा हिस्से में दिखाने के लिए, व्यूपोर्ट की चौड़ाई 66em से ऊपर है (उदाहरण के लिए, तीन कॉलम वाले लेआउट के अंदर).

व्यूपोर्ट की चौड़ाई 44em और 66em के बीच के लिए, इमेज को स्क्रीन की आधी चौड़ाई (दो कॉलम वाला लेआउट) में दिखाएं.

44em के नीचे दी गई किसी भी चीज़ के लिए, इमेज को स्क्रीन की पूरी चौड़ाई पर दिखाएं.

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

पिक्सल की सघनता के बारे में बताने वाला

यहां भी एक ही इमेज के कई वर्शन देने पड़ सकते हैं.

कुछ डिवाइसों में, हाई डेंसिटी वाले डिसप्ले होते हैं. डबल-डेंसिटी वाले डिसप्ले पर, एक पिक्सल के अंदर दो पिक्सल की जानकारी डाली जा सकती है. इससे उस तरह के डिसप्ले पर इमेज बेहतर दिखती रहती हैं.

सघनता डिस्क्रिप्टर का इस्तेमाल करके, src एट्रिब्यूट में दी गई इमेज के साथ इमेज की पिक्सल सघनता के बारे में बताएं. सघनता डिस्क्रिप्टर एक संख्या होती है, जिसके बाद अक्षर x: 1x, 2x वगैरह होते हैं.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

अगर small-image.png का साइज़ 300 x 200 पिक्सल और medium-image.png का साइज़ 600 x 400 पिक्सल है, तो srcset सूची में medium-image.png के बाद, 2x हो सकता है.

आपको पूर्ण संख्याओं का उपयोग नहीं करना है. अगर इमेज के दूसरे वर्शन का साइज़ 450 x 300 पिक्सल है, तो 1.5x की मदद से उसके बारे में जानकारी दी जा सकती है.

ध्यान दें: आप चाहें, तो या चौड़ाई बताने वाले डिस्क्रिप्टर या डेंसिटी डिस्क्रिप्टर का इस्तेमाल करें, लेकिन दोनों का एक साथ इस्तेमाल नहीं किया जा सकता.

प्रज़ेंटेशन के लिए इमेज

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

अगर किसी ऐसी इमेज को एम्बेड किया जाता है जो पूरी तरह से आकर्षक है और जिसमें कोई काम का कॉन्टेंट नहीं है, तो खाली alt एट्रिब्यूट का इस्तेमाल करें.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

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

आम तौर पर, प्रज़ेंटेशन या सजावटी इमेज आपके एचटीएमएल में नहीं होनी चाहिए. एचटीएमएल, स्ट्रक्चर के लिए होता है. सीएसएस, प्रज़ेंटेशन के लिए है.

बैकग्राउंड की इमेज

प्रज़ेंटेशन वाली इमेज लोड करने के लिए, सीएसएस में background-image प्रॉपर्टी का इस्तेमाल करें.

element {
  background-image: url(flourish.png);
}

background-image के लिए image-set फ़ंक्शन का इस्तेमाल करके, एक से ज़्यादा इमेज के बारे में बताया जा सकता है.

सीएसएस में image-set फ़ंक्शन काफ़ी हद तक एचटीएमएल में srcset एट्रिब्यूट की तरह काम करता है. हर इमेज के लिए, पिक्सल सघनता डिस्क्रिप्टर का इस्तेमाल करके इमेज की सूची दें.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

ब्राउज़र, डिवाइस के पिक्सल की सघनता के हिसाब से सबसे सही इमेज चुनेगा.

अपनी साइट पर इमेज जोड़ते समय कई बातों का ध्यान रखना चाहिए:

हर इमेज के लिए सही जगह रिज़र्व करना. यह पता लगाया जा रहा है कि आपको कितने साइज़ की ज़रूरत है. यह तय करना कि इमेज कॉन्टेंट है या सजावटी है.

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

आपकी टूलकिट में एक और एचटीएमएल एलिमेंट है, जिससे इमेज पर ज़्यादा कंट्रोल रखा जा सकता है: picture एलिमेंट.

आपने जो सीखा है उसकी जांच करें

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

इमेज के लिए स्टाइल जोड़ना ज़रूरी है, ताकि वे व्यूपोर्ट में फ़िट हो सकें.

सही

जिन इमेज में कोई हिस्सा शामिल नहीं होता है उनका साइज़, अपने असली साइज़ जितना ही होगा.

गलत

स्टाइल ज़रूरी हैं.

जब किसी इमेज की ऊंचाई और चौड़ाई को किसी अस्वाभाविक आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में ज़बरदस्ती लागू किया जाता है, तो इन अनुपातों में इमेज के फ़िट होने के लिए, कौनसी स्टाइल मदद कर सकती है?

object-fit

बताएं कि contain और cover जैसे कीवर्ड के साथ इमेज कैसे फ़िट होती है.

image-fit

यह प्रॉपर्टी मौजूद नहीं है, मैंने इसे बनाया है.

fit-image

यह प्रॉपर्टी मौजूद नहीं है, मैंने इसे बनाया है.

aspect-ratio

इसकी वजह से, इमेज का असामान्य अनुपात हो सकता है या यह समस्या हल हो सकती है.

अपनी इमेज में height और width लगाने से, सीएसएस को इसे अलग स्टाइल में नहीं किया जा सकता.

सही

इन्हें नियमों से ज़्यादा संकेतों की तरह देखें.

गलत

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

srcset एट्रिब्यूट, src एट्रिब्यूट का _______ नहीं देता है. यह _______ नहीं है.

कॉम्प्लिमेंट, रीप्लेसमेंट

srcset, src एट्रिब्यूट को बिलकुल नहीं बदलता.

बदलें, कॉम्प्लिमेंट

अगर वह ब्राउज़र में हो, तो उसे चुनने के लिए अतिरिक्त विकल्प मिलते हैं.

इमेज में alt मौजूद न होना, खाली alt के जैसा ही है.

सही

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

गलत

alt मौजूद न होने से, स्क्रीन रीडर को कोई सिग्नल नहीं मिलता.