🎫 👤 👉 उत्तरदायी छवियों के साथ काम करने के लिए एक सरल दृष्टिकोण 👨🏻‍💻 🏟️ 👶🏽

उत्तरदायी छवि विनिर्देश एक शानदार दस्तावेज़ है जो ऐसी छवियों के लिए कई उपयोगों का वर्णन करता है। लेकिन अनुभव मुझे बताता है कि सबसे अधिक बार जब उनके साथ काम करते हैं, तो आपको केवल यह जानने की आवश्यकता होती है कि विभिन्न आकारों की एक ही छवि के ग्राहक प्रतियां कैसे दें, पृष्ठ दृश्य क्षेत्र की चौड़ाई के आधार पर उन्हें चुनना। हम इसे "रिज़ॉल्यूशन स्विचिंग" कहते हैं। इस समस्या को हल करने के लिए, आप विशेषताओं का उपयोग कर सकते हैं srcsetऔर sizes।

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

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

ब्राउज़र के साथ टैग "संचार" कैसे करता है

यह है कि टैग <img>ब्राउज़र को बताता है कि किस छवि का चयन करना है।

टैग और ब्राउज़र की "बात"

यहाँ टैग<img>ब्राउज़र को निम्नलिखित बताता है: "इस स्क्रीन आकार के साथ, मुझे लगभग निम्नलिखित आकार में प्रदर्शित किया जाएगा (एक विशेषता इंगित करता हैsizes)।" आप इनमें से कोई भी चित्र ले सकते हैं जिसमें निम्न चौड़ाई हो (एक विशेषता इंगित करता हैsrcset)। इसलिए, कृपया वह छवि चुनें जो अब सबसे उपयुक्त है। ”

Srcset विशेषता

विशेषता srcsetब्राउज़र को ग्राफिक संसाधनों का एक सेट प्रदान करती है जिसमें से वह सबसे उपयुक्त चुन सकता है। इसमें प्रत्येक प्रस्तावित चित्र के आकार के बारे में भी जानकारी है।

Srcset

विशेषता इस विशेषताsrcमें उन ब्राउज़रों की फ़ॉलबैक छवि होती है जो विशेषता को नहीं समझते हैंsrcset।srcsetयूआरएल छवियों और उनके चौड़ाई के बारे में जानकारी शामिल है। उसे प्रदान की गई छवियों के सेट से, ब्राउज़र चुनेंगे कि क्या सबसे अच्छा है। इसके अलावा, यदि उपयोगकर्ता के पास उच्च पिक्सेल घनत्व (रेटिना डिस्प्ले) के साथ एक डिस्प्ले है - तो छवि चुनने पर ब्राउज़र इसे ध्यान में रखेगा।

विशेषताsrcsetमें छवि की जानकारी के बाद छवि URL की एक सूची होती है। जोड़ेURL-अल्पविराम द्वारा अलग किए जाते हैं। सूची आइटम इस तरह दिखेगा: image.jpg 1000w।ऐसा रिकॉर्ड ब्राउज़र को बताता है कि छविimage.jpg1000 पिक्सेल चौड़ी है।

इस तरह से छवियों के सेट का वर्णन करते हुए, हम ब्राउज़र को निम्नलिखित बताते हैं: "मैं आपको छवियों की एक सूची देता हूं और सबसे उपयुक्त एक चुनने के लिए आप पर भरोसा करता हूं।"

ब्राउज़र सर्वोत्तम छवि का चयन करेगा, मापदंड के एक जटिल सेट द्वारा निर्देशित, जिसमें उपयोगकर्ता द्वारा प्रदर्शित छवि शामिल है, देखने के क्षेत्र का वर्तमान आकार क्या है, और क्या उपयोगकर्ता के पास उच्च-रिज़ॉल्यूशन डिस्प्ले है।

ब्राउज़र यह जानने के लिए पर्याप्त बुद्धिमान है कि कम-रिज़ॉल्यूशन वाले डेस्कटॉप डिस्प्ले पर, यदि आउटपुट इमेज की चौड़ाई 800 पिक्सल है, तो आपको कम से कम 800 पिक्सल की चौड़ाई के साथ सूची से छवि का चयन करना होगा।

इसके अलावा, ब्राउज़र जानता है कि यदि 320 पिक्सल की चौड़ाई वाली छवि को उच्च-रिज़ॉल्यूशन डिस्प्ले पर प्रदर्शित किया जाता है, तो आपको एक ऐसी छवि फ़ाइल का चयन करने की आवश्यकता है जो कम से कम 640 पिक्सेल चौड़ी हो। नतीजतन, हमें 1x और 2x ग्राफिक संसाधनों के बारे में चिंता करने की आवश्यकता नहीं है। आपको बस ब्राउज़र को चित्रों का एक अच्छा सेट देना है और उसे अपना काम करने देना है।

विभिन्न स्क्रीन के लिए उपयुक्त छवियों का वर्णन कैसे करें?

विशेषता बताता है

गुण srcsetएक महान उपकरण है। लेकिन जब ब्राउज़र पृष्ठ के HTML कोड को पढ़ता है, तो यह नहीं जानता कि क्या, उदाहरण के लिए, सीएसएस-शैली का उपयोग किया जाता है, जो छवि का आकार स्क्रीन की चौड़ाई का 50% निर्धारित करता है।

यह वह जगह है जहाँ विशेषता खेलने में आती है sizes। इसके साथ, हम ब्राउज़र को एक संकेत दे सकते हैं कि सीएसएस को लागू करने के बाद छवि किस आकार में प्रदर्शित होगी।

विशेषता बताता है

100vw- डिफ़ॉल्ट आकार जब कोई भी शर्त पूरी नहीं होती है। यह उस सूची में अंतिम संकेत दिया गया है जो विशेषता में है sizes।
1023px - खिड़की की चौड़ाई।
780px - छवि की चौड़ाई जब निर्दिष्ट शर्त पूरी होती है।

पहली पूर्ण स्थिति में ब्राउज़र बंद हो जाएगा।

विशेषता sizesमें अल्पविराम द्वारा अलग की गई मीडिया स्थितियों की एक सूची है। मीडिया की स्थिति मीडिया के सवालों का एक सबसेट है। यहां आप उस वातावरण के प्रकार को निर्दिष्ट नहीं कर सकते हैं जिसमें स्थिति ( printया screen) लागू है , लेकिन आप देखने के क्षेत्र की चौड़ाई से संबंधित मीडिया क्वेरी का उपयोग कर सकते हैं।

प्रत्येक सूची प्रविष्टि में व्यूपोर्ट विंडो की चौड़ाई और संबंधित छवि चौड़ाई शामिल है। सूची आइटम का रूप है (min-width: 1023px) 780px। ऐसा रिकॉर्ड ब्राउज़र को बताता है कि अगर व्यूपोर्ट की चौड़ाई 1023 पिक्सेल (या अधिक) है, तो आपको 780 पिक्सेल की चौड़ाई के साथ एक छवि का उपयोग करने की आवश्यकता है।

यहां, इसके अलावा, रिश्तेदार चौड़ाई इकाइयों का उपयोग किया जा सकता है। उदाहरण के लिए, कुछ ऐसा50vw। यह ब्राउज़र को बताता है कि छवि की चौड़ाई व्यूपोर्ट की चौड़ाई का 50% होगी। यहां, अधिक जटिल स्थितियों में, आप फ़ंक्शन का उपयोग भी कर सकते हैं calc। उदाहरण के लिए, दृश्य डिज़ाइन calc(50vw — 2rem)ब्राउज़र को बताता है कि छवि चौड़ाई व्यूपोर्ट माइनस की चौड़ाई का 50% होगी 2rem। शायद चौड़ाई कुछ इंडेंटेशन या कुछ बॉर्डर की चौड़ाई को ध्यान में रखते हुए सेट की गई है।

सूची का अंतिम तत्व मीडिया स्थिति के साथ प्रदान नहीं किया गया है। यदि आप सूची में एक चौड़ाई जोड़ते हैं और एक मीडिया स्थिति निर्दिष्ट नहीं करते हैं, तो इसी मान को डिफ़ॉल्ट मान के रूप में माना जाएगा, अर्थात इस स्थिति में कि अन्य शर्तों में से कोई भी पूरा नहीं हुआ है।

ब्राउज़र इस सूची को ऊपर से नीचे तक देखेगा और व्यूपोर्ट की चौड़ाई के अनुरूप पहले उपयुक्त तत्व पर रोक देगा।

मान लें कि sizesनिम्नलिखित विशेषता में है :

(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw

यहाँ विभिन्न स्थितियों में क्या होगा:

यदि उपयोगकर्ता एक बड़े डेस्कटॉप डिस्प्ले पर काम कर रहा है, तो ब्राउज़र सूची के पहले तत्व पर विचार करेगा और उसे पता चलेगा कि चित्र 780 पिक्सेल चौड़ा होना चाहिए।
एक ईमानदार iPad स्क्रीन के देखने के क्षेत्र की मानक चौड़ाई 768 पिक्सेल है। इस स्थिति में, ब्राउज़र सूची में पहली प्रविष्टि को छोड़ देगा, लेकिन यह पाएगा कि वर्तमान स्थितियां दूसरी प्रविष्टि से मेल खाती हैं। यह ब्राउज़र को बताता है कि छवि 620 पिक्सेल चौड़ी होगी।
, sizes. , , 100% .

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

उन छवियों की एक सूची कैसे तैयार करें जिनसे ब्राउज़र सबसे उपयुक्त का चयन करेगा?

Src विशेषता

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

लेकिन विशेषता src, अपने आप में, अभी भी उन ब्राउज़रों के लिए महत्वपूर्ण है जो उत्तरदायी छवियों के साथ काम करने का समर्थन नहीं करते हैं। ऐसे ब्राउज़र, काफी पुराने, विशेषताओं srcsetऔर विशेषताओं को अनदेखा करते हैं sizes। वे बस अपने अस्तित्व के बारे में नहीं जानते हैं। लेकिन विशेषताsrcवे समझते हैं, इसलिए आप इसमें छवि का पता लिख सकते हैं, जो ऐसे ब्राउज़रों के लिए एक बैकअप विकल्प के रूप में काम करेगा। मैं आमतौर पर इस विशेषता में सबसे छोटी छवि का पता लिखता हूं जो डेस्कटॉप मॉनिटर पर अच्छा लगता है जिसमें उच्च पिक्सेल घनत्व नहीं होता है।

सवाल और जवाब

छवि सेट उत्पन्न करने के लिए generateHow

छवियों को विभिन्न तरीकों से उत्पन्न किया जा सकता है: मैन्युअल रूप से, उपयुक्त सीडीएन क्षमताओं का उपयोग करके उत्तरदायी छवियां बनाने के लिए उपकरण का उपयोग करना।

मैन्युअल रूप से छवियां बनाने के लिए, आपको फ़ोटोशॉप (या आपके द्वारा उपयोग किए जाने वाले किसी अन्य संपादक) में मूल छवि को खोलने और सभी आवश्यक आकारों में निर्यात करने की आवश्यकता है।

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

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

यहां उन सेवाओं और परियोजनाओं की एक सूची दी गई है, जिनका उपयोग आप विभिन्न आकारों की छवियों के बदलाव के लिए कर सकते हैं।

Hat मुझे ब्राउज़र को क्या आकार प्रदान करने चाहिए?

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

यदि आप एक ही छवि के साथ काम करते हैं और आपके पास इस छवि के आउटपुट के लिए लेआउट को अनुकूलित करने का अवसर है, तो आप उत्तरदायी छवि ब्रेकप्वाइंट जनरेटर टूल का उपयोग कर सकते हैं। वह स्वचालित रूप से छवि की जांच करेगा और यह तय करेगा कि इस छवि से उत्पन्न संसाधनों का अधिकतम सेट (फ़ाइल आकार और रिज़ॉल्यूशन के बीच संतुलन के संदर्भ में) क्या है। फिर यह उपकरण न केवल फाइलें उत्पन्न करेगा, बल्कि स्वचालित रूप से तैयार srcsetऔर विशेषताएँ भी करेगा sizes।

320 से 2560 पिक्सल की चौड़ाई के साथ छवि आकार का एक मानक सेट

यदि आप एक निश्चित सीएमएस में काम कर रहे हैं, या यदि आप एक वेब एप्लिकेशन बना रहे हैं, और आपको नहीं पता कि एक जगह या किसी अन्य में क्या छवि का आकार प्रदर्शित किया जाएगा, तो मैं आकारों के मानक सेट का उपयोग करने की सलाह देता हूं इमेजिस। इससे पहले, मैं निम्नलिखित आयामों प्रयोग किया है:320w,640w,960w,1280w,1920wऔर2560w। ये विभिन्न गुणांक द्वारा 320 को गुणा करके प्राप्त की गई गोल संख्याएं हैं। छोटे मोबाइल डिस्प्ले से लेकर विशाल डेस्कटॉप मॉनिटर तक - संसाधनों का यह सेट विभिन्न प्रकार की स्क्रीन की जरूरतों को कवर करता है।

हालांकि, संसाधनों का एक मानक सेट का उपयोग करना हमेशा अपने स्वयं के सेट का उपयोग करने की तुलना में कम प्रभावी होता है, परियोजना की विशेषताओं को ध्यान में रखते हुए। इस मामले में, हालांकि हम एक काफी तार्किक अनुक्रम देखते हैं, यह फ़ाइल आकारों में एक प्रगतिशील वृद्धि दिखाता है, क्योंकि अगर किसी छवि की चौड़ाई (और, तदनुसार, ऊंचाई) दोगुनी हो जाती है, तो इस छवि में पिक्सेल की संख्या चौगुनी हो जाती है । नतीजतन, यदि आपको छवि आकारों के एक मानक सेट का उपयोग करना है, तो आपको ऐसा सेट चुनने की आवश्यकता हो सकती है जिसमें छोटे आकारों की छवियों के लिए कम विकल्प हों और बड़े आकारों के लिए अधिक विकल्प हों।

यदि आप क्लाउडिनरी पर छवियों की मेजबानी करते हैं, तो एक और दृष्टिकोण आपके लिए उपलब्ध होगा। इसका उपयोग करना हैक्लाउडिन एपीआई , जो आपको डाउनलोड होने पर उत्तरदायी छवि ब्रेकप्वाइंट जनरेटर का उपयोग करके छवियों को संसाधित करने की अनुमति देता है। बाद छवियों स्वचालित रूप से संसाधित कर रहे हैं, आप गतिशील रूप से पॉप्युलेट कर सकते हैं srcsetऔर एपीआई प्रतिक्रिया के प्रयोग से जिम्मेदार बताते हैं sizes।

The आकार विशेषता में क्या मान दर्ज किए जाने चाहिए?

यह पता लगाने के लिए कि विशेषता में कौन से मान दर्ज किए जाने चाहिए sizes, आपको सीएसएस का विश्लेषण करने और यह समझने की आवश्यकता है कि विभिन्न स्थितियों में छवि की चौड़ाई क्या प्रदर्शित होती है।

कभी-कभी यह छवि की चौड़ाई से ही निर्धारित होता है:

img {
  width 320px;
}

@media screen and (min-width: 37.5em) {
  width: 640px;
}

इस मामले में, दो निश्चित छवि आकार विकल्प हैं। इस तथ्य को सीधे विशेषता में दर्शाया जा सकता है sizes:

<img
  alt="Ferrari"
  src="ferrari.jpg"
  srcset="ferrari-s.jpg 320w,
          ferrari-m.jpg 960w,
          ferrari-l.jpg 1920w"
  sizes="(min-width: 37.5em) 640px, 320px">

हालांकि, यह अक्सर पता चलता है कि छवि का आकार लचीला है। अक्सर छवियों को उनके कंटेनरों से आकार विरासत में मिलते हैं:

img {
  height: auto;
  width: 100%;
}

.container {
  padding: 1rem;
  width: 100%;
}

@media screen and (min-width: 37.5em) {
  .container {
    width: 50%;
  }
}

इस उदाहरण में (यह मानते हुए कि छवि की चौड़ाई को प्रभावित करने वाला एकमात्र तत्व है .container) कंटेनर की चौड़ाई को छवि की चौड़ाई माना जा सकता है। यहां यह इस तथ्य पर ध्यान देने योग्य है कि कंटेनर की चौड़ाई से आंतरिक इंडेंट की चौड़ाई को घटाया जाता है। आपको इस पर विचार करने की आवश्यकता हो सकती है, शायद नहीं। यह सब इस बात पर निर्भर करता है कि इंडेंटेशन इमेज की अंतिम चौड़ाई को कितना प्रभावित करता है।

<img
  alt="Ferrari"
  src="ferrari.jpg"
  srcset="ferrari-s.jpg 320w,
          ferrari-m.jpg 960w,
          ferrari-l.jpg 1920w"
  sizes="(min-width: 37.5em) calc(50vw - 2rem),
         calc(100vw - 2rem)">

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

▍ कैसे उत्तरदायी छवियों के लिए सही सेटिंग्स की जांच करने के लिए?

यह कल्पना करना आसान है कि उत्तरदायी छवियों के लिए सही सेटिंग्स का परीक्षण करना कठिन और समय लेने वाला हो सकता है। लेकिन, हमारी खुशी के लिए, एक उपकरण है जो ऐसी समस्याओं के समाधान को सरल करता है। यह एक रिस्पॉन्सिव इमेज लाइनर है ।

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

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

सारांश

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

यदि आपको छवियों के साथ काम करते समय अधिक जटिल समस्याओं को हल करने की आवश्यकता है, तो ध्यान रखें कि ऐसी समस्याओं को हल करने के लिए उपकरण हैं। मान लीजिए कि इस तरह आधुनिक ग्राफिक प्रारूप का उपयोग कर की तरह कुछ है चलो WebP , या भेजने के ग्राहक के लिए विभिन्न छवियों, स्क्रीन आकार पर निर्भर करता है। यदि आप उत्तरदायी छवियों के साथ काम में तल्लीन करना चाहते हैं - इस सामग्री पर एक नज़र डालें ।

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में उत्तरदायी छवियों का उपयोग करते हैं?

उत्तरदायी छवियों के साथ काम करने के लिए एक सरल दृष्टिकोण