विभिन्न वेब अनुप्रयोगों के लिए क्यूए उत्तरदायी छवि पॉलीफिल एपीआई
पिक्चरफिल एक उपयोग में आसान, स्मार्ट और उत्तरदायी एपीआई है जिसका उपयोग विभिन्न वेब अनुप्रयोगों में किया जा सकता है ताकि यह सुनिश्चित किया जा सके कि उपयोगकर्ता डिवाइस के आधार पर सही आकार, स्क्रीन रिज़ॉल्यूशन और बहुत कुछ देख सकें।
एक प्रतिक्रियाशील छवि पॉलीफिल एपीआई के रूप में, पिक्चरफिल खुला स्रोत है और उपयोग करने के लिए स्वतंत्र है और इसे जावास्क्रिप्ट और एचटीएमएल का उपयोग करके विकसित किया गया है। मुख्य रूप से अनुप्रयोगों के सामने के छोर के लिए उपयोग किया जाता है, यह किसी भी परियोजना के लिए एक बढ़िया अतिरिक्त बना सकता है जहां अंतिम उपयोगकर्ताओं के पास अलग-अलग डिवाइस हो सकते हैं जिन पर वे एप्लिकेशन तक पहुंचते हैं।
पिक्चरफिल ब्राउज़र में पिक्चर और आईएमजी तत्वों के लिए अतिरिक्त समर्थन और सुविधाएं प्रदान करता है। यह सुनिश्चित करने का सबसे आसान तरीका है कि कोई फर्क नहीं पड़ता कि आपके उपयोगकर्ता आपकी वेबसाइट को किस डिवाइस से एक्सेस कर रहे हैं, छवियां स्वचालित रूप से उनके स्क्रीन आकार और रिज़ॉल्यूशन में समायोजित हो जाती हैं। सफ़ारी, इंटरनेट एक्सप्लोरर 9, गूगल क्रोम मोज़िला फ़ायरफ़ॉक्स, और अधिक सहित कई ब्राउज़रों के लिए पिक्चरफिल का परीक्षण किया गया है।
पिक्चरफिल के साथ शुरुआत करना
एनपीएम के माध्यम से पिक्चरफिल स्थापित करने का अनुशंसित तरीका। कृपया इसे स्थापित करने के लिए निम्न आदेश का उपयोग करें।
एनपीएम के माध्यम से पिक्चरफिल स्थापित करें
npm install picturefillनि:शुल्क JavaScript API के माध्यम से उत्तरदायी छवियां जोड़ें
ओपन-सोर्स पिक्चरफिल लाइब्रेरी जावास्क्रिप्ट डेवलपर्स को अपनी साइट पर प्रतिक्रियाशील छवियों को जोड़ने की अनुमति देती है, जिसमें यह सुनिश्चित करना शामिल है कि उच्च पिक्सेल घनत्व वाले व्यूपोर्ट वाले दर्शक उच्च रिज़ॉल्यूशन संपत्ति देख सकते हैं और यह तदनुसार समायोजित हो जाता है। इसी तरह, आप ब्राउज़र को कई छवियों के साथ प्रदान कर सकते हैं जो समान हैं लेकिन अलग-अलग आकार के साथ हैं। पिक्चरफिल आपके उपयोगकर्ता के वर्तमान व्यूपोर्ट आकार, प्रदर्शन घनत्व और वेबसाइट के लेआउट में संपत्ति के आकार के लिए सर्वोत्तम स्रोत प्रदान करेगा। पिक्चरफिल डेवलपर्स को यह तय करने की भी अनुमति देता है कि उपयोगकर्ता के व्यूपोर्ट के आधार पर कौन सी छवियां प्रदर्शित की जाती हैं। चित्र तत्व की सहायता से, आप विभिन्न आकार, ज़ूम स्तर, पहलू अनुपात आदि निर्दिष्ट कर सकते हैं।
फ्री जावास्क्रिप्ट एपीआई के माध्यम से इमेज ब्रेकपॉइंट निर्दिष्ट करें
पिक्चरफिल की एक अन्य विशेषता वेबसाइट पर स्रोत छवियों के लिए विभिन्न संकल्प विकल्पों के साथ विशिष्ट छवि ब्रेकप्वाइंट को परिभाषित करने की क्षमता है। पिक्चरफिल उन छवि प्रारूपों के लिए फ़ॉलबैक छवियों को तय करने का विकल्प भी प्रदान करता है जो कुछ प्रारूपों पर समर्थित नहीं हैं। इस प्रकार आपकी वेबसाइट छवि प्रदर्शन त्रुटियाँ नहीं दिखाएगी।
ब्राउज़र समर्थन
ओपन सोर्स पिक्चरफिल लाइब्रेरी ने विभिन्न प्रकार के ब्राउज़रों के लिए पूर्ण समर्थन प्रदान किया है। पुस्तकालय का परीक्षण किया जाता है और बड़ी संख्या में ब्राउज़रों, जैसे फ़ायरफ़ॉक्स, Google क्रोम, इंटरनेट एक्सप्लोरर, सफारी, ओपेरा, और कई अन्य पर आसानी से काम करता है। जब जावास्क्रिप्ट अक्षम होता है, तो ब्राउज़र alt विशेषता टेक्स्ट को फ़ॉलबैक के रूप में देख सकता है। पुस्तकालय में IE9 और यहां तक कि पुराने संस्करण के लिए पूर्ण समर्थन शामिल है। IE9 और बाद के संस्करण के लिए, आपको अपने चित्र टैग में स्रोत तत्वों के चारों ओर एक वीडियो तत्व आवरण लपेटना होगा। निम्न उदाहरण दिखाता है कि यह कैसे करना है।
