[अनुवाद] एचटीएमएल 5 उत्तरदायी छवियां

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

मैं इस तथ्य से परेशान था कि उत्तरदायी छवियों के लिए अभी भी कोई विनिर्देश नहीं है। नवंबर 2011 में, मैंने चित्र टैग प्रस्तावित किया । यह तत्व मीडिया क्वेरी के साथ मिलकर वीडियो टैग तंत्र का उपयोग करता है:

 <picture alt="angry pirate"> <source src=hires.png media="min-width:800px"> <source src=midres.png media="min-width:480px"> <source src=lores.png> <!--      --> <img src=midres.png alt="angry pirate"> </picture> 

उसी समय, अन्य लोगों ने एक समान विनिर्देश का प्रस्ताव दिया , जिसके बाद एक W3C समूह को अनुकूली छवि विनिर्देशों पर चर्चा करने के लिए बनाया गया था।

हालांकि, जनवरी में, HTML5 के संपादक, इयान हिकसन ने लिखा:

यह img टैग के लिए क्यों? आमतौर पर, img तत्व का उपयोग सामग्री में छवियों के लिए किया जाता है जिन्हें आपको उत्तरदायी बनाने की आवश्यकता नहीं होती है।

Apple के एडवर्ड ओ'कॉनर ने बाद में एक और तरीका सुझाया, जिसमें img तत्व के लिए srcset विशेषता का उपयोग किया गया । यह नए सीएसएस छवि-सेट संपत्ति के लिए इसी तरह के सुझाव का अनुपालन करता है जो पहले ही WebKit में जोड़ा जा चुका है:

<img src="foo-lores.jpg"
srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
alt="decent alt text for foo.">

"2x" और "6.5x" मान ब्राउज़र को सापेक्ष रिज़ॉल्यूशन बताते हैं; foo-hires.jpg मूल छवि से 2 गुना बड़ा है, और foo-superduperhires.jpg 6.5 गुना है। कुछ दिनों बाद, इस प्रस्ताव को विनिर्देश में जोड़ा गया ।

प्रस्तावित चित्र तत्व और srcset विशेषता के बीच दो मुख्य अंतर हैं। सबसे स्पष्ट है कि srcset विशेषता का उपयोग img तत्व में किया जाता है, जो मूल रूप से छवियों के लिए अभिप्रेत था। और यह अद्भुत है।

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

ओ'कॉनर ने लिखा:

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

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

प्रस्तावित srcset विशेषता में दो कमियां हैं। पहला बहुत व्यक्तिपरक है, लेकिन कई मेरे साथ सहमत होंगे: विनिर्देश, जो अब है, में भयानक सिंटैक्स है:

<img src="face-600-200-at-1.jpeg" alt=""
srcset="face-600-200-at-1.jpeg 600w 200h 1x,
face-600-200-at-2.jpeg 600w 200h 2x,
face-icon.png 200w 200h">

बेशक, यह तय किया जाना चाहिए। यह केवल कोड सौंदर्यशास्त्र के बारे में नहीं है। यदि सिंटैक्स बहुत अधिक उलझन में है, तो इसका गलत तरीके से उपयोग किया जाएगा।

दूसरी समस्या यह है कि डेवलपर्स प्रक्रिया को नियंत्रित करने की क्षमता नहीं खोना चाहते हैं। यह दृश्य सामग्री के अर्थ को खोने का मामला है (देखें "क्या मुझे कला की दिशा की परवाह है?" पैराग्राफ) और कई लोग आश्वस्त हैं कि Apple ने इसके बारे में नहीं सोचा था। हालांकि srcset प्रस्तावक विपरीत राय के हैं ।

स्रोत: एचटीएमएल 5 अनुकूली छवियां: एक का अंत

उपयोगी लिंक:
- डेवलपर्स के बीच होलीवर के बारे में थोड़ा
- आपको किस उत्तरदायी चित्र समाधान का उपयोग करना चाहिए?