वेब की परफ़ॉर्मेंस के लिए सबसे सही सलाह

इमेज का सही साइज़ अपने-आप चुनने के लिए, srcset का इस्तेमाल करें.

Sam Dutton

एचटीटीपी संग्रह के मुताबिक, एक आम मोबाइल वेब पेज का वज़न 2.6 एमबी से ज़्यादा होता है और उस वज़न का दो तिहाई से ज़्यादा हिस्सा इमेज होता है. यह ऑप्टिमाइज़ेशन का बेहतरीन मौका है!

कॉन्टेंट टाइप के हिसाब से मोबाइल पेज की औसत बाइट

खास जानकारी

• ऐसी इमेज सेव न करें जिनका साइज़ उनके डिसप्ले साइज़ से बड़ा हो.
• हर इमेज के लिए अलग-अलग साइज़ सेव करें. साथ ही, srcset एट्रिब्यूट का इस्तेमाल करके, ब्राउज़र को सबसे छोटी इमेज को चुनने के लिए कहें. w वैल्यू से ब्राउज़र को हर वर्शन की चौड़ाई के बारे में पता चलता है:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

सही साइज़ वाली इमेज सेव करें

आप डिसप्ले साइज़ से मेल खाने वाले डाइमेंशन वाली इमेज का इस्तेमाल करके, अपनी वेबसाइट को तेज़ और कम डेटा बचाने वाला बना सकते हैं. दूसरे शब्दों में, इमेज को सेव करते समय सही चौड़ाई और ऊंचाई दें.

नीचे दी गई इमेज देखें.

वे करीब-करीब एक जैसी दिखती हैं, लेकिन एक फ़ाइल का साइज़, दूसरे फ़ाइल के साइज़ से 10 गुना ज़्यादा बड़ा होता है.

सेव की गई चौड़ाई 1000 पिक्सल, फ़ाइल का साइज़ 184 केबी

सेव की गई चौड़ाई 300 पिक्सल, फ़ाइल का साइज़ 16 केबी है

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

तय चौड़ाई के लिए, उन इमेज का इस्तेमाल करें जो डिसप्ले साइज़ वाले डाइमेंशन में सेव हों.

लेकिन... अगर डिसप्ले साइज़ अलग-अलग हो, तो क्या होगा?

अलग-अलग डिवाइसों के इस्तेमाल की वजह से, हर इमेज एक तय साइज़ में नहीं दिखती.

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

...और Retina जैसे पिक्सल की सुविधा वाले डिवाइसों का क्या डिस्प्ले होता है?

इमेज का सही साइज़ चुनने में ब्राउज़र की मदद करें

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

यहां srcset का इस्तेमाल किया जा सकता है. इमेज को अलग-अलग साइज़ में सेव किया जाता है, फिर ब्राउज़र को हर वर्शन की चौड़ाई बताई जाती है:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

w की वैल्यू, हर इमेज की चौड़ाई को पिक्सल में दिखाती है. उदाहरण के लिए, small.jpg 500w, ब्राउज़र को बताता है कि small.jpg की चौड़ाई 500 पिक्सल है. इससे ब्राउज़र, स्क्रीन के टाइप और व्यूपोर्ट के साइज़ के हिसाब से सबसे छोटी इमेज चुन पाता है. इसके लिए, इमेज का साइज़ देखने के लिए उसे डाउनलोड करने की ज़रूरत नहीं पड़ती.

चेतावनी: srcset, ब्राउज़र को हर इमेज फ़ाइल की सेव की गई चौड़ाई की जानकारी देता है. इससे इमेज दिखाने के लिए साइज़ के बारे में नहीं पता चलता है. इसके लिए आपको अब भी सीएसएस की ज़रूरत है!

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

एक से ज़्यादा साइज़ की इमेज कैसे बनाई जा सकती हैं?

आपको srcset के साथ जिस इमेज का इस्तेमाल करना है उसके लिए अलग-अलग साइज़ उपलब्ध कराने होंगे.

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

बिल्ड प्रोसेस में इमेज प्रोसेसिंग को शामिल करें

बिल्ड प्रोसेस के तौर पर, इमेज के अलग-अलग साइज़ के वर्शन बनाने के तरीके जोड़े जा सकते हैं. ज़्यादा जानने के लिए, "इमेज को कंप्रेस करने के लिए Imagemin का इस्तेमाल करें" देखें.

इमेज दिखाने वाली किसी सेवा का इस्तेमाल करें

इमेज बनाने और उसकी डिलीवरी के लिए, Cloudinary जैसी व्यावसायिक सेवा या thumbsor जैसी किसी ओपन सोर्स सेवा की मदद से अपने-आप काम किया जा सकता है. इस सेवा को खुद इंस्टॉल और चलाया जाता है.

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

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

ध्यान दें: ब्राउज़र टूल का इस्तेमाल करके, डिलीवर किए गए फ़ॉर्मैट की जांच की जा सकती है. ऊपर दिए गए इमेज यूआरएल के लिए, WebP फ़ाइल उन ब्राउज़र पर अपने-आप डिलीवर हो जाती है जो WebP पर काम करते हैं. इसके लिए, .jpg फ़ाइल एक्सटेंशन को नहीं बदलना पड़ता.

अगर इमेज अलग-अलग साइज़ में सही नहीं दिखती, तो क्या करें?

इस मामले में, आपको "आर्ट डायरेक्शन" के लिए <picture> एलिमेंट का इस्तेमाल करना होगा: अलग-अलग साइज़ में कोई दूसरी इमेज या इमेज काटने के लिए. ज़्यादा जानने के लिए, "आर्ट डायरेक्शन" कोडलैब पर एक नज़र डालें.

पिक्सल की सघनता कैसी है?

बेहतर डिवाइसों में छोटे (ज़्यादा सघन) फ़िज़िकल पिक्सल होते हैं. उदाहरण के लिए, किसी हाई-एंड फ़ोन में पिक्सल की हर पंक्ति में दो या तीन गुना सस्ते हो सकते हैं.

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

इमेज के डिसप्ले साइज़ का क्या होगा?

sizes का इस्तेमाल करके, srcset से बेहतर नतीजे पाए जा सकते हैं.

इसके बिना, ब्राउज़र, srcset से कोई इमेज चुनते समय, व्यूपोर्ट की पूरी चौड़ाई का इस्तेमाल करता है. sizes एट्रिब्यूट, ब्राउज़र को इमेज एलिमेंट के दिखने की चौड़ाई के बारे में बताता है. इससे, लेआउट कैलकुलेशन करने से पहले, ब्राउज़र सबसे छोटी इमेज फ़ाइल चुन सकता है.

नीचे दिए गए उदाहरण में, sizes="50vw" ब्राउज़र को बताता है कि यह इमेज व्यूपोर्ट की चौड़ाई के 50% हिस्से पर दिखाई जाएगी.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

इस उदाहरण को SIMpl.info/sizes और "एक से ज़्यादा स्लॉट की चौड़ाई तय करना" कोडलैब पर जाकर देखा जा सकता है.

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

ब्राउज़र समर्थन के बारे में क्या?

srcset और sizes दुनिया भर के 90% से ज़्यादा ब्राउज़र पर काम करते हैं.

अगर कोई ब्राउज़र srcset या sizes पर काम नहीं करता है, तो सिर्फ़ src एट्रिब्यूट का इस्तेमाल किया जाएगा.

इससे srcset और sizes को बेहतर तरीके से बेहतर बनाया जाता है!

ज़्यादा जानें

इमेज ऑप्टिमाइज़ेशन के बारे में ज़्यादा जानने के लिए, web.dev के "इमेज ऑप्टिमाइज़ करें" सेक्शन पर जाएं. बेहतर अनुभव पाने के लिए, Udacity की ओर से ऑफ़र किए गए "रिस्पॉन्सिव इमेज" कोर्स को मुफ़्त में आज़माएं.

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