वेब परफ़ॉर्मेंस को बेहतर बनाने के लिए अहम सुझाव

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

Sam Dutton

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

खास जानकारी

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

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

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

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

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

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

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

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

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

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

इमेज सेवा का इस्तेमाल करना

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

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

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

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

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

पिक्सल डेंसिटी के बारे में क्या जानकारी है?

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

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

इमेज के डिसप्ले साइज़ के बारे में क्या जानकारी है?

srcset को और भी बेहतर तरीके से काम करने के लिए, sizes का इस्तेमाल किया जा सकता है.

इसके बिना, ब्राउज़र 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 और "Specifying multiple slot widths" कोडलैब.

क्या यह सुविधा सभी ब्राउज़र पर काम करती है?

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

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

इस वजह से, srcset और sizes बेहतरीन प्रोग्रेसिव एन्हांसमेंट हैं!

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

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