इमेज की डिलीवरी बेहतर बनाएं

पब्लिश होने की तारीख: 8 अक्टूबर, 2025

इमेज डाउनलोड होने में लगने वाले समय को कम करने से, पेज और एलसीपी के लोड होने में लगने वाले समय को कम किया जा सकता है.

अहम जानकारी जनरेट न होने की वजह

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

DevTools में इमेज डिलीवरी को बेहतर बनाने से जुड़ी अहम जानकारी.

इमेज डाउनलोड होने में लगने वाला समय कम करने का तरीका

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

इमेज के कंप्रेसन फ़ैक्टर को बढ़ाना

ज़्यादातर इमेज फ़ॉर्मैट में कंप्रेसन लेवल की सुविधा होती है. इसे इमेज की क्वालिटी को कम करके, इमेज फ़ाइल का साइज़ कम करने के लिए इस्तेमाल किया जा सकता है. इमेज के कंप्रेसन फ़ैक्टर को ऑप्टिमाइज़ करने के लिए, 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 प्लग इन का इस्तेमाल करें जो आपकी क्वालिटी बरकरार रखते हुए आपकी इमेज कंप्रेस करता है.

संसाधन