एक शुरुआती मार्गदर्शिका: srcset के साथ प्रतिक्रियाशील छवियाँ

क्योंकिएक सामान्य पृष्ठ का लगभग 50% भार छवियों से बना होता है , एक प्रदर्शनशील साइट को चलाने के लिए छवियों को अनुकूलित करना बेहद महत्वपूर्ण है। प्रत्येक बाइट जिसे आपको अपनी सामग्री परोसने के लिए स्थानांतरित नहीं करना पड़ता है, का अर्थ है आपके उपयोगकर्ताओं के लिए एक छोटा पृष्ठ और तेज़ लोड समय।

यह ट्यूटोरियल srcset विशेषता का उपयोग करने के अंदर और बाहर को कवर करता है, और कैसे imgix प्रक्रिया को आसान बनाता है।

सही आकार की छवियां प्रस्तुत करना महत्वपूर्ण है क्योंकि यह स्थानांतरित बाइट्स और सीपीयू ओवरहेड को कम कर सकता है। srcset विशेषता आज ऐसा करने के सर्वोत्तम तरीकों में से एक है।

स्रोतसेट और प्रदर्शन घनत्व

srcset विभिन्न डिवाइस रिज़ॉल्यूशन के लिए अलग-अलग छवियों को निर्दिष्ट करने का एक सरल तरीका प्रदान करता है। यह साइटों को उच्च-रिज़ॉल्यूशन डिस्प्ले वाले आधुनिक उपकरणों पर छवियों के 2x, 3x या उच्चतर संस्करण पेश करने की अनुमति देता है। img टैग के भीतर इसका उपयोग करना आसान है:

 <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >

हालाँकि यह उपयोगकर्ताओं को सर्वोत्तम संपत्तियाँ प्रदान करता है, यह प्रत्येक संपत्ति के प्रत्येक संस्करण को उत्पन्न करने और संग्रहीत करने का बोझ सेवा पर डालता है। इससे भंडारण लागत बढ़ सकती है, और आप अपने द्वारा उत्पन्न प्रत्येक संपत्ति की सेवा कभी नहीं कर पाएंगे।

किसी बड़े पुस्तकालय या उपयोगकर्ता-जनित सामग्री के साथ व्यवहार करते समय, यह अस्वीकार्य है।

Imgix के साथ, आपकी संपूर्ण छवि लाइब्रेरी तुरंत srcset -रेडी हो जाती है।

Imgix के साथ srcset का उपयोग करना

Imgix w और dpr URL पैरामीटर का उपयोग करके, हम अपनी छवियों पर srcset विशेषताओं को उत्पन्न करने के लिए किए जाने वाले प्रयास की मात्रा को सरल बना सकते हैं। इस उदाहरण के लिए, हम यहां स्थित छवि का उपयोग करेंगे:

https://assets.imgix.net/examples/bluehat.jpg

हम इस छवि को 400 पिक्सेल चौड़ाई पर प्रस्तुत करना चाहते हैं:

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

हमें एक छवि टैग मिलता है जो प्रत्येक डिवाइस के लिए उसके डिवाइस-पिक्सेल अनुपात (डीपीआर) के आधार पर सर्वोत्तम रिज़ॉल्यूशन प्रदान करता है। dpr पैरामीटर दिए जाने पर imgix स्वचालित रूप से अधिक पिक्सेल प्रदान करेगा।

डिवाइस-पिक्सेल अनुपात की गणना

आप देख सकते हैं कि हमने अपनी 1x, dpr=2 और 3x संपत्तियों पर क्रमशः dpr=1 , dpr=3 , और dpr=3 लागू किया है। dpr पैरामीटर imgix को w पैरामीटर को डिवाइस-स्वतंत्र पिक्सल (जिसे "सीएसएस पिक्सल" के रूप में भी जाना जाता है) के रूप में मानने का निर्देश देता है।

इस प्रकार, dpr=2 पर 400×300 छवि वास्तव में 800×600 पिक्सेल छवि होगी। dpr=3 छवि 1200×900 पिक्सेल होगी।

यह आपको दोनों दुनियाओं का सर्वश्रेष्ठ प्रदान करता है: उन उपकरणों के लिए पूर्ण रिज़ॉल्यूशन जो इसका समर्थन करते हैं, उन उपकरणों के लिए आवश्यकता से अधिक डेटा वितरित किए बिना जो इसका उपयोग नहीं करेंगे। Imgix का उपयोग करके, हमें केवल मूल संपत्ति को संग्रहीत करना होगा, और फिर तुरंत उसमें हेरफेर करना होगा, जैसा कि हमने ऊपर देखा है।

इससे 4x डिवाइस निकलने पर होने वाला सिरदर्द भी दूर हो जाता है। imgix वर्तमान में dpr=5 तक का समर्थन करता है।

यह अभ्यास निश्चित छवि लेआउट के साथ सबसे अच्छा काम करता है। dpr के साथ srcset उपयोग वर्तमान में व्यापक रूप से समर्थित है।

मीडिया क्वेरीज़ के साथ srcset और sizes उपयोग करना

फ़्लुइड लेआउट के लिए प्रतिक्रियाशील छवियों को संभालने का एक अलग तरीका srcset के साथ आकार परिभाषाओं का उपयोग करना है। यह समाधान आपको sizes विशेषता के भीतर मीडिया क्वेरी परिभाषाओं के आधार पर आकारों को लक्षित करने की क्षमता देता है।

ब्राउज़र सबसे उपयुक्त छवि का अनुरोध करेगा या - ब्राउज़र के आधार पर - उपलब्ध होने पर कैश से सबसे अच्छी छवि लोड करेगा।

निम्नलिखित उदाहरण 1024, 640, और 480 पिक्सेल चौड़े इमेजिक्स के साथ तीन छवियों का आकार प्रदर्शित करता है। sizes विशेषता का उपयोग करते हुए, हम छवियों के व्यवहार के लिए दो प्रश्नों को लक्षित कर रहे हैं।

36em या उससे अधिक के व्यूपोर्ट पर, छवियाँ व्यूपोर्ट की चौड़ाई के 1/3 पर प्रदर्शित होंगी।

उस आकार के नीचे, छवियाँ व्यूपोर्ट के पूर्ण आकार में प्रदर्शित होंगी। उन आकारों पर, ब्राउज़र यह निर्धारित करेगा कि पृष्ठ दिए गए लक्ष्य आकार के लिए प्रस्तुत करते समय कौन सी छवि लोड की जाए।

 <img srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w, https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w, https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w" src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop" sizes="(min-width: 36em) 33.3vw, 100vw" >

imgix द्वारा पेन <a href='https://codepen.io/imgix/pen/VLNZaW/' target='_blank'>VLNZaW</a> देखें (<a href='https://codepen.io/ imgix" target='_blank'>@imgix</a>) <a href='https://codepen.io' target='_blank'>CodePen</a> पर।

Imgix का उपयोग करने के सर्वोत्तम अभ्यास

srcset और imgix के साथ सर्वोत्तम छवियाँ प्रदान करते समय सोचने के लिए और भी बहुत कुछ है।

imgix आपकी आउटपुट छवियों पर आपको अधिक नियंत्रण देने के लिए अतिरिक्त संचालन जोड़ने की क्षमता प्रदान करता है, और क्योंकि वे यूआरएल में परिभाषित हैं, आप अपनी सेटिंग्स को ठीक कर सकते हैं और निर्णय बदलने पर देर-चरण संपादन कर सकते हैं।

srcset का उपयोग करने की चुनौतियों में से एक यह है कि आप पर्याप्त आकार उत्पन्न करना चाहते हैं ताकि आपके अधिकांश उपयोगकर्ता ऐसी छवियां डाउनलोड कर सकें जो स्क्रीन पर दिखाई देने वाले आकार के करीब हों, लेकिन यदि आप बहुत अधिक आकार उत्पन्न करते हैं तो आप कैश को प्रभावित कर सकते हैं -क्षमता, जिसका प्रदर्शन पर नकारात्मक प्रभाव पड़ सकता है।

सौभाग्य से, कई imgix लाइब्रेरी स्वचालित रूप से आपके लिए एक इष्टतम srcset उत्पन्न कर सकती हैं।

fit=max का उपयोग करें

आईएमजीआईएक्स यूआरएल पर fit=max पैरामीटर का उपयोग यह सुनिश्चित करेगा कि एक छवि कभी भी अपने मूल आकार से बड़ी नहीं होगी। इस तरह, dpr=3 छवि का अनुरोध करते समय, कोई छवि एक्सट्रपलेशन नहीं होगा। दस्तावेज़ में fit के बारे में और पढ़ें।

auto=format प्रयोग करें

auto=format पैरामीटर उन ब्राउज़रों के लिए हल्की वेबपी छवियां प्रदान करेगा जो इसका समर्थन करते हैं (क्रोम, फ़ायरफ़ॉक्स, आदि) और अन्य उदाहरणों के लिए मूल प्रारूप में वापस आ जाएंगे।

वेबपी जैसे अधिक आधुनिक प्रारूप क्लाइंट को भेजे गए छवि डेटा की मात्रा को काफी कम कर सकते हैं; कभी-कभी 35% तक। दस्तावेज़ में स्वचालित सामग्री बातचीत के बारे में और पढ़ें।

परिवर्तनीय गुणवत्ता का प्रयोग करें

Imgix के साथ dpr सेट करते समय, आप अपनी छवियों की गुणवत्ता को समायोजित करने पर विचार कर सकते हैं। उच्च डीपीआर के लिए q पैरामीटर को कम मान पर सेट करने से आप अपनी छवि के लिए सघन पिक्सेल सेट बनाए रखते हुए फ़ाइल का आकार कम कर सकते हैं।

?q=80 छवि का आकार 21.3kB है। इसे आज़माएं और सैंडबॉक्स में अंतर देखें ।

?dpr=2&q=40 छवि का आकार 34.7kB है। इसे आज़माएं और सैंडबॉक्स में अंतर देखें।

?dpr=3&q=20 छवि का आकार 42.1kB है। इसे आज़माएं और सैंडबॉक्स में अंतर देखें।

इस सामान्य अभ्यास को imgix URL API के साथ आसान बना दिया गया है। गुणवत्ता को समायोजित करना विशेष रूप से वेबपी और जेपीईजी जैसे हानिपूर्ण प्रारूपों के साथ अच्छी तरह से काम करता है।

यह सब एक साथ डालें

हमारे srcset DPR उदाहरण पर लागू इन उदाहरणों का कार्यान्वयन यहां दिया गया है:

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

imgix द्वारा पेन <a href='https://codepen.io/imgix/pen/MwRjzZ/' target='_blank'>MwRjzZ</a> देखें (<a href='https://codepen.io/ imgix" target='_blank'>@imgix</a>) <a href='https://codepen.io' target='_blank'>CodePen</a> पर।

सारांश और संबंधित ट्यूटोरियल

उत्तरदायी इमेजरी कार्यान्वयन का एक तेजी से बदलता क्षेत्र है, और अलग-अलग उपयोग के मामलों में अलग-अलग तरीके लागू होते हैं। यहां हमारे अन्य ट्यूटोरियल हैं जो रिस्पॉन्सिव डिज़ाइन के पहलुओं को छूते हैं।

• रेटिना के लिए डिजाइनिंग, imgix के साथ तैनाती
• ग्राहक संकेतों के साथ अगली पीढ़ी की प्रतिक्रियाशील छवियाँ
• <चित्र> के साथ imgix का उपयोग करना