उत्तरदायी चित्र प्रदान करने के लिए आपको किस उपकरण का उपयोग करना चाहिए?

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

तालिका जानकारी को दिखाती है, हालांकि, उनके आत्मसात के लिए, आइए इसे व्यावहारिक मुद्दों के माध्यम से सोचते हैं।

आपके और आपके प्रोजेक्ट के लिए उपयुक्त विधि का चयन करते समय, ये प्रश्न संकेत के रूप में कार्य कर सकते हैं। इनमें से कई प्रश्न आपके प्रोजेक्ट के लिए प्रासंगिक हो सकते हैं, इसलिए आपको यह मूल्यांकन करना होगा कि कौन सी तकनीक किन परिस्थितियों में बेहतर हैं, और फिर इस समझ को सामान्य करें।

मेरे पास कितनी पिछली सामग्री है?

दरअसल, इस प्रश्न का अर्थ है "क्या मेरे पास ऐसी पुरानी सामग्री है जिसे मैं अपडेट नहीं कर सकता?" उदाहरण के लिए, सीएसएस-ट्रिक्स वेबसाइट पर मेरे पास एक हजार से अधिक पृष्ठ हैं, और मैं उन पर अकेले काम करता हूं:



हाँ ... मैं इस साइट पर प्रत्येक <img> तत्व को वापस करने और सही नहीं करने जा रहा हूं, इसलिए मुझे एक ऐसी विधि की आवश्यकता है जो मुझे अकेले छोड़ने की अनुमति दे।

एकमात्र उपकरण जो मुझे पता है कि मार्कअप में किसी भी बदलाव की आवश्यकता नहीं है, वह है अनुकूली छवियां । यह PHP स्क्रिप्ट के माध्यम से छवियों के लिए अनुरोधों को पुनर्निर्देशित करके काम करता है जो समझदारी से चयन करता है (और यदि आवश्यक हो) एक ऐसे आकार के चित्र बनाता है जो पाठक के लिए स्क्रीन की चौड़ाई फिट बैठता है।

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

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

क्या मेरे लिए विशेष मार्कअप उपयुक्त है?

यह पिछले प्रश्न का एक उप-प्रश्न है। उत्तरदायी छवियां प्रदान करने के कई साधनों के लिए आपको विशेष HTML कोड का उपयोग करना होगा। उदाहरण के लिए, HiSRC के लिए, आपको डेटा विशेषताओं में उच्च-रिज़ॉल्यूशन चित्रों के पते डालने की आवश्यकता है:

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"> 

यह तकनीक एक स्पष्ट, मान्य, शब्दार्थिक रूप से सही कोड बनाती है, लेकिन इससे साइट पर प्रत्येक <img> तत्व के लिए इन विशेषताओं को जोड़ने की आवश्यकता भी होती है, जो कि पुरानी सामग्री के ढेर वाली साइटों के लिए संभव नहीं हो सकता है।

यदि आप इस निष्कर्ष पर आते हैं कि विशेष मार्कअप (या विशिष्ट सीएसएस शैली) आपके लिए उपयुक्त नहीं है, तो केवल एडेप्टिव इमेज बने रहेंगे। आखिरकार, Sencha.IO के लिए भी , आपको src विशेषता में एक उपसर्ग लगाने की आवश्यकता होगी , और इसके लिए पुरानी सामग्री को संसाधित करना होगा।

क्या मुझे सिमेंटिक कोड की आवश्यकता है?

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



दूसरे शब्दों में, यदि तकनीक की आवश्यकता हो सकती है कि छवि की src विशेषता अनुपस्थित हो, या एक पारदर्शी GIF, या ऐसा कुछ संदर्भित हो, तो कोड अर्थ नहीं होगा।

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

यदि शब्दार्थ आपके लिए महत्वपूर्ण हैं, तो पूर्वोक्त एडेप्टिव इमेज या HiSRC पर एक नज़र डालें , क्रिस्टोफर श्मिट द्वारा बनाया गया jQuery प्लगइन और src शब्दार्थ विशेषता के साथ उपयोग करने की अनुमति दी गई है ।

कुछ अन्य उपकरण <noscript> तत्व का उपयोग करते हैं , जो जावास्क्रिप्ट निष्क्रिय या दुर्गम होने की स्थिति में <img> सुरक्षित कोड डालता है । मैं आपको यह तय करने के लिए छोड़ देता हूं कि यह कोड अर्थ है या नहीं।

क्या मुझे कोड वैधता चाहिए?

यहां वैधता W3C मार्कअप सत्यापन सेवा परीक्षा पास करने के लिए एक कोड की क्षमता को संदर्भित करती है। यह सत्यापन उपकरण आपको समस्या कोड खोजने में मदद करता है, आपको मार्कअप को बेहतर बनाने में मदद करता है। लेकिन कोड केवल खराब नहीं होता है क्योंकि यह परीक्षा पास नहीं करता है: यदि अमान्य कोड सभी ब्राउज़रों में ठीक काम करता है, तो इसकी वैधता आपको या किसी और को चिंता नहीं करनी चाहिए।

हालांकि, अगर आपको वैधता की आवश्यकता है (उदाहरण के लिए, यदि ग्राहक को निश्चित रूप से आपसे इसकी आवश्यकता है, तो काम के लिए भुगतान करने से इंकार करना), तो आप उत्तरदायी छवियों को प्रदान करने के कुछ साधनों का उपयोग नहीं कर सकते हैं। उदाहरण के लिए, Picturefill एक <picture> तत्व का उपयोग करता है, जो समय के साथ मानकीकृत हो सकता है, लेकिन अब ऐसा नहीं है, इसलिए कोड अमान्य है। इसके अलावा, मानक के लिए src विशेषता के लिए <img> तत्व की आवश्यकता होती है - इसलिए दोहरे अनुरोध वाले चित्रों की पूर्वोक्त समस्या से बचने के इरादे से इस विशेषता को अस्वीकार करने से भी अमान्य कोड हो जाता है।

यदि आपके लिए कोड वैधता आवश्यक है, तो मैं अनुकूली छवियां , या HiSRC , या उत्तरदायी वृद्धि की सलाह देता हूं। ये सभी उपकरण सरल और वैध <img> सिंटैक्स का उपयोग करते हैं , जिसमें src विशेषता है।

क्या मुझे छवियों पर सूक्ष्म नियंत्रण की आवश्यकता है?

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


इन तीनों चित्रों के बाईं ओर मोबाइल फोन के लिए है और शुरू में src में इंगित किया गया है। मध्यम, थोड़ा बड़ा, गोलियों द्वारा इस्तेमाल किया जा सकता है। दाईं ओर सबसे बड़ा चित्र है। ( यहां उनका स्रोत है ।)

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

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

 <picture alt="description"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width: 400px)"> <source src="large.jpg" media="(min-width: 800px)"> </picture> 

अगली बार जावास्क्रिप्ट है।

क्या मुझे जावास्क्रिप्ट की आवश्यकता है?

जावास्क्रिप्ट के साथ उत्तरदायी छवियां बनाने के अधिकांश उपकरण अपनी चाल का प्रदर्शन करते हैं। उनमें से कुछ बहुत कम हैं (सिर्फ एक कुकी डालने के लिए), लेकिन फिर भी जावास्क्रिप्ट के साथ। कुछ उपकरणों के लिए, आपको <noscript> तत्व के अंदर <img > तत्व डालना होगा यदि जावास्क्रिप्ट रीडर के लिए अक्षम है। यदि आप इस दृष्टिकोण को पसंद नहीं करते हैं, लेकिन अगर आपको यह सुनिश्चित करने की आवश्यकता है कि चित्र जावास्क्रिप्ट के बिना काम करते हैं, तो आपके लिए Sencha.IO पर भरोसा करना सबसे अच्छा है । यह सेवा "उपयोगकर्ता-एजेंट" हेडर का उपयोग करके उपकरणों की पहचान करने पर आधारित है और एक समान रूप से कम की गई छवि को प्रसारित करती है। तो आप उस छवि के सबसे बड़े (उचित सीमा के भीतर) संस्करण का उल्लेख करेंगे जो आपके पास है, और सेन्चा इसे कम कर देगा और यदि आवश्यक हो तो पाठक को एक छोटा संस्करण दे सकता है (स्पष्ट कारणों के लिए, यह इज़ाफ़ा का सामना नहीं करता है)।

जावास्क्रिप्ट पुस्तकालयों पर निर्भरता के बारे में कैसे?

HiSRC और rwdImages दोनों jQuery पर काम करते हैं। यदि आपकी परियोजना एक अलग पुस्तकालय का उपयोग करती है, तो ये उपकरण आपके लिए काम नहीं कर सकते हैं। (लेकिन आप उन्हें पोर्ट कर सकते हैं और फिर सोर्स कोड खोल सकते हैं!) और यदि आप किसी लाइब्रेरी का उपयोग नहीं करते हैं, तो ठीक है, तो यह समय है, शायद - लेकिन अब हम उस बारे में बात नहीं करते हैं।

क्या मुझे सर्वर स्क्रिप्ट की आवश्यकता है?

हमारे द्वारा चर्चा किए गए कुछ उपकरण न केवल जावास्क्रिप्ट पर निर्भर करते हैं। अनुकूली छवियाँ मुख्य रूप से .htaccess और PHP पर निर्भर करती हैं। खैर .htaccess एक अपाचे सर्वर को मानता है। और यद्यपि, निश्चित रूप से, हम सभी जानते हैं और PHP (khe-ghm) से प्यार करते हैं , कई वेबसाइटें रूबी या पायथन जैसी तकनीकों का उपयोग करती हैं।

उत्तरदायी छवियाँ (फिलामेंट समूह से प्रारंभिक रिलीज) भी .htaccess का उपयोग करती है। इसलिए यदि आपके पास सर्वर के रूप में कुछ नगनेक्स है, तो आपको या तो इस तकनीकी उपकरण को छोड़ना होगा, या .htaccess कोड को समान Nginx कॉन्फ़िगरेशन सिंटैक्स में पोर्ट करना होगा ।

क्या मुझे पाठक के साथ इंटरनेट की गति की जांच करने की आवश्यकता है?

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

दो वर्तमान छवि जवाबदेही उपकरण इंटरनेट की गति का परीक्षण करते हैं जब वे निर्णय लेते हैं: Foresight.js और HiSRC (वे Foresight.js से एक ही तकनीक का उपयोग करते हैं )। यह डाउनलोड समय (दहलीज मान कॉन्फ़िगरेशन में कॉन्फ़िगर किया गया है) को मापने के साथ एक परीक्षण फ़ाइल डाउनलोड करके काम करता है। परीक्षण स्वयं पृष्ठ लोडिंग को कुछ हद तक धीमा कर देता है, लेकिन, सैद्धांतिक रूप से, गति के आधार पर डाउनलोड की गई छवियों के आकार पर बचत करना इसके लायक है।

क्या मैं दूसरों की सेवाओं पर भरोसा कर सकता हूं?

Sencha.IO पूरी तरह से बाहरी उत्तरदायी छवि सेवा है। जहां तक ​​मुझे पता है, वह पूरी तरह से काम करती है, उसके पास काम में कोई बड़ी रुकावट नहीं है, लेकिन, निश्चित रूप से, हमेशा जोखिम होता है।

बेशक, आप इस तरह सोच सकते हैं: "शांत, Sencha.IO के तरीके उत्कृष्ट हैं, लेकिन उनके सर्वर पर भरोसा करने की आवश्यकता चिंताजनक है - मैं अपने सर्वर पर कुछ इसी तरह चलाना चाहूंगा।" यदि आप वास्तव में यह चाहते हैं, तो एक सार्वजनिक WURFL डेटाबेस है , और इसके साथ स्थानीय रूप से काम करने के लिए एक सर्वर साइड उत्तरदायी छवियां हैं ।

डिवाइस एटलस क्लाउड जैसी सेवाएं भी हैं जो डिवाइस मान्यता से संबंधित हैं। वे खुद पर निर्भरता भी पैदा करते हैं। इसमें कोई संदेह नहीं है: उनका लक्ष्य ऑनलाइन रहना और जल्दी से काम करना है, लेकिन इस बारे में ध्यान से सोचें कि आप अपने व्यवसाय पर कैसे और किसके भरोसे रहना चाहते हैं।

क्या एक्सेसिबिलिटी सुविधाओं के साथ एक विशेष सीएमएस है?

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

यह तकनीक, निश्चित रूप से न केवल वर्डप्रेस के लिए उपयुक्त है। मुझे यकीन है कि एक ही उपकरण किसी भी सीएमएस में मौजूद है (या खराब हो सकता है)।

क्या मैं भविष्य की प्रतीक्षा कर सकता हूं?

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

वेब मानक इस मुद्दे से अवगत हैं। एक पूरा समूह अपनी चर्चा के लिए समर्पित है। समय के साथ, वे इस समस्या को हल कर सकते हैं - और हम उन फंडों का उपयोग करना शुरू कर सकते हैं जो हमें पेश किए जाते हैं (मान लीजिए कि ये फंड चालू लोगों की तुलना में बहुत बेहतर हैं)।

शायद हम सीएसएस सामग्री संपत्ति का उपयोग करके छवियों के लिए src स्विच करना शुरू कर देंगे, जैसा कि निकोलस गैलाघेर ने सुझाव दिया था। शायद <चित्र> तत्व को मानकीकृत करें। HTML में srclist विशेषता या CSS में src गुण हो सकता है। शायद कोई उपसर्ग होगा ।

यह भी देखें

• जेसन ग्रिग्स्बी ने उत्तरदायी चित्रों के बारे में तीन भागों में ब्लॉग पोस्ट की एक महाकाव्य श्रृंखला प्रकाशित की है - पहला भाग वहाँ पर है ।
  
• क्रिस्टोफर श्मिट ने अपनी प्रस्तुति की स्लाइड्स को उत्तरदायी छवियों के बारे में पोस्ट किया।
  
• मैट मारक्विस ने एक उत्तरदायी चित्र प्रकाशित किया : कैसे वे लगभग काम करते हैं और हमें एक सूची में अलग क्या चाहिए