इमेज कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन), वेब के लिए इमेज को ऑप्टिमाइज़ करने का बेहतरीन तरीका है. अपनी वेबसाइट को इमेज सीडीएन पर स्विच करने से, इमेज फ़ाइल के साइज़ में 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हेडर- उपयोगकर्ता एजेंट के अनुरोध का हेडर
- Network Information API
उदाहरण के लिए, इमेज सीडीएन, Chrome ब्राउज़र को AVIF, Edge ब्राउज़र को WebP, और बहुत पुराने ब्राउज़र को JPEG फ़ॉर्मैट में इमेज दिखा सकता है. ऑटो सेटिंग काफ़ी लोकप्रिय हैं, क्योंकि इनकी मदद से इमेज सीडीएन की विशेषज्ञता का फ़ायदा लिया जा सकता है. इससे इमेज को ऑप्टिमाइज़ करने के लिए, अपने कोड में बदलाव करने की ज़रूरत नहीं पड़ती. साथ ही, इमेज सीडीएन के नई टेक्नोलॉजी के साथ काम करने पर, उन्हें आसानी से अपनाया जा सकता है.
इमेज सीडीएन के टाइप
इमेज सीडीएन दो तरह के होते हैं: खुद से मैनेज किए जाने वाले और तीसरे पक्ष से मैनेज किए जाने वाले.
खुद मैनेज किए जाने वाले इमेज सीडीएन
खुद मैनेज किए जाने वाले सीडीएन, उन साइटों के लिए एक अच्छा विकल्प हो सकते हैं जिनके पास इंजीनियरिंग स्टाफ़ है और जो अपने इन्फ़्रास्ट्रक्चर को खुद मैनेज कर सकते हैं.
- Thumbor, खुद मैनेज किया जाने वाला सबसे लोकप्रिय इमेज सीडीएन है. यह ओपन-सोर्स है और इसे बिना किसी शुल्क के इस्तेमाल किया जा सकता है. हालांकि, इसमें व्यावसायिक तौर पर इस्तेमाल किए जाने वाले ज़्यादातर सीडीएन की तुलना में कम सुविधाएं होती हैं. साथ ही, इसके दस्तावेज़ भी सीमित होते हैं. Thumbor का इस्तेमाल करने वाली साइटों में Wikipedia, Square, और 99designs शामिल हैं. इसे सेट अप करने के निर्देशों के लिए, Thumbor इमेज सीडीएन को इंस्टॉल करने का तरीका देखें.
- Imaginary
- Imagor
तीसरे पक्ष के इमेज सीडीएन
तीसरे पक्ष के इमेज सीडीएन, इमेज सीडीएन को एक सेवा के तौर पर उपलब्ध कराते हैं. जिस तरह क्लाउड सेवा देने वाली कंपनियां, शुल्क लेकर सर्वर और अन्य इन्फ़्रास्ट्रक्चर उपलब्ध कराती हैं उसी तरह इमेज सीडीएन, शुल्क लेकर इमेज को ऑप्टिमाइज़ करने और उन्हें डिलीवर करने की सुविधा देते हैं. तीसरे पक्ष के इमेज सीडीएन, बुनियादी टेक्नोलॉजी को मैनेज करते हैं. इसलिए, आम तौर पर इनका इस्तेमाल तुरंत शुरू किया जा सकता है. हालांकि, किसी बड़ी साइट को पूरी तरह से माइग्रेट करने में ज़्यादा समय लग सकता है. तीसरे पक्ष के इमेज सीडीएन की कीमत, आम तौर पर इस्तेमाल के टियर के हिसाब से तय होती है. ज़्यादातर इमेज सीडीएन, या तो फ़्री टियर या मुफ़्त में आज़माने की सुविधा देते हैं, ताकि आप उनके प्रॉडक्ट को आज़मा सकें.
कोई इमेज सीडीएन चुनें
इमेज सीडीएन के लिए कई अच्छे विकल्प मौजूद हैं. कुछ टूल में दूसरों के मुकाबले ज़्यादा सुविधाएं होती हैं. हालांकि, इनमें से कोई भी टूल आपकी इमेज के बाइट को कम करने में मदद कर सकता है. इससे आपके पेज तेज़ी से लोड हो सकते हैं. सुविधाओं के सेट के अलावा, इमेज सीडीएन चुनते समय इन बातों का भी ध्यान रखना चाहिए: लागत, सहायता, दस्तावेज़, और सेटअप या माइग्रेशन में आसानी.
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर पड़ने वाले असर
इमेज, कई वेबसाइटों पर उपयोगकर्ता अनुभव का एक अहम हिस्सा होती हैं. इसलिए, ये किसी साइट के सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय के लिए एक अहम फ़ैक्टर होती हैं. अगर आपको इमेज सीडीएन का इस्तेमाल करना है, तो इन बातों का ध्यान रखें:
- सीडीएन से दिखाई जाने वाली इमेज, क्रॉस-ऑरिजिन सर्वर से आ सकती हैं. इससे आपकी साइट का कनेक्शन सेटअप करने में ज़्यादा समय लग सकता है. जब भी संभव हो, ऐसी इमेज सीडीएन का इस्तेमाल करें जो प्राइमरी ऑरिजिन के ज़रिए प्रॉक्सी करती हो. इससे आपको ब्राउज़र को कनेक्ट करने के लिए, अतिरिक्त ऑरिजिन जोड़ने की ज़रूरत नहीं पड़ेगी. इसका असर, प्राइमरी ऑरिजिन पर इमेज को खुद होस्ट करने जैसा ही होता है.
- एलसीपी इमेज एलिमेंट पर,
fetchpriorityएट्रिब्यूट की वैल्यू"high"इस्तेमाल करें, ताकि ब्राउज़र उस इमेज को जल्द से जल्द लोड करना शुरू कर सके. - अगर शुरुआती एचटीएमएल में कोई इमेज तुरंत नहीं दिखती है, तो एलसीपी कैंडिडेट इमेज के लिए
rel=preloadहिंट का इस्तेमाल करें, ताकि ब्राउज़र उस इमेज को समय से पहले लोड कर सके. - अगर आपके पास ओरिजिन के ज़रिए प्रॉक्सी करने का विकल्प नहीं है और ब्राउज़र को पेज लोड होने के बाद ही पता चलेगा कि कौनसी इमेज लोड करनी है, तो क्रॉस-ओरिजिन इमेज सीडीएन से जल्द से जल्द कनेक्शन सेट अप करें. इससे एलसीपी कैंडिडेट इमेज के लिए, रिसॉर्स लोड होने में कम समय लगेगा.