इमेज का सही साइज़ अपने-आप चुनने के लिए, srcset का इस्तेमाल करें.
एचटीटीपी संग्रह के मुताबिक, आम तौर पर, मोबाइल वेब पेज का वज़न 2.6 एमबी से ज़्यादा होता है और इसका दो तिहाई से भी ज़्यादा हिस्सा होता है वज़न यानी इमेज. यह ऑप्टिमाइज़ेशन के लिए बहुत अच्छा मौका है!
खास जानकारी
- ऐसी इमेज सेव न करें जो उनके डिसप्ले साइज़ से बड़ी हों.
- हर इमेज के लिए अलग-अलग साइज़ सेव करें और
srcsetविशेषता का इस्तेमाल करें, ताकि ब्राउज़र सबसे छोटा विकल्प चुन सके.wवैल्यू, ब्राउज़र को हर वर्शन की चौड़ाई के बारे में बताती है:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
सही साइज़ वाली इमेज सेव करना
आप इमेज का इस्तेमाल करके, अपनी वेबसाइट को तेज़ और कम डेटा खर्च कर सकते हैं जो डिसप्ले साइज़ से मेल खाते हैं. दूसरे शब्दों में, इमेज को सही तरीके से चौड़ाई और ऊंचाई की जानकारी सेव की जा सकती है.
नीचे दी गई इमेज पर एक नज़र डालें.
वे करीब-करीब एक जैसे दिखते हैं, लेकिन किसी एक फ़ाइल का साइज़ 10 गुना से ज़्यादा होता है अन्य की तुलना में बड़ा होना चाहिए.
पहली इमेज का साइज़ फ़ाइल से काफ़ी बड़ा है, क्योंकि इसे डाइमेंशन के साथ सेव किया गया है डिसप्ले साइज़ से कहीं ज़्यादा बड़ा हो. दोनों इमेज तय रकम के साथ दिखाई गई हैं चौड़ाई 300 पिक्सल है, इसलिए उसी समय सेव की गई इमेज का इस्तेमाल करना सही रहेगा साइज़.
तय चौड़ाई के लिए, इमेज के तौर पर सेव किए गए इमेज के डाइमेंशन डिसप्ले साइज़.
लेकिन... अगर डिसप्ले साइज़ अलग-अलग हो, तो क्या होगा?
कई डिवाइस इस्तेमाल होने वाली दुनिया में, इमेज हमेशा एक तय साइज़ में नहीं दिखतीं.
इमेज एलिमेंट की चौड़ाई प्रतिशत में हो सकती है या वे रिस्पॉन्सिव लेआउट का हिस्सा हो सकते हैं जिसमें इमेज के डिसप्ले का साइज़, स्क्रीन के साइज़ में फ़िट होने के लिए बदला जाता है.
...और रेटिना डिस्प्ले जैसे पिक्सेल-हंगेरी डिवाइस के बारे में क्या ख्याल है?
इमेज का सही साइज़ चुनने में ब्राउज़र की मदद करें
क्या यह बढ़िया नहीं होगा कि आप हर एक इमेज को अलग-अलग साइज़ में उपलब्ध करा पाएं, ब्राउज़र को डिवाइस के लिए सबसे सही साइज़ और डिसप्ले साइज़ चुनने की अनुमति दें? माफ़ करें, 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 या इससे मिलता-जुलता ओपन सोर्स, जैसे कि थंबर जिसे इंस्टॉल करके इस्तेमाल किया जा सकता है.
हाई रिज़ॉल्यूशन वाली इमेज अपलोड करें और इमेज सेवा अपने-आप अपलोड हो जाए
यूआरएल के हिसाब से, अलग-अलग इमेज फ़ॉर्मैट और साइज़ बनाता और डिलीवर करता है
पैरामीटर का इस्तेमाल करें. उदाहरण के लिए, Cloudinary पर यह सैंपल इमेज खोलें और यूआरएल बार में w वैल्यू या फ़ाइल एक्सटेंशन बदलकर देखें.
इमेज सेवाओं में ज़्यादा बेहतर सुविधाएं भी होती हैं. जैसे, इमेज को ऑटोमेट करने की सुविधा "स्मार्ट क्रॉपिंग" अलग-अलग साइज़ की इमेज के लिए और अपने-आप WebP इमेज डिलीवर करने के लिए को फ़ॉर्मैट करने की सुविधा देने वाले ब्राउज़र पर स्विच करें. एक्सटेंशन चुनें.
अगर इमेज अलग-अलग साइज़ में सही नहीं दिखती है, तो क्या करें?
इस मामले में, आपको "आर्ट डायरेक्शन" के लिए <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 और "एक से ज़्यादा स्लॉट की चौड़ाई तय करना" कोडलैब का इस्तेमाल करना होगा.
क्या यह ब्राउज़र पर काम करता है?
srcset और sizes 90% से ज़्यादा पर काम करते हैं
ब्राउज़र पर लागू होता है.
अगर किसी ब्राउज़र पर srcset या sizes काम नहीं करता है, तो वह वापस src एट्रिब्यूट का इस्तेमाल करेगा.
यह srcset और sizes को शानदार बनाता है!
ज़्यादा जानें
"अपनी इमेज ऑप्टिमाइज़ करें" सेक्शन पर नज़र डालें के बारे में ज़्यादा जानें. ज़्यादा जानकारी के लिए जिसमें "रिस्पॉन्सिव (स्क्रीन के हिसाब से आकार बदलने वाले) विज्ञापन" Images" कोर्स उपलब्ध कराता है Udacity.