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

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

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

इमेज को सीमित करें

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

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

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

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

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

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

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

साइज़ बदलने के लिए सलाह

अगर आपको इमेज के डाइमेंशन के बारे में पता है, तो हमेशा 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"
>

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

एलसीपी जैसी ज़रूरी इमेज के लिए, फ़ेच प्राथमिकता का इस्तेमाल करके, लोड होने की प्रोसेस को प्राथमिकता दी जा सकती है. इसके लिए, 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">

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

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

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

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

srcset वाली रिस्पॉन्सिव इमेज

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

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

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

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

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

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