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

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

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

अलग-अलग डिवाइसों के लिए मेज़रमेंट

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

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