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

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

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

अपनी इमेज को सीमित करना

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

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

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

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

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

block-size की वैल्यू auto जोड़ने का मतलब है कि ब्राउज़र, इमेज का साइज़ बदलते समय उनके पहलू अनुपात को बनाए रखता है.

कभी-कभी, इमेज के डाइमेंशन को कॉन्टेंट मैनेजमेंट सिस्टम (सीएमएस) या कॉन्टेंट डिलीवरी सिस्टम सेट करता है. अगर आपके डिज़ाइन के लिए, सीएमएस के डिफ़ॉल्ट पहलू अनुपात से अलग पहलू अनुपात की ज़रूरत है, तो अपनी साइट के डिज़ाइन को बनाए रखने के लिए, aspect-ratio प्रॉपर्टी का इस्तेमाल करें:

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

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

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

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-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"
>

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

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 के साथ काम न करने वाले ब्राउज़र अब भी सही इमेज को प्रीलोड करें.

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

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,