इमेज कॉन्टेंट डिलीवरी नेटवर्क

आपको कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) के मुख्य सिद्धांत के बारे में पहले से जानकारी होगी: यह डिस्ट्रिब्यूटेड, लेकिन आपस में जुड़े हुए सर्वर का एक नेटवर्क होता है, जो उपयोगकर्ताओं को जल्द और असरदार तरीके से एसेट डिलीवर करता है. जब कोई फ़ाइल सीडीएन की सेवा देने वाली कंपनी के खाते में अपलोड की जाती है, तो दुनिया भर के सीडीएन नेटवर्क के दूसरे नोड पर एक डुप्लीकेट फ़ाइल बन जाती है. जब कोई उपयोगकर्ता किसी फ़ाइल का अनुरोध करता है, तो डेटा को उस उपयोगकर्ता के भौगोलिक रूप से सबसे पास मौजूद नोड से भेजा जाता है. इससे इंतज़ार का समय कम होता है. नेटवर्क के कुछ समय के लिए उपलब्ध न होने या हार्डवेयर के बंद होने पर भी, सीडीएन अलग-अलग तरीके से काम करते हैं. इससे ट्रैफ़िक में बढ़ोतरी को कम करने के लिए, लोड को बैलेंस करने की सुविधा भी मिलती है.

image CDN से ये सभी फ़ायदे मिल सकते हैं, लेकिन इसमें सिर्फ़ एक मुख्य अंतर है: किसी इमेज के कॉन्टेंट को पूरी तरह से बदलने और ऑप्टिमाइज़ करने की सुविधा. यह सुविधा, उन स्ट्रिंग के आधार पर जनरेट होती है जिनका इस्तेमाल यूआरएल को ऐक्सेस करने के लिए किया जाता है.

उपयोगकर्ता, सेवा देने वाली कंपनी के प्लैटफ़ॉर्म पर कैननिकल और हाई रिज़ॉल्यूशन वाली इमेज अपलोड करेगा. इसके बाद, एक यूआरएल जनरेट होगा, ताकि उसे ऐक्सेस किया जा सके:

https://res.cloudinary.com/demo/image/upload/sample.jpg

हालांकि, इस्तेमाल किया गया सटीक सिंटैक्स एक प्रोवाइडर के हिसाब से अलग-अलग होगा, लेकिन कम से कम सभी इमेज सीडीएन आपको सोर्स इमेज के डाइमेंशन, एन्कोडिंग, और कंप्रेस करने की सेटिंग बदलने की अनुमति देते हैं. उदाहरण के लिए, Cloudinary, अपलोड की गई इमेज का डाइनैमिक साइज़ बदलने में मदद करता है. इसके लिए, यहां दिए गए सिंटैक्स का इस्तेमाल किया जाता है: h_ के बाद पिक्सल में संख्या के हिसाब से ऊंचाई, w_ उसके बाद चौड़ाई, और c_ वैल्यू. यह आपको इमेज को स्केल करने या काटने के तरीके के बारे में पूरी जानकारी देने की अनुमति देता है.

फ़ाइल के नाम और एक्सटेंशन से पहले, यूआरएल में कॉमा लगाकर अलग की गई वैल्यू जोड़कर कोई भी बदलाव किया जा सकता है. इसका मतलब है कि अपलोड की गई इमेज में ज़रूरत के हिसाब से बदलाव करने के लिए, img एलिमेंट के src से बदलाव किया जा सकता है.

<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">

जब कोई उपयोगकर्ता पहली बार इन बदलावों वाले यूआरएल पर जाता है, तो अनुपात के हिसाब से 400 पिक्सल (w_400) की चौड़ाई के हिसाब से स्केल किया गया, इमेज का एक नया वर्शन जनरेट होता है और भेज दिया जाता है. इसके बाद, उस नई फ़ाइल को पूरे सीडीएन में कैश मेमोरी में सेव किया जाता है. इससे, इसे मांग पर फिर से बनाए जाने के बजाय, उसी यूआरएल का अनुरोध करने वाले किसी भी व्यक्ति को भेजा जा सकता है.

इमेज सीडीएन सेवा देने वाली कंपनियां अलग-अलग टेक्नोलॉजी स्टैक के बेहतर इस्तेमाल और इंटिग्रेशन की सुविधा देने के लिए सॉफ़्टवेयर डेवलपमेंट किट ऑफ़र करती हैं. हालांकि, अनुमानित यूआरएल पैटर्न की मदद से, हम अपलोड की गई किसी फ़ाइल को आसानी से कारगर srcset एट्रिब्यूट में बदल सकते हैं. इसके लिए, किसी दूसरे डेवलपमेंट टूल की ज़रूरत नहीं होती:

<img
  src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
  srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
        https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
        https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
  alt="…">

हम पहले से इस्तेमाल होने वाले सिंटैक्स का इस्तेमाल करके, मैन्युअल तरीके से कंप्रेशन का लेवल तय कर सकते हैं: q_, "क्वालिटी" के लिए छोटा फ़ॉर्मैट, और इसके बाद कंप्रेशन लेवल के लिए न्यूमेरिक शॉर्टहैंड:

<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"  alt="…">

ऐसा बहुत कम होता है कि आपको इस जानकारी को मैन्युअल तरीके से शामिल करना पड़े. हालांकि, ज़्यादातर इमेज सीडीएन की ओर से दी गई बेहतरीन दमदार सुविधाओं की वजह से: पूरी तरह अपने-आप कंप्रेस होना, कोड में बदलना, और कॉन्टेंट के बारे में विकल्प चुनना.

अपने-आप कंप्रेस होना

कंप्यूटिंग पावर इमेज सीडीएन उपलब्ध होने की वजह से वे शानदार सुविधा दे पाते हैं: किसी इमेज के कॉन्टेंट का विश्लेषण करके एल्गोरिदम के हिसाब से उसका सही कंप्रेशन लेवल और एन्कोडिंग सेटिंग तय करता है. ठीक वैसे ही जैसे आप और मैं अपनी हर इमेज के लिए मैन्युअल तरीके से कंप्रेशन को ठीक करते हैं.

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

यह प्रोसेस भले ही मुश्किल लग सकती है, लेकिन इसे लागू करना बहुत आसान नहीं है: Cloudinary के लिए, इमेज के यूआरएल में q_auto जोड़ने से यह सुविधा चालू हो जाती है:

<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->

<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->

अपने-आप कोड में बदलने और कॉन्टेंट की शर्तों को तय करने की सुविधा

किसी इमेज के लिए अनुरोध मिलने पर, इमेज सीडीएन, ब्राउज़र के एचटीटीपी हेडर के ज़रिए यह तय करते हैं कि ब्राउज़र पर एसेट को किस तरह से कोड में बदला जा सकता है. ऐसा एसेट के अनुरोध के साथ-साथ, खास तौर पर Accept हेडर के ज़रिए किया जाता है. यह हेडर उन एन्कोडिंग के बारे में बताता है जिन्हें ब्राउज़र समझ सकता है. इसके लिए, हम <picture> एलिमेंट के <source> के type एट्रिब्यूट को पॉप्युलेट करने के लिए, उसी मीडिया टाइप का इस्तेमाल करते हैं.

उदाहरण के लिए, किसी एसेट यूआरएल में इमेज बदलने की सूची में f_auto पैरामीटर जोड़ने से Cloudinary को यह पता चलता है कि ब्राउज़र को बेहतर तरीके से एन्कोड करने के लिए क्या करना चाहिए:

<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">

इसके बाद सर्वर, कोड में बदलने के तरीके के साथ इमेज का एक वर्शन जनरेट करता है. साथ ही, ब्राउज़र सपोर्ट के उसी लेवल वाले आने वाले सभी उपयोगकर्ताओं के लिए, नतीजे को कैश मेमोरी में सेव करता है. इस रिस्पॉन्स में एक Content-Type हेडर शामिल होता है. यह ब्राउज़र को फ़ाइल की एन्कोडिंग के बारे में साफ़ तौर पर बताता है, चाहे फ़ाइल एक्सटेंशन कोई भी हो. हालांकि, मॉडर्न ब्राउज़र का इस्तेमाल करने वाला उपयोगकर्ता, .jpg से खत्म होने वाली फ़ाइल के लिए अनुरोध करेगा, लेकिन इस अनुरोध के साथ एक हेडर होगा, जिसमें सर्वर को बताया जाएगा कि AVIF काम करता है. साथ ही, सर्वर को AVIF की मदद से कोड में बदली गई फ़ाइल के साथ-साथ एक खास निर्देश भी भेजा जाएगा, ताकि उसे AVIF माना जाए.

कुल नतीजा एक ऐसी प्रोसेस है जिससे न सिर्फ़ आपको वैकल्पिक रूप से कोड में बदली गई फ़ाइलें बनाने और आपकी कंप्रेशन सेटिंग को मैन्युअल तरीके से बेहतर बनाने (या आपके लिए ये काम करने वाले सिस्टम को बनाए रखने) में मदद मिलती है, बल्कि उपयोगकर्ताओं तक असरदार तरीके से फ़ाइलें डिलीवर करने के लिए <picture> और type एट्रिब्यूट का इस्तेमाल करने की भी ज़रूरत नहीं पड़ती. इसलिए, सिर्फ़ srcset और sizes सिंटैक्स का इस्तेमाल करने से आपके उपयोगकर्ताओं को अब भी कोड में बदली गई इमेज मिल सकती हैं. उदाहरण के लिए, AVIF, WebP (या सिर्फ़ Safari के लिए JPEG-2000) पर वापस आ रहा है. साथ ही, सबसे बेहतर लेगसी एन्कोडिंग का फिर से इस्तेमाल कर रहा है.

इमेज सीडीएन इस्तेमाल करने के नुकसान तकनीकी से ज़्यादा लॉजिस्टिक होते हैं. इनमें से एक है कीमत. इमेज सीडीएन आम तौर पर निजी इस्तेमाल के लिए, बेहतर सुविधाएं देने वाले मुफ़्त प्लान ऑफ़र करते हैं, लेकिन इमेज एसेट बनाने के लिए अपलोड के लिए बैंडविड्थ और स्टोरेज की ज़रूरत होती है. साथ ही, इमेज बदलने के लिए सर्वर पर प्रोसेस करना, और कैश मेमोरी में सेव किए गए बदलाव के नतीजों के लिए ज़्यादा जगह की ज़रूरत होती है. इसलिए, बेहतर इस्तेमाल और ज़्यादा ट्रैफ़िक वाले ऐप्लिकेशन के लिए पैसे देकर लिए जाने वाले प्लान की ज़रूरत पड़ सकती है.