पब्लिश किया गया: 8 अक्टूबर, 2025
इमेज डाउनलोड होने में लगने वाले समय को कम करने से, पेज और एलसीपी के लोड होने में लगने वाले समय को कम किया जा सकता है.
अहम जानकारी जनरेट न होने की वजह
इस अहम जानकारी में, उन इमेज को हाइलाइट किया जाएगा जिनका डाउनलोड साइज़ ज़रूरत से ज़्यादा है. बाइट में अनुमानित बचत का हिसाब लगाने के लिए, इमेज के डाउनलोड साइज़ की तुलना इमेज फ़ॉर्मैट के लिए, बाइट/पिक्सल के बेहतर अनुपात से की जाती है.
इमेज डाउनलोड होने में लगने वाला समय कम करने का तरीका
इस अहम जानकारी में, इमेज को डाउनलोड करने में लगने वाले समय को कम करने के लिए कई रणनीतियां सुझाई गई हैं. ये रणनीतियां, इमेज के डिसप्ले किए गए साइज़ और फ़ाइल फ़ॉर्मैट पर निर्भर करती हैं. इमेज सीडीएन को डिप्लॉय करना, इन सभी रणनीतियों के लिए बहुत मददगार हो सकता है.
इमेज के कंप्रेसन फ़ैक्टर को बढ़ाना
ज़्यादातर इमेज फ़ॉर्मैट में कंप्रेसन लेवल की सुविधा होती है. इसे इमेज की क्वालिटी को कम करके, इमेज फ़ाइल के साइज़ को बेहतर बनाने के लिए इस्तेमाल किया जा सकता है. इमेज के कंप्रेसन फ़ैक्टर को ऑप्टिमाइज़ करने के लिए, ImageOptim, Squoosh, और Imagemin जैसे इमेज टूल इस्तेमाल किए जा सकते हैं.
इमेज के नए फ़ॉर्मैट का इस्तेमाल करना
AVIF और WebP, इमेज फ़ॉर्मैट हैं. इनकी क्वालिटी और कंप्रेस करने की क्षमता, JPEG और PNG जैसे पुराने फ़ॉर्मैट से बेहतर होती है. इमेज के डाउनलोड साइज़ को कम करने के लिए, उन्हें इन नए फ़ॉर्मैट में कोड करना एक अच्छी रणनीति है.
AVIF फ़ॉर्मैट, सभी मुख्य ब्राउज़र के नए वर्शन पर काम करता है. साथ ही, यह एक ही क्वालिटी सेटिंग वाले अन्य फ़ॉर्मैट की तुलना में, फ़ाइल के छोटे साइज़ का विकल्प देता है. AVIF के बारे में ज़्यादा जानने के लिए, AVIF फ़ॉर्मैट में इमेज दिखाने से जुड़ा कोडलैब देखें.
WebP फ़ॉर्मैट, सभी मुख्य ब्राउज़र पर काम करता है. साथ ही, यह वेब पर इमेज को दो तरीकों से कंप्रेस करता है. पहला तरीका लॉसलेस, जिसमें इमेज को कोई नुकसान नहीं पहुंचता और दूसरा लॉसी, जिसमें इमेज के डेटा की क्वालिटी थोड़ी खराब हो जाती है. WebP के बारे में ज़्यादा जानने के लिए, WebP इमेज का इस्तेमाल करना लेख पढ़ें.
ऐनिमेटेड कॉन्टेंट के लिए वीडियो फ़ॉर्मैट का इस्तेमाल करना
वीडियो की तुलना में, बड़े GIF से ऐनिमेशन वाला कॉन्टेंट नहीं बनाया जा सकता. नेटवर्क बाइट बचाने के लिए, GIF का इस्तेमाल करने के बजाय, ऐनिमेशन के लिए MPEG4/WebM वीडियो फ़ॉर्मैट और स्टैटिक इमेज के लिए, PNG/WebP फ़ॉर्मैट का इस्तेमाल करें.
GIF इमेज को वीडियो से बदलने का तरीका जानने के लिए, पेज को तेज़ी से लोड करने के लिए, ऐनिमेटेड GIF की जगह वीडियो का इस्तेमाल करना लेख पढ़ें.
स्क्रीन के हिसाब से इमेज का साइज़ बदलने की सुविधा चालू करना
आदर्श रूप से, आपके पेज को कभी भी ऐसी इमेज नहीं दिखानी चाहिए जो उपयोगकर्ता की स्क्रीन पर रेंडर किए गए वर्शन से बड़ी हों. इससे ज़्यादा साइज़ की इमेज का इस्तेमाल करने से, सिर्फ़ बाइट बर्बाद होती हैं और पेज लोड होने में ज़्यादा समय लगता है.
इसके लिए, वेक्टर पर आधारित इमेज फ़ॉर्मैट, जैसे कि SVG का इस्तेमाल किया जा सकता है. एसवीजी इमेज को कोड की सीमित मात्रा के साथ किसी भी साइज़ में बदला जा सकता है. ज़्यादा जानने के लिए, जटिल आइकॉन को SVG से बदलें लेख पढ़ें.
अगर वेक्टर पर आधारित इमेज का इस्तेमाल नहीं किया जा सकता, तो "रिस्पॉन्सिव" इमेज का इस्तेमाल करना सबसे अच्छा होता है. रिस्पॉन्सिव इमेज की मदद से, हर इमेज के कई वर्शन जनरेट किए जाते हैं. इसके बाद, मीडिया क्वेरी, व्यूपोर्ट डाइमेंशन वगैरह का इस्तेमाल करके, यह तय किया जाता है कि एचटीएमएल या सीएसएस में किस वर्शन का इस्तेमाल करना है.
उदाहरण के लिए, <img> एलिमेंट में srcset और sizes एट्रिब्यूट होते हैं. इनकी मदद से, अलग-अलग साइज़ के लिए इमेज के यूआरएल तय किए जा सकते हैं:
अगर आपको इमेज पूरी तरह से बदलनी है, तो <picture> एलिमेंट का इस्तेमाल करें:
ज़्यादा जानने के लिए, रिस्पॉन्सिव इमेज और picture एलिमेंट देखें.
स्टैक के हिसाब से सलाह
इस अहम जानकारी में, स्टैक के हिसाब से दिशा-निर्देश भी दिए जाते हैं. ये दिशा-निर्देश, इन टेक्नोलॉजी का इस्तेमाल करने वाले पेजों के लिए होते हैं:
एएमपी
- अपने सभी
amp-imgकॉम्पोनेंट को WebP फ़ॉर्मैट में दिखाएं. साथ ही, अन्य ब्राउज़र के लिए सही फ़ॉलबैक तय करें. - ऐनिमेशन वाले कॉन्टेंट के लिए,
amp-animका इस्तेमाल करें. इससे, कॉन्टेंट के ऑफ़स्क्रीन होने पर सीपीयू का इस्तेमाल कम होगा.
Drupal
- ऐसे मॉड्यूल का इस्तेमाल करें जो क्वालिटी को बनाए रखते हुए, साइट पर अपलोड होने वाली इमेज के साइज़ को अपने-आप कम और ज़्यादा कर सके.
- पक्का करें कि साइट पर रेंडर की गई सभी इमेज के लिए, Drupal की रिस्पॉन्सिव इमेज स्टाइल का इस्तेमाल किया जा रहा हो.
Joomla
किसी ऐसे प्लग इन या सेवा का इस्तेमाल करें जो आपकी अपलोड की गई इमेज को अपने-आप ही सबसे सही फ़ॉर्मैट में बदल दे.
Magento
तीसरे पक्ष के ऐसे Magento एक्सटेंशन का इस्तेमाल करें जो इमेज को ऑप्टिमाइज़ करता हो.
WordPress
ऐसे इमेज ऑप्टिमाइज़ेशन WordPress प्लग इन का इस्तेमाल करें जो आपकी क्वालिटी बरकरार रखते हुए आपकी इमेज कंप्रेस करता है.