उपयोग<picture> विभिन्न उपयोगकर्ता परिवेशों के लिए छवियों को गतिशील रूप से प्रस्तुत करना

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

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

इस ट्यूटोरियल में, हम जानेंगे कि <picture> तत्व का उपयोग कब करना है और इसे imgix के साथ सबसे प्रभावी ढंग से कैसे कार्यान्वित करना है।

कला निर्देशन बनाम संकल्प स्विचिंग

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

कार्यान्वयन के संदर्भ में, यह ब्राउज़र को यह तय करने के लिए पर्याप्त जानकारी देने के बीच एक विकल्प है कि छवि के किस संस्करण का उपयोग करना है या इसे सीधे कमांड करना है।

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

इस मामले में, संभावित प्रदर्शन प्रभावित होने के बावजूद, आप सीधे ब्राउज़र को कमांड करना चाहते हैं।

कला निर्देशन के लिए imgix और <picture> का उपयोग करना

<picture> तत्व का उपयोग करते समय imgix के दो मुख्य लाभ हैं। सबसे पहले, यह प्रत्येक व्यूपोर्ट आकार के लिए छवि की अलग, पूर्व-संसाधित प्रतियां बनाए रखने की आवश्यकता को हटा देता है। आकार, क्रॉपिंग और डिवाइस पिक्सेल अनुपात को समायोजित करने के लिए आवश्यकतानुसार कोई भी पैरामीटर लागू करें।

दूसरा, यह छवि को अनुकूलित करके और अनुरोधित सभी विभिन्न संस्करणों को कैशिंग करके प्रदर्शन हिट को कम करने में मदद करता है।

नोट: <picture> तत्व कुछ पुराने ब्राउज़रों के लिए उपलब्ध नहीं है। आप उन ग्राहकों के लिए समर्थन जोड़ने के लिए पिक्चरफिल का उपयोग कर सकते हैं।

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

व्यूपोर्ट परिवर्तनों को पूर्ण आकार में देखने के लिए छवि पर क्लिक करें

 <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop" media="(min-width: 480px)" > <img src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop"> </picture>

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

आप अपने उपयोगकर्ताओं के उपकरणों के बारे में जो जानते हैं, उसके आधार पर आप आवश्यकतानुसार ब्रेकप्वाइंट की संख्या का विस्तार करना जारी रख सकते हैं।

<picture> के इस सरल कार्यान्वयन के साथ भी, हमने प्रत्येक लक्ष्य आकार के लिए छवि का सबसे सम्मोहक संस्करण प्रदान करने के लिए आवश्यकतानुसार एकल छवि को समायोजित करते हुए मूल बातें शामिल कर ली हैं।

हालाँकि, इस कोड में कुछ अतिरिक्त के साथ, <picture> आपके संपूर्ण छवि सेट में कला निर्देशन को स्वचालित करने के लिए एक शक्तिशाली उपकरण बनाना संभव है, न कि केवल एक अलग फोटो में।

स्वचालित कला निर्देशन

उपरोक्त उदाहरणों में, क्रॉपिंग सीधी थी क्योंकि सार्थक सामग्री बीच में थी (जो कि fit=crop के लिए डिफ़ॉल्ट है)।

हालाँकि, यदि छवि का सबसे प्रासंगिक हिस्सा केंद्रित नहीं है, तो आप विभिन्न पहलू अनुपातों के लिए प्री-क्रॉप किए गए संस्करणों को मैन्युअल रूप से आउटपुट किए बिना, जहां क्रॉपिंग शुरू होती है, वहां प्रोग्रामेटिक रूप से समायोजित करने के लिए imgix के crop मोड का उपयोग कर सकते हैं।

imgix दो मोड प्रदान करता है जो छवि सामग्री के आधार पर क्रॉप करते हैं: crop=faces और crop=entropy । वे छवि का मूल्यांकन करके और या तो चेहरे या उच्च कंट्रास्ट वाले क्षेत्रों का पता लगाकर और फिर केंद्र में मौजूद लोगों के साथ क्रॉप करके समान रूप से काम करते हैं।

अवतार बनाने और पॉइंट-ऑफ-इंटरेस्ट क्रॉपिंग के बारे में हमारी गाइड में इन मोड का उपयोग कैसे करें, इसके बारे में अधिक विवरण है।

आइए देखें कि <picture> और टेक्स्ट ओवरले और वॉटरमार्क जैसी प्रमुख इमेजिक्स सुविधाओं का उपयोग करके छवियों का एक पूर्ण-ब्रांडेड सेट कैसे बनाया जा सकता है जो किसी भी डिवाइस स्क्रीन पर फिट होने के लिए क्रॉप और बदलता है।

इन छवियों का प्रत्येक संस्करण व्यूपोर्ट आकार और कैश्ड के जवाब में ऑन-द-फ्लाई ओरिजिन इमेज फ़ाइल से बनाया जा रहा है, जो छवि भंडारण और किसी भी प्रदर्शन हिट दोनों को बहुत कम कर देता है जो <picture> सामान्य रूप से हो सकता है।

फसल

कोडपेन में चेहरे/एंट्रॉपी क्रॉपिंग के उदाहरण देखें

CodePen पर imgix ( @imgix ) द्वारा imgix के साथ पेन पिक्चर एलिमेंट और आर्ट डायरेक्शन देखें।

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

छवि भिन्नता के आधार पर, यह crop=faces , crop=entropy , फसल संरेखण ( crop=top , आदि) के साथ किया जाता है और कभी-कभी छोटे आकार में छवि के एक हिस्से पर rect इन करने के लिए किया जाता है।

विषय को ओवरलैप करने से बचने के लिए व्यूपोर्ट परिवर्तन और स्थिति बदलने के लिए लोगो वॉटरमार्क और फोटो क्रेडिट को आकार और पैडिंग के लिए भी समायोजित किया जाता है।

स्केलिंग टेक्स्ट और वॉटरमार्क

आपके द्वारा अपनी छवियों में जोड़े गए किसी भी टेक्स्ट ओवरले, मिश्रण या वॉटरमार्क को छवि के साथ स्केल और समायोजित किया जा सकता है। यहां एक उदाहरण दिया गया है जो कला निर्देशन को और भी नाटकीय ढंग से <picture> का लाभ उठाता है।

कोडपेन में वॉटरमार्क/मिश्रण उदाहरण देखें

डीपीआर समर्थन जोड़ा जा रहा है

यदि आप <picture> के भीतर एकाधिक पिक्सेल रिज़ॉल्यूशन का समर्थन करना चाहते हैं, तो आप प्रत्येक srcset में DPR विविधताएँ जोड़कर ऐसा कर सकते हैं। उदाहरण के लिए, यदि हम अपने मूल उदाहरण के लिए उच्च-घनत्व वाले डिवाइस का समर्थन करना चाहते हैं, तो कोड इस तरह दिखेगा:

 <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x" media="(min-width: 480px)" > <img srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x"> </picture>

फिर से ध्यान दें कि छवि के नए संस्करण बनाने की कोई आवश्यकता नहीं है - बस स्रोत की एक प्रति बनाएं, यूआरएल में एक dpr पैरामीटर जोड़ें, और प्रत्येक को उचित पिक्सेल-घनत्व डिस्क्रिप्टर ( 1x , 2x , आदि) के साथ लेबल करें।

जैसे-जैसे आपकी ज़रूरतें और डिज़ाइन बदलते हैं, अनंत विविधताएं पैदा करने के लिए आपकी मूल छवि की ही आवश्यकता होती है।

सारांश

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

हम क्लाइंट हिंट जैसे दूरदर्शी दृष्टिकोण का भी समर्थन करते हैं जो प्रतिक्रियाशील डिज़ाइन और कार्यान्वयन को सरल बनाने का प्रयास कर रहे हैं।

Imgix का लाभ उठाने के लिए आज ही एक निःशुल्क खाता बनाएं ।

प्रासंगिक इमिक्स पैरामीटर्स

• crop | फसल मोड
• dpr | डिवाइस पिक्सेल अनुपात
• fit | फ़िट मोड का आकार बदलें
• rect | स्रोत आयत क्षेत्र

अन्य संसाधन

• मीडिया क्वेरीज़ : मीडिया क्वेरीज़ का उपयोग करके प्रतिक्रियापूर्वक डिज़ाइन की गई वेबसाइटों का क्यूरेटेड चयन। कला निर्देशन के विभिन्न दृष्टिकोणों को देखने के लिए उपयोगी।

• रिस्पॉन्सिव इमेज 101 : क्लाउड फोर डिज़ाइन की परिचय श्रृंखला, रिस्पॉन्सिव इमेजरी करने के सभी तरीकों और उनके ट्रेडऑफ़ और उपयोग के मामलों को कवर करती है।

• रिस्पॉन्सिव आर्ट डायरेक्शन के लिए फोकल पॉइंट क्रॉपिंग : अपनी छवियों को किसी भी आकार में आकर्षक बनाने के लिए imgix के फोकल पॉइंट क्रॉपिंग मापदंडों के साथ <picture> का उपयोग करना सीखें।