क्योंकि  , एक प्रदर्शनशील साइट को चलाने के लिए छवियों को अनुकूलित करना बेहद महत्वपूर्ण है। प्रत्येक बाइट जिसे आपको अपनी सामग्री परोसने के लिए स्थानांतरित नहीं करना पड़ता है, का अर्थ है आपके उपयोगकर्ताओं के लिए एक छोटा पृष्ठ और तेज़ लोड समय। एक सामान्य पृष्ठ का लगभग 50% भार छवियों से बना होता है  यह ट्यूटोरियल   विशेषता का उपयोग करने के अंदर और बाहर को कवर करता है, और कैसे imgix प्रक्रिया को आसान बनाता है। srcset  सही आकार की छवियां प्रस्तुत करना महत्वपूर्ण है क्योंकि यह स्थानांतरित बाइट्स और   कम कर सकता है।   विशेषता आज ऐसा करने के सर्वोत्तम तरीकों में से एक है।  सीपीयू ओवरहेड को srcset  स्रोतसेट और प्रदर्शन घनत्व    विभिन्न डिवाइस रिज़ॉल्यूशन के लिए अलग-अलग छवियों को निर्दिष्ट करने का एक सरल तरीका प्रदान करता है। यह साइटों को उच्च-रिज़ॉल्यूशन डिस्प्ले वाले आधुनिक उपकरणों पर छवियों के 2x, 3x या उच्चतर संस्करण पेश करने की अनुमति देता है।   टैग के भीतर इसका उपयोग करना आसान है: srcset img   <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >  हालाँकि यह उपयोगकर्ताओं को सर्वोत्तम संपत्तियाँ प्रदान करता है, यह प्रत्येक संपत्ति के प्रत्येक संस्करण को उत्पन्न करने और संग्रहीत करने का बोझ सेवा पर डालता है। इससे भंडारण लागत बढ़ सकती है, और आप अपने द्वारा उत्पन्न प्रत्येक संपत्ति की सेवा कभी नहीं कर पाएंगे।  किसी बड़े पुस्तकालय या उपयोगकर्ता-जनित सामग्री के साथ व्यवहार करते समय, यह अस्वीकार्य है।  Imgix के साथ, आपकी संपूर्ण छवि लाइब्रेरी तुरंत   -रेडी हो जाती है। srcset  Imgix के साथ srcset का उपयोग करना  Imgix   और   URL पैरामीटर का उपयोग करके, हम अपनी छवियों पर   विशेषताओं को उत्पन्न करने के लिए किए जाने वाले प्रयास की मात्रा को सरल बना सकते हैं। इस उदाहरण के लिए, हम यहां स्थित छवि का उपयोग करेंगे: w dpr 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" >   https://codepen.io/imgix/pen/aOxmqg?embedable=true  हमें एक छवि टैग मिलता है जो प्रत्येक डिवाइस के लिए उसके डिवाइस-पिक्सेल अनुपात (डीपीआर) के आधार पर सर्वोत्तम रिज़ॉल्यूशन प्रदान करता है।   पैरामीटर दिए जाने पर imgix स्वचालित रूप से अधिक पिक्सेल प्रदान करेगा। dpr  डिवाइस-पिक्सेल अनुपात की गणना  आप देख सकते हैं कि हमने अपनी 1x,   और 3x संपत्तियों पर क्रमशः   ,   , और dpr=3 लागू किया है।   पैरामीटर imgix को   पैरामीटर को   (जिसे "सीएसएस पिक्सल" के रूप में भी जाना जाता है) के रूप में मानने का निर्देश देता है। dpr=2 dpr=1 dpr=3 dpr w डिवाइस-स्वतंत्र पिक्सल  इस प्रकार,   पर 400×300 छवि वास्तव में 800×600 पिक्सेल छवि होगी।   छवि 1200×900 पिक्सेल होगी।  dpr=2 dpr=3  यह आपको दोनों दुनियाओं का सर्वश्रेष्ठ प्रदान करता है: उन उपकरणों के लिए पूर्ण रिज़ॉल्यूशन जो इसका समर्थन करते हैं, उन उपकरणों के लिए आवश्यकता से अधिक डेटा वितरित किए बिना जो इसका उपयोग नहीं करेंगे। Imgix का उपयोग करके, हमें केवल मूल संपत्ति को संग्रहीत करना होगा, और फिर तुरंत उसमें हेरफेर करना होगा, जैसा कि हमने ऊपर देखा है।  इससे   डिवाइस निकलने पर होने वाला सिरदर्द भी दूर हो जाता है। imgix वर्तमान में   तक का समर्थन करता है। 4x dpr=5  यह अभ्यास निश्चित छवि लेआउट के साथ सबसे अच्छा काम करता है।   के साथ   उपयोग वर्तमान में   है। dpr srcset व्यापक रूप से समर्थित  मीडिया क्वेरीज़ के साथ   और   उपयोग करना srcset sizes  फ़्लुइड लेआउट के लिए प्रतिक्रियाशील छवियों को संभालने का एक अलग तरीका   के साथ आकार परिभाषाओं का उपयोग करना है। यह समाधान आपको   विशेषता के भीतर मीडिया क्वेरी परिभाषाओं के आधार पर आकारों को लक्षित करने की क्षमता देता है। srcset sizes  ब्राउज़र सबसे उपयुक्त छवि का अनुरोध करेगा या - ब्राउज़र के आधार पर - उपलब्ध होने पर कैश से सबसे अच्छी छवि लोड करेगा।   निम्नलिखित उदाहरण 1024, 640, और 480 पिक्सेल चौड़े इमेजिक्स के साथ तीन छवियों का आकार प्रदर्शित करता है।   विशेषता का उपयोग करते हुए, हम छवियों के व्यवहार के लिए दो प्रश्नों को लक्षित कर रहे हैं। sizes    या उससे अधिक के व्यूपोर्ट पर, छवियाँ व्यूपोर्ट की चौड़ाई के 1/3 पर प्रदर्शित होंगी। 36em  उस आकार के नीचे, छवियाँ व्यूपोर्ट के पूर्ण आकार में प्रदर्शित होंगी। उन आकारों पर, ब्राउज़र यह निर्धारित करेगा कि पृष्ठ दिए गए लक्ष्य आकार के लिए प्रस्तुत करते समय कौन सी छवि लोड की जाए।   <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> पर।   https://codepen.io/imgix/pen/VLNZaW?embedable=true  Imgix का उपयोग करने के सर्वोत्तम अभ्यास    और imgix के साथ सर्वोत्तम छवियाँ प्रदान करते समय सोचने के लिए और भी बहुत कुछ है। srcset  imgix आपकी आउटपुट छवियों पर आपको अधिक नियंत्रण देने के लिए अतिरिक्त संचालन जोड़ने की क्षमता प्रदान करता है, और क्योंकि वे यूआरएल में परिभाषित हैं, आप अपनी सेटिंग्स को ठीक कर सकते हैं और निर्णय बदलने पर देर-चरण संपादन कर सकते हैं।    का उपयोग करने की चुनौतियों में से एक यह है कि आप पर्याप्त आकार उत्पन्न करना चाहते हैं ताकि आपके अधिकांश उपयोगकर्ता ऐसी छवियां डाउनलोड कर सकें जो स्क्रीन पर दिखाई देने वाले आकार के करीब हों, लेकिन यदि आप बहुत अधिक आकार उत्पन्न करते हैं तो आप कैश को प्रभावित कर सकते हैं -क्षमता, जिसका प्रदर्शन पर नकारात्मक प्रभाव पड़ सकता है। srcset  सौभाग्य से, कई   स्वचालित रूप से आपके लिए एक इष्टतम   उत्पन्न कर सकती हैं। imgix लाइब्रेरी srcset    का उपयोग करें fit=max  आईएमजीआईएक्स यूआरएल पर   पैरामीटर का उपयोग यह सुनिश्चित करेगा कि एक छवि कभी भी अपने मूल आकार से बड़ी नहीं होगी। इस तरह,   छवि का अनुरोध करते समय, कोई छवि एक्सट्रपलेशन नहीं होगा। दस्तावेज़ में   के बारे में और पढ़ें। fit=max dpr=3 fit    प्रयोग करें auto=format    पैरामीटर उन ब्राउज़रों के लिए हल्की वेबपी छवियां प्रदान करेगा जो इसका समर्थन करते हैं (क्रोम, फ़ायरफ़ॉक्स, आदि) और अन्य उदाहरणों के लिए मूल प्रारूप में वापस आ जाएंगे। auto=format  वेबपी जैसे अधिक आधुनिक प्रारूप क्लाइंट को भेजे गए छवि डेटा की मात्रा को काफी कम कर सकते हैं; कभी-कभी 35% तक। दस्तावेज़ में   के बारे में और पढ़ें। स्वचालित सामग्री बातचीत  परिवर्तनीय गुणवत्ता का प्रयोग करें  Imgix के साथ   सेट करते समय, आप अपनी छवियों की गुणवत्ता को समायोजित करने पर विचार कर सकते हैं। उच्च डीपीआर के लिए   पैरामीटर को कम मान पर सेट करने से आप अपनी छवि के लिए सघन पिक्सेल सेट बनाए रखते हुए फ़ाइल का आकार कम कर सकते हैं। dpr q    छवि का आकार 21.3kB है।   ।  ?q=80 इसे आज़माएं और सैंडबॉक्स में अंतर देखें    छवि का आकार 34.7kB है।  ?dpr=2&q=40 इसे आज़माएं और सैंडबॉक्स में अंतर देखें।     छवि का आकार 42.1kB है।  ?dpr=3&q=20 इसे आज़माएं और सैंडबॉक्स में अंतर देखें।   इस सामान्य अभ्यास को imgix URL API के साथ आसान बना दिया गया है। गुणवत्ता को समायोजित करना विशेष रूप से वेबपी और जेपीईजी जैसे हानिपूर्ण प्रारूपों के साथ अच्छी तरह से काम करता है।  यह सब एक साथ डालें  हमारे   DPR उदाहरण पर लागू इन उदाहरणों का कार्यान्वयन यहां दिया गया है: srcset   <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 का उपयोग करना

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

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

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

He/Him/Master of Discovery

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

He/Him/Master of Discovery

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps