मीडिया क्वेरी के साथ सीएसएस की बैकग्राउंड इमेज को ऑप्टिमाइज़ करना

Demián Renzulli

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

ज़रूरी शर्तें

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

रिस्पॉन्सिव बैकग्राउंड इमेज को समझना

सबसे पहले, ऑप्टिमाइज़ नहीं किए गए डेमो के नेटवर्क ट्रैफ़िक का विश्लेषण करें:

1. नए Chrome टैब में, ऑप्टिमाइज़ नहीं किया गया डेमो खोलें.
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. नेटवर्क टैब पर क्लिक करें.
4. पेज को फिर से लोड करें.

ध्यान दें: अगर आपको DevTools के बारे में और मदद चाहिए, तो Chrome DevTools की मदद से नेटवर्क गतिविधि की जांच करें देखें.

आपको दिखेगा कि सिर्फ़ background-desktop.jpg की इमेज का अनुरोध किया जा रहा है, जिसका साइज़ 1006 केबी है:

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

style.css में बैकग्राउंड इमेज को कंट्रोल करने वाली स्टाइल देखी जा सकती हैं:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

इस्तेमाल की गई हर प्रॉपर्टी का मतलब यहां दिया गया है:

• background-position: center center: इमेज को वर्टिकल और हॉरिज़ॉन्टल रूप से बीच में करें.
• background-repeat: no-repeat: इमेज सिर्फ़ एक बार दिखाएं.
• background-attachment: fixed: बैकग्राउंड की इमेज को स्क्रोल करने से बचें.
• background-size: cover: पूरे कंटेनर को कवर करने के लिए इमेज का साइज़ बदलें.
• background-image: url(images/background-desktop.jpg): इमेज का यूआरएल.

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

सभी स्क्रीन साइज़ के लिए, एक ही बैकग्राउंड इमेज का इस्तेमाल करने की कुछ सीमाएं हैं:

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

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

मीडिया क्वेरी इस्तेमाल करें

मीडिया क्वेरी का इस्तेमाल करना, स्टाइलशीट के बारे में बताने की एक सामान्य तकनीक है. यह तकनीक सिर्फ़ खास तरह के मीडिया या डिवाइस पर ही लागू होगी. इन्हें @media नियमों का इस्तेमाल करके लागू किया जाता है. इनकी मदद से, ब्रेकपॉइंट का एक सेट तय किया जा सकता है, जिसमें खास स्टाइल तय किए जाते हैं. जब @media नियम की ओर से तय की गई शर्तें पूरी हो जाती हैं (जैसे, स्क्रीन की एक खास चौड़ाई), तो ब्रेकपॉइंट में तय किया गया स्टाइल ग्रुप लागू होगा.

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

• style.css में से उस लाइन को हटाएं जिसमें बैकग्राउंड इमेज का यूआरएल है:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

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

मोबाइल के लिए:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

टैबलेट के लिए:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

डेस्कटॉप डिवाइसों के लिए:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

किए गए बदलावों को देखने के लिए, अपने ब्राउज़र में style.css का ऑप्टिमाइज़ किया गया वर्शन खोलें.

ध्यान दें: ऑप्टिमाइज़ किए गए डेमो में इस्तेमाल की गई इमेज का साइज़ बदल दिया गया है, ताकि उन्हें अलग-अलग स्क्रीन साइज़ में फ़िट किया जा सके. इस गाइड में, इमेज का साइज़ बदलने का तरीका नहीं बताया गया है. हालांकि, अगर आपको इसके बारे में ज़्यादा जानना है, तो रिस्पॉन्सिव इमेज सेव करने की गाइड में कुछ मददगार टूल शामिल किए गए हैं. जैसे, तेज़ npm पैकेज और ImageMagick सीएलआई.

अलग-अलग डिवाइस के हिसाब से मापें

इसके बाद, नतीजे वाली साइट को अलग-अलग स्क्रीन साइज़ और सिम्युलेट किए गए मोबाइल डिवाइसों में विज़ुअलाइज़ करें:

1. नए Chrome टैब में ऑप्टिमाइज़ की गई साइट खोलें.
2. अपने व्यूपोर्ट को छोटा (480px से कम) बनाएं.
3. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
4. नेटवर्क टैब पर क्लिक करें.
5. पेज को फिर से लोड करें. देखें कि background-mobile.jpg इमेज का अनुरोध कैसे किया गया था.
6. अपने व्यूपोर्ट को बड़ा बनाएं. जब यह 480px से ज़्यादा हो जाए, तब देखें कि background-tablet.jpg का अनुरोध कैसे किया जाता है. जब यह 1025px से ज़्यादा हो जाए, तब देखें कि background-desktop.jpg का अनुरोध कैसे किया जाता है.

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

खास तौर पर, जब चौड़ाई मोबाइल ब्रेकपॉइंट (480 पिक्सल) में तय की गई वैल्यू से कम हो, तब आपको यह नेटवर्क लॉग दिखेगा:

मोबाइल के नए बैकग्राउंड का साइज़, डेस्कटॉप वाले बैकग्राउंड के मुकाबले 67% कम है.

सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर असर

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

आपको सबसे पहले यह जानना चाहिए कि आपकी एलसीपी कैंडिडेट की इमेज, रिस्पॉन्स देने के लिए srcset और sizes एट्रिब्यूट वाले <img> एलिमेंट में काम कर सकती है या नहीं. ब्राउज़र को पहले से लोड करने वाला स्कैनर <img> एलिमेंट खोज जाएगा, और रेंडरिंग के दौरान पार्सर के ब्लॉक होने पर उनके लिए अनुरोध भेजेगा.

अगर सीएसएस बैकग्राउंड इमेज का इस्तेमाल नहीं किया जा सकता (या नहीं करना है), तो दूसरा विकल्प यह है कि रिस्पॉन्सिव इमेज को पहले से लोड करें. इससे, सही व्यूपोर्ट साइज़ के लिए सही इमेज पहले से लोड होने में मदद मिलेगी. <link> एलिमेंट media, imagesrcset, और imagesizes एट्रिब्यूट, ब्राउज़र को यह संकेत देते हैं कि दिया गया संसाधन संकेत, सिर्फ़ व्यूपोर्ट की कुछ स्थितियों में लागू होता है. जब आपको सिर्फ़ ऐसे संसाधन को लोड करना होता है जो मौजूदा व्यूपोर्ट के हिसाब से सही हो, तो प्रीलोड को एक से ज़्यादा बार लोड करने से बचा जा सकता है.

खास जानकारी

इस गाइड में, आपने अलग-अलग स्क्रीन साइज़ के हिसाब से तैयार की गई बैकग्राउंड इमेज का अनुरोध करने के लिए, मीडिया क्वेरी लागू करने का तरीका सीखा. साथ ही, मोबाइल फ़ोन जैसे छोटे डिवाइसों पर साइट ऐक्सेस करते समय, बाइट बचाने की जानकारी भी दी गई. आपने रिस्पॉन्सिव बैकग्राउंड को लागू करने के लिए, @media नियम का इस्तेमाल किया है. यह तकनीक सभी ब्राउज़र पर काम करती है. सीएसएस की एक नई सुविधा: image-set() का इस्तेमाल, इसी काम के लिए कोड की कम लाइनों के साथ किया जा सकता है. लिखते समय, यह सुविधा सभी ब्राउज़र पर काम नहीं करती. हालांकि, आपको इस बात पर नज़र रखनी होगी कि इसे इस्तेमाल करने की प्रोसेस कैसे बढ़ रही है. ऐसा इसलिए, क्योंकि यह इस तकनीक का एक दिलचस्प विकल्प हो सकती है.