इमेज कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन), वेब के लिए इमेज को ऑप्टिमाइज़ करने में बहुत अच्छे होते हैं. अपनी वेबसाइट को इमेज सीडीएन पर स्विच करने से, इमेज फ़ाइल के साइज़ में 40 से 80% तक की बचत हो सकती है. साथ ही, ज़्यादातर मामलों में ये आपकी इमेज को, बिल्ड टाइम इमेज ऑप्टिमाइज़ेशन स्क्रिप्ट से बेहतर तरीके से ऑप्टिमाइज़ कर सकते हैं.
इमेज सीडीएन क्या है?
इमेज सीडीएन, इमेज को बदलने, ऑप्टिमाइज़ करने, और डिलीवर करने में माहिर होते हैं. इन्हें, अपनी साइट पर इस्तेमाल की गई इमेज को ऐक्सेस करने और उनमें बदलाव करने के लिए, एपीआई के तौर पर भी देखा जा सकता है. इमेज सीडीएन से लोड की गई इमेज के लिए, इमेज यूआरएल से यह पता चलता है कि कौनसी इमेज लोड करनी है. साथ ही, इससे साइज़, फ़ॉर्मैट, और क्वालिटी जैसे पैरामीटर के बारे में भी पता चलता है. इसकी मदद से, अलग-अलग इस्तेमाल के उदाहरणों के लिए, किसी इमेज के वैरिएशन बनाए जा सकते हैं.
इमेज सीडीएन, इमेज ऑप्टिमाइज़ेशन स्क्रिप्ट से अलग होते हैं. इसकी वजह यह है कि इमेज सीडीएन, ज़रूरत के हिसाब से इमेज के नए वर्शन बनाते हैं. इस वजह से, आम तौर पर सीडीएन, बिल्ड स्क्रिप्ट की तुलना में, ऐसी इमेज बनाने के लिए बेहतर होते हैं जो अलग-अलग क्लाइंट के लिए ज़्यादा कस्टमाइज़ की जाती हैं.
ऑप्टिमाइज़ेशन के विकल्पों को दिखाने के लिए, इमेज सीडीएन, यूआरएल का इस्तेमाल कैसे करते हैं
इमेज सीडीएन का इस्तेमाल करने वाले इमेज यूआरएल, किसी इमेज के बारे में ज़रूरी जानकारी देते हैं. साथ ही, उन बदलावों और ऑप्टिमाइज़ेशन के बारे में बताते हैं जिन्हें उस पर लागू किया जाना चाहिए. यूआरएल फ़ॉर्मैट, इस्तेमाल की जा रही इमेज सीडीएन के हिसाब से अलग-अलग होते हैं. हालांकि, हाई लेवल पर इन सभी में एक जैसी सुविधाएं होती हैं. यहां कुछ सामान्य सुविधाएं दी गई हैं.
शुरुआत की जगह
इमेज सीडीएन, आपके डोमेन या इमेज सीडीएन के डोमेन पर हो सकता है. आम तौर पर, तीसरे पक्ष के इमेज सीडीएन, शुल्क लेकर कस्टम डोमेन का इस्तेमाल करने का विकल्प देते हैं. अपने डोमेन का इस्तेमाल करने से, बाद में इमेज के सीडीएन को स्विच करना आसान हो जाता है, क्योंकि यूआरएल में कोई बदलाव नहीं करना पड़ता.
पिछले उदाहरण में, कस्टम डोमेन के बजाय, उपयोगकर्ता के हिसाब से बनाए गए सबडोमेन के साथ इमेज सीडीएन के डोमेन ("example-cdn.com") का इस्तेमाल किया गया है.
इमेज
आम तौर पर, इमेज सीडीएन को कॉन्फ़िगर किया जा सकता है, ताकि ज़रूरत पड़ने पर इमेज को उनकी मौजूदा जगहों से अपने-आप वापस लाया जा सके. अक्सर, इमेज सीडीएन से जनरेट की गई इमेज के यूआरएल में, मौजूदा इमेज का पूरा यूआरएल शामिल करके, यह सुविधा मिलती है. उदाहरण के लिए, आपको ऐसा यूआरएल दिख सकता है जो कुछ ऐसा दिखता है: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
यह यूआरएल, https://flowers.com/daisy.jpg पर मौजूद इमेज को वापस लाकर उसे ऑप्टिमाइज़ करेगा.
हो सकता है कि अनुरोध किया गया फ़ाइल फ़ॉर्मैट (उदाहरण में, JPG) और इमेज फ़ाइल का फ़ॉर्मैट (उदाहरण में, WebP) एक जैसा न हो. content-type एचटीटीपी हेडर से ब्राउज़र को पता चलता है कि यूआरएल किस फ़ॉर्मैट में है, ताकि वह यूआरएल को सही तरीके से प्रोसेस कर सके. अगर फ़ाइल को डिस्क पर सेव किया जाता है और किसी ऐसे दूसरे प्रोग्राम में इस्तेमाल किया जाता है जो फ़ॉर्मैट को फ़ाइल एक्सटेंशन से मैच करने की उम्मीद करता है, तो इससे भ्रम की स्थिति पैदा हो सकती है.
इमेज सीडीएन में इमेज अपलोड करने का एक और तरीका है. इसके लिए, इमेज को एचटीटीपी पोस्ट अनुरोध के ज़रिए इमेज सीडीएन के एपीआई पर भेजा जाता है.
सुरक्षा कुंजी
सुरक्षा कुंजी की मदद से, दूसरे लोग आपकी इमेज के नए वर्शन नहीं बना सकते. इस सुविधा के चालू होने पर, किसी इमेज के हर नए वर्शन के लिए एक यूनीक सुरक्षा कुंजी की ज़रूरत होती है.
अगर कोई व्यक्ति इमेज के यूआरएल के पैरामीटर बदलने की कोशिश करता है, लेकिन वह मान्य सुरक्षा कुंजी नहीं देता है, तो वह नया वर्शन नहीं बना पाएगा. आपका इमेज सीडीएन, आपके लिए सुरक्षा कुंजियों को जनरेट करने और ट्रैक करने की जानकारी को मैनेज करता है.
ट्रांसफ़ॉर्मेशन
इमेज सीडीएन, इमेज को कई तरह से बदलने की सुविधा देते हैं. कुछ मामलों में, इमेज को सैकड़ों तरह से बदला जा सकता है. ये ट्रांसफ़ॉर्मेशन, यूआरएल स्ट्रिंग में बताए गए होते हैं. साथ ही, एक साथ कई ट्रांसफ़ॉर्मेशन इस्तेमाल करने पर कोई पाबंदी नहीं होती. वेब पर इमेज की परफ़ॉर्मेंस के लिए, इमेज का साइज़, पिक्सल घनत्व, फ़ॉर्मैट, और कंप्रेस करने का तरीका सबसे अहम होता है. इन बदलावों की वजह से, इमेज सीडीएन पर स्विच करने से आम तौर पर आपकी साइट की इमेज फ़ाइलें छोटी हो जाती हैं.
आम तौर पर, परफ़ॉर्मेंस में बदलाव करने के लिए सबसे सही सेटिंग होती है. इसलिए, कुछ इमेज सीडीएन, इन बदलावों के लिए "अपने-आप" मोड का इस्तेमाल करते हैं. उदाहरण के लिए, यह बताने के बजाय कि इमेज को WebP फ़ॉर्मैट में बदला जाए, सीडीएन को सबसे सही फ़ॉर्मैट को अपने-आप चुनने और दिखाने की अनुमति दी जा सकती है. इमेज सीडीएन, इन सिग्नल के साथ-साथ अन्य सिग्नल का इस्तेमाल करके, इमेज को बदलने का सबसे अच्छा तरीका तय कर सकता है:
- क्लाइंट के सुझाव (उदाहरण के लिए, व्यूपोर्ट की चौड़ाई, डीपीआर, और इमेज की चौड़ाई)
Save-Dataहेडर- User-Agent के अनुरोध का हेडर
- Network Information API
उदाहरण के लिए, इमेज सीडीएन, Chrome ब्राउज़र पर AVIF, Edge ब्राउज़र पर WebP, और किसी बहुत पुराने ब्राउज़र पर JPEG दिखा सकता है. अपने-आप सेट होने वाली सेटिंग लोकप्रिय हैं, क्योंकि इनकी मदद से इमेज को ऑप्टिमाइज़ करने के लिए, इमेज सीडीएन की विशेषज्ञता का फ़ायदा लिया जा सकता है. साथ ही, इमेज सीडीएन के साथ नई टेक्नोलॉजी काम करने लगने पर, अपने कोड में बदलाव करने की ज़रूरत नहीं होती.
इमेज सीडीएन के टाइप
इमेज सीडीएन की दो मुख्य कैटगरी होती हैं: खुद मैनेज किए जाने वाले और तीसरे पक्ष के मैनेज किए जाने वाले.
डेवलपर की ओर से मैनेज किए जाने वाले इमेज सीडीएन
खुद मैनेज किए जाने वाले सीडीएन, उन साइटों के लिए एक अच्छा विकल्प हो सकते हैं जिनमें इंजीनियरिंग स्टाफ़ मौजूद है और जो अपने इन्फ़्रास्ट्रक्चर को मैनेज करने में सहज हैं.
- Thumbor, खुद मैनेज किया जाने वाला सबसे लोकप्रिय इमेज सीडीएन है. यह ओपन-सोर्स है और इसका इस्तेमाल बिना किसी शुल्क के किया जा सकता है. हालांकि, इसमें ज़्यादातर कमर्शियल सीडीएन की तुलना में कम सुविधाएं मिलती हैं. साथ ही, इसका दस्तावेज़ भी कुछ हद तक सीमित है. thumbor का इस्तेमाल करने वाली साइटों में Wikipedia, Square, और 99designs शामिल हैं. इसे सेट अप करने के निर्देशों के लिए, Thumbor इमेज सीडीएन को इंस्टॉल करने का तरीका देखें.
- कल्पना
- Imagor
तीसरे पक्ष के इमेज सीडीएन
तीसरे पक्ष के इमेज सीडीएन, इमेज सीडीएन को सेवा के तौर पर उपलब्ध कराते हैं. जिस तरह क्लाउड सेवा देने वाली कंपनियां, शुल्क लेकर सर्वर और अन्य इन्फ़्रास्ट्रक्चर उपलब्ध कराती हैं उसी तरह इमेज सीडीएन, शुल्क लेकर इमेज को ऑप्टिमाइज़ करने और डिलीवर करने की सुविधा देते हैं. तीसरे पक्ष के इमेज CDN, इमेज को होस्ट करने वाली टेक्नोलॉजी को मैनेज करते हैं. इसलिए, आम तौर पर किसी CDN का इस्तेमाल तुरंत शुरू किया जा सकता है. हालांकि, किसी बड़ी साइट को पूरी तरह माइग्रेट करने में ज़्यादा समय लग सकता है. तीसरे पक्ष के इमेज सीडीएन के लिए, आम तौर पर इस्तेमाल के टीयर के हिसाब से कीमत तय की जाती है. साथ ही, ज़्यादातर इमेज सीडीएन, अपने प्रॉडक्ट को आज़माने के लिए, मुफ़्त टीयर या मुफ़्त में आज़माने की सुविधा देते हैं.
इमेज के लिए सीडीएन चुनना
इमेज सीडीएन के लिए कई अच्छे विकल्प मौजूद हैं. कुछ में दूसरों की तुलना में ज़्यादा सुविधाएं होती हैं, लेकिन इनमें से किसी भी सुविधा की मदद से, इमेज में मौजूद बाइट को कम किया जा सकता है. इससे आपके पेज तेज़ी से लोड होते हैं. इमेज सीडीएन चुनते समय, सुविधाओं के सेट के अलावा, इन बातों का भी ध्यान रखें: कीमत, सहायता, दस्तावेज़, और सेटअप या माइग्रेशन में आसानी.
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर असर
कई वेबसाइटों पर, इमेज उपयोगकर्ता अनुभव का अहम हिस्सा होती हैं. इसलिए, वे साइट के सबसे बड़े कॉन्टेंटफ़ुल पेंट में अहम भूमिका निभाती हैं. इमेज सीडीएन का इस्तेमाल करने पर, आपको इन बातों का ध्यान रखना होगा:
- सीडीएन से दिखाई जाने वाली इमेज, क्रॉस-ऑरिजिन सर्वर से मिल सकती हैं. इससे आपकी साइट के कनेक्शन सेटअप होने में लगने वाला समय बढ़ सकता है. जब भी हो सके, किसी ऐसे इमेज CDN का इस्तेमाल करें जो प्राइमरी ऑरिजिन के ज़रिए प्रॉक्सी करता हो. इससे, ब्राउज़र को कनेक्ट करने के लिए अतिरिक्त ऑरिजिन नहीं जोड़ने पड़ते. इसका असर, प्राइमरी ऑरिजिन पर खुद की इमेज होस्ट करने जैसा ही होता है.
- एलसीपी इमेज एलिमेंट पर,
fetchpriorityएट्रिब्यूट की वैल्यू के तौर पर"high"का इस्तेमाल करें, ताकि ब्राउज़र उस इमेज को जल्द से जल्द लोड करना शुरू कर सके. - अगर शुरुआती एचटीएमएल में कोई इमेज तुरंत नहीं दिखती है, तो एलसीपी की संभावित इमेज के लिए
rel=preloadके संकेत का इस्तेमाल करें, ताकि ब्राउज़र उस इमेज को समय से पहले लोड कर सके. - अगर आपके पास अपने ऑरिजिन के ज़रिए प्रॉक्सी करने का विकल्प नहीं है और ब्राउज़र को पेज लोड होने के बाद ही पता चलता है कि कौनसी इमेज लोड करनी है, तो क्रॉस-ऑरिजिन इमेज सीडीएन से जल्द से जल्द कनेक्शन सेट अप करें. इससे, एलसीपी की संभावित इमेज के लिए, संसाधन लोड होने का समय कम हो जाएगा.