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

Demián Renzulli

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

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

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

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

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

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

आपको दिखेगा कि सिर्फ़ 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 का ऑप्टिमाइज़ किया गया वर्शन खोलें.

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

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

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