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

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

अच्छी बात यह है कि CSS में आपको ऐसे टूल मिलते हैं जिनकी मदद से, इस तरह के हमलों को रोका जा सकता है.

अपनी इमेज को कंस्ट्रेन करना

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

Browser Support

• 57
• 79
• 41
• 12.1

Source

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 प्रॉपर्टी का इस्तेमाल करें.

Browser Support

• 32
• 79
• 36
• 10

Source

object-fit की वैल्यू contain होने पर, ब्राउज़र को इमेज का आसपेक्ट रेशियो बनाए रखने के लिए कहा जाता है. साथ ही, ज़रूरत पड़ने पर इमेज के चारों ओर खाली जगह छोड़ी जाती है.

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

object-fit की वैल्यू cover होने पर, ब्राउज़र को इमेज का आसपेक्ट रेशियो बनाए रखने के लिए कहा जाता है. इसके लिए, ज़रूरत पड़ने पर इमेज को काटा जाता है.

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

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

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

Browser Support

• 32
• 79
• 36
• 10

Source

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

object-position का इस्तेमाल करके, इमेज के सिर्फ़ एक हिस्से को काटा जा सकता है.

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

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

साइज़ तय करने के लिए सलाह

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

<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" एट्रिब्यूट को अपने-आप लागू करती है, तो आम तौर पर loading को eager की डिफ़ॉल्ट वैल्यू पर सेट किया जा सकता है, ताकि इमेज को लेज़ी लोड न किया जाए:

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

फ़ेच करने की प्राथमिकता

LCP इमेज जैसी अहम इमेज के लिए, 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 के आधार पर रिस्पॉन्सिव इमेज को पहले से लोड करने की सुविधा देते हैं. उदाहरण के लिए:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

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

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

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

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 को सेट करके भी ब्राउज़र को कॉन्टेंट तेज़ी से दिखाया जा सकता है. इसके लिए, इमेज के डिकोड होने का इंतज़ार नहीं करना पड़ता.

हालांकि, आम तौर पर बेहतर विकल्प यह होता है कि decoding का इस्तेमाल करने के बजाय, डीओएम के साइज़ को ज़्यादा होने से रोका जाए और डिकोड करने में लगने वाले समय को कम करने के लिए, रेस्पॉन्सिव इमेज का इस्तेमाल किया जाए.

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

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

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

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

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

इस उदाहरण में, मेटाडेटा में w unit का इस्तेमाल करके, हर इमेज की चौड़ाई के बारे में बताया गया है. एक 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 एट्रिब्यूट की जगह लेने के बजाय, उसे बेहतर बनाता है. आपके पास अब भी मान्य 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 एट्रिब्यूट मौजूद न होने पर, यह जानकारी नहीं मिलती.

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

सलाह: ऐसी इमेज बनाने का तरीका जानें जो सभी के लिए ऐक्सेस की जा सकें.

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

प्रज़ेंटेशन वाली इमेज लोड करने के लिए, सीएसएस में 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 एट्रिब्यूट को _______ नहीं करता, बल्कि उसे _______ करता है.

complement, replaces

srcset, src एट्रिब्यूट की जगह ज़रूर नहीं लेगा.

replace, complements

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

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

सही

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

गलत

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