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

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

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

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

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 हेडर. यह हेडर, कोड में बदलने के उन तरीकों के बारे में बताता है जिन्हें ब्राउज़र उसी तरीके से समझ पाता है type को पॉप्युलेट करने के लिए हम मीडिया टाइप का इस्तेमाल करेंगे विशेषता <picture> एलिमेंट के <source> का एट्रिब्यूट है.

उदाहरण के लिए, जब ऐसेट के यूआरएल में इमेज ट्रांसफ़ॉर्म की सूची में 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) पर वापस जाकर, सबसे सही लेगसी एन्कोडिंग का इस्तेमाल करें.

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