इमेज को ऑप्टिमाइज़ करने के लिए, इमेज सीडीएन का इस्तेमाल करें

Jeremy Wagner

Katie Hempenius

Barry Pollard

इमेज सीडीएन का इस्तेमाल क्यों करें?

इमेज कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन), इमेज को बेहतर तरीके से ऑप्टिमाइज़ करते हैं. इमेज सीडीएन का इस्तेमाल करने से, इमेज फ़ाइल के साइज़ में 40–80% की बचत हो सकती है. सैद्धांतिक तौर पर, सिर्फ़ बिल्ड स्क्रिप्ट का इस्तेमाल करके एक जैसे नतीजे पाए जा सकते हैं, लेकिन ऐसा कम ही होता है.

इमेज सीडीएन क्या है?

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

इमेज सीडीएन, इमेज के यूआरएल में पैरामीटर के आधार पर बदलाव कर सकते हैं, इसके कुछ उदाहरण.

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

इमेज सीडीएन, ऑप्टिमाइज़ेशन के विकल्पों को दिखाने के लिए, यूआरएल का इस्तेमाल कैसे करते हैं

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

शुरुआत की जगह

इमेज सीडीएन आपके अपने डोमेन या आपकी इमेज सीडीएन के डोमेन पर लाइव हो सकता है. तीसरे पक्ष की इमेज के सीडीएन, आम तौर पर पैसे चुकाकर कस्टम डोमेन इस्तेमाल करने का विकल्प देते हैं. अपने डोमेन का इस्तेमाल करने से, बाद में इमेज सीडीएन को आसानी से स्विच किया जा सकता है, क्योंकि यूआरएल में किसी तरह के बदलाव की ज़रूरत नहीं होती.

ऊपर दिए गए उदाहरण में, कस्टम डोमेन के बजाय, पसंद के हिसाब से बनाए गए सबडोमेन के साथ, इमेज सीडीएन के डोमेन ("example-cdn.com") का इस्तेमाल किया गया है.

Image

आम तौर पर, इमेज सीडीएन को इस तरह कॉन्फ़िगर किया जा सकता है कि पहले से मौजूद जगहों से, ज़रूरत पड़ने पर इमेज को अपने-आप वापस लाया जा सके. यह सुविधा अक्सर तब मिलती है, जब इमेज सीडीएन से जनरेट की गई इमेज के यूआरएल में मौजूदा इमेज का पूरा यूआरएल शामिल किया जाता है. उदाहरण के लिए, आपको ऐसा यूआरएल दिख सकता है: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. यह यूआरएल, https://flowers.com/daisy.jpg पर मौजूद इमेज को फिर से हासिल और ऑप्टिमाइज़ करेगा.

ध्यान दें: जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है, फ़ाइल एक्सटेंशन का अनुरोध किया गया (.jpg उदाहरण में दिया गया है) और इमेज फ़ाइल फ़ॉर्मैट, दोनों एक जैसे न हों. content-type एचटीटीपी हेडर, ब्राउज़र को बताएगा कि यूआरएल किस फ़ॉर्मैट में है, ताकि वह उसे ठीक से प्रोसेस कर सके. हालांकि, इससे कुछ हद तक भ्रम की स्थिति पैदा हो सकती है. ऐसा तब होता है, जब फ़ाइल को डिस्क पर सेव किया जाता है और कोई दूसरा प्रोग्राम उस फ़ाइल का इस्तेमाल करता है जो उम्मीद करता है कि फ़ाइल फ़ॉर्मैट, फ़ाइल एक्सटेंशन से मेल खाए.

किसी इमेज सीडीएन में इमेज अपलोड करने का एक और तरीका यह है कि आप उन्हें एचटीटीपी पोस्ट अनुरोध के ज़रिए इमेज सीडीएन के एपीआई पर भेजें.

सुरक्षा कुंजी

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

ट्रांसफ़ॉर्मेशन

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

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

• क्लाइंट के संकेत (उदाहरण के लिए, व्यूपोर्ट की चौड़ाई, DPR, और इमेज की चौड़ाई)
• Save-Data हेडर
• User-Agent अनुरोध का हेडर
• नेटवर्क जानकारी एपीआई

उदाहरण के लिए, इमेज CDN Chrome ब्राउज़र पर AVIF, Edge ब्राउज़र पर WebP, और बहुत पुराने ब्राउज़र के लिए JPEG फ़ॉर्मैट का इस्तेमाल कर सकता है. अपने-आप काम करने वाली सेटिंग लोकप्रिय हैं, क्योंकि इनकी मदद से इमेज सीडीएन की मदद से काम करने वाली नई टेक्नोलॉजी को अपनाने के लिए, इमेज को ऑप्टिमाइज़ करने में सीडीएन की अहम विशेषज्ञता का फ़ायदा लिया जा सकता है.

इमेज सीडीएन के टाइप

इमेज सीडीएन को दो कैटगरी में बांटा जा सकता है: खुद से मैनेज किया जाता है और तीसरे पक्ष से मैनेज किया जाता है.

खुद से मैनेज की जाने वाली इमेज के सीडीएन

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

• thoughor, खुद से मैनेज की जाने वाली सबसे लोकप्रिय इमेज सीडीएन है. यह ओपन सोर्स और मुफ़्त में इस्तेमाल किया जा सकता है, लेकिन ज़्यादातर व्यावसायिक सीडीएन के मुकाबले इसमें आम तौर पर कम सुविधाएं होती हैं. साथ ही, इसके दस्तावेज़ सीमित हैं. Wikipedia, Square, और 99designs ऐसी साइट हैं जो थंबर का इस्तेमाल करती हैं. थंबर इमेज सीडीएन को इंस्टॉल करने का तरीका लेख पढ़ें और इसे सेट अप करने के निर्देश देखें.
• इमैजिनरी
• इमेजर

तीसरे पक्ष की इमेज सीडीएन

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

इमेज CDN चुनना

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

कोई फ़ैसला लेने से पहले, इन्हें खुद आज़माकर देखें. इससे आपको मदद मिल सकती है. नीचे आपको कई इमेज सीडीएन इस्तेमाल करने के तरीके के बारे में निर्देशों वाले कोडलैब दिए गए हैं.

सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर असर

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

1. सीडीएन से दिखाई गई इमेज, क्रॉस-ऑरिजिन सर्वर से ली जा सकती हैं. इसमें कनेक्शन को सेटअप करने में ज़्यादा समय लगता है. जब भी हो सके, तब इमेज सीडीएन का इस्तेमाल करें जो प्राइमरी ऑरिजिन से प्रॉक्सी करता हो, ताकि कनेक्ट करने के लिए ब्राउज़र से अलग से ऑरिजिन न जोड़े जा रहे हों. इसका असर, प्राइमरी ऑरिजिन पर खुद को होस्ट करने वाली इमेज जैसा होता है.
2. एलसीपी इमेज एलिमेंट पर, fetchpriority एट्रिब्यूट की वैल्यू "high" का इस्तेमाल करें, ताकि ब्राउज़र उस इमेज को जल्द से जल्द लोड कर सके.
3. अगर शुरुआती एचटीएमएल में कोई इमेज तुरंत नहीं दिखती, तो अपने एलसीपी कैंडिडेट की इमेज के लिए rel=preload हिंट का इस्तेमाल करें. इससे, ब्राउज़र उस इमेज को समय से पहले लोड कर सकेगा.
4. अगर आपके ऑरिजिन से प्रॉक्सी करना संभव नहीं है और पेज लोड होने के दौरान, लोड होने वाली सटीक इमेज का पता नहीं चलेगा, तो आपको क्रॉस-ऑरिजिन इमेज सीडीएन से जल्द से जल्द कनेक्ट करना चाहिए. इससे रिसॉर्स लोड होने के उस चरण को कम किया जा सकेगा जो आपके पेज की एलसीपी कैंडिडेट इमेज का हो सकता है.

इमेज सीडीएन ज़रूरी टूल हैं. इनकी मदद से, इमेज को मैन्युअल तरीके से ऑप्टिमाइज़ करने में परेशानी नहीं होती. इसलिए, इस पर ध्यान देना चाहिए. हालांकि, हमेशा की तरह कुछ चीज़ों पर ध्यान दिया जाना चाहिए. अपनी वेबसाइट के एलसीपी कैंडिडेट की इमेज पर नज़र रखने और ज़रूरत के हिसाब से हिंट जोड़ने से, मुख्य अनुरोधों में देरी को कम किया जा सकता है.