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

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

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

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

अपनी स्टाइल शीट में, 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,
  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 एलिमेंट.

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

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