तेज़ी से लोड होने में लगने वाले समय और अन्य चीज़ों के लिए इमेज नीतियां

इमेज से जुड़ी ऑप्टिमाइज़ की गई नीतियों का इस्तेमाल करके, पक्का करें कि आपकी साइट पर सबसे अच्छी परफ़ॉर्म करने वाली इमेज का इस्तेमाल किया जा रहा हो.

Luna Lu
Luna Lu

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

हैरानी की बात है कि वेब पर मौजूद आधी से ज़्यादा साइटें, खराब तरीके से कंप्रेस की गई या बेवजह बड़ी इमेज दिखा रही हैं. इसलिए, इमेज को ऑप्टिमाइज़ करके, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है.

आपके मन में यह सवाल आ सकता है कि मुझे कैसे पता चलेगा कि मेरी इमेज ऑप्टिमाइज़ की गई हैं या नहीं और मुझे इन्हें कैसे ऑप्टिमाइज़ करना चाहिए? हम इमेज को ऑप्टिमाइज़ करने के लिए, सुविधा से जुड़ी नीतियों के नए सेट के साथ एक्सपेरिमेंट कर रहे हैं: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images, औरunoptimized-lossless-images-strict. अब सभी ऑरिजिन ट्रायल के लिए उपलब्ध हैं.

इमेज के लिए ऑप्टिमाइज़ की गई नीतियां

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

oversized-images

oversized-images अनुमतियों की नीति, किसी इमेज के कंटेनर साइज़ के हिसाब से, इमेज के डाइमेंशन पर पाबंदी लगाती है.

जब कोई दस्तावेज़ oversized-images नीति का इस्तेमाल करता है, तो किसी भी डाइमेंशन में, <img> एलिमेंट का इंट्रिन्सिक रिज़ॉल्यूशन, कंटेनर के साइज़ से X गुना ज़्यादा होने पर, उसे प्लेसहोल्डर इमेज से बदल दिया जाएगा.

क्यों?

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

उदाहरण

इस बारे में कुछ उदाहरणों से समझा जा सकता है. यहां इमेज के डिसप्ले साइज़ को आधा करने पर, डिफ़ॉल्ट तौर पर होने वाली प्रोसेस के बारे में बताया गया है.

साइज़ बदलने का डिफ़ॉल्ट तरीका.
साइज़ बदलने का डिफ़ॉल्ट तरीका.

अनुमतियों से जुड़ी यहां दी गई नीति लागू करने पर, मुझे प्लेसहोल्डर इमेज दिखती है.

Permissions-Policy: oversized-images *(2);

जब इमेज, कंटेनर के लिए बहुत बड़ी हो.
जब इमेज, कंटेनर के लिए बहुत बड़ी हो.

सिर्फ़ चौड़ाई या ऊंचाई कम करने पर भी मुझे मिलते-जुलते नतीजे मिलते हैं.

चौड़ाई का साइज़ बदला गया ऊंचाई का साइज़ बदला गया
चौड़ाई और ऊंचाई का साइज़ बदलें.

कैसे इस्तेमाल करें

खास जानकारी के लिए, oversized-images नीति के बारे में इनमें से किसी एक तरीके से बताया जा सकता है:

  • Permissions-Policy एचटीटीपी हेडर
  • <iframe> allow एट्रिब्यूट

oversized-images नीति का एलान करने के लिए, आपको यह जानकारी देनी होगी:

  • सुविधा का नाम, oversized-images (ज़रूरी है)
  • ऑरिजिन की सूची (ज़रूरी नहीं)
  • ऑरिजिन के लिए थ्रेशोल्ड वैल्यू (यानी, डाउनस्केलिंग अनुपात X), जो ब्रैकेट में दी गई हैं (ज़रूरी नहीं)

हमारा सुझाव है कि आप इमेज को 2.0 या उससे कम के अनुपात में छोटा करें. अलग-अलग रिज़ॉल्यूशन वाली रिस्पॉन्सिव इमेज का इस्तेमाल करें, ताकि अलग-अलग स्क्रीन साइज़, रिज़ॉल्यूशन वगैरह पर इमेज बेहतर तरीके से दिखाई जा सकें.

और उदाहरण

Permissions-Policy: oversized-images *(2.0)

यह नीति, थ्रेशोल्ड वैल्यू 2.0 वाले सभी ऑरिजिन पर लागू होती है. किसी भी ऐसे <img> एलिमेंट को अनुमति नहीं दी जाती है जिसमें इमेज का डाउनस्केलिंग रेशियो 2.0 से ज़्यादा हो. साथ ही, उसे प्लेसहोल्डर इमेज से बदल दिया जाएगा.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

यह नीति, साइट के ऑरिजिन पर लागू की जाती है. इसके लिए, थ्रेशोल्ड वैल्यू 1.5 होती है. टॉप-लेवल ब्राउज़िंग कॉन्टेक्स्ट और एक ही ऑरिजिन के नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट में मौजूद <img> एलिमेंट, सिर्फ़ तब सामान्य तरीके से रेंडर होंगे, जब डाउनस्केलिंग रेशियो 1.5 से कम या उसके बराबर हो. बाकी सभी जगहों पर <img> एलिमेंट सामान्य रूप से रेंडर होंगे.

unoptimized-{lossy,lossless}-images

unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict सुविधा से जुड़ी नीतियां, इमेज के रिज़ॉल्यूशन के हिसाब से, इमेज फ़ाइल के साइज़ पर पाबंदी लगाती हैं:

unoptimized-lossy-images
लोसलेस फ़ॉर्मैट में, हर पिक्सल के लिए बाइट का अनुपात X से ज़्यादा नहीं होना चाहिए. साथ ही, 1 केबी का ओवरहेड ऐलाउंस भी होना चाहिए. W x H इमेज के लिए, फ़ाइल साइज़ थ्रेशोल्ड का हिसाब W x H x X + 1024 के हिसाब से लगाया जाता है.
unoptimized-lossless-images
बिना डेटा हानि वाले फ़ॉर्मैट में, हर पिक्सल के लिए बाइट का अनुपात X से ज़्यादा नहीं होना चाहिए. साथ ही, 10 केबी का ओवरहेड ऐलाउंस भी होना चाहिए. W x H इमेज के लिए, फ़ाइल साइज़ थ्रेशोल्ड का हिसाब W x H x X + 10240 के हिसाब से लगाया जाता है.
unoptimized-lossless-images-strict
बिना डेटा हानि वाले फ़ॉर्मैट में, हर पिक्सल के लिए बाइट का अनुपात X से ज़्यादा नहीं होना चाहिए. साथ ही, 1 केबी का ओवरहेड ऐलाउंस भी होना चाहिए. W x H इमेज के लिए, फ़ाइल साइज़ थ्रेशोल्ड का हिसाब W x H x X + 1024 के हिसाब से लगाया जाता है.

जब कोई दस्तावेज़ इनमें से किसी भी नीति का इस्तेमाल करता है, तो पाबंदी का उल्लंघन करने वाले किसी भी <img> एलिमेंट को प्लेसहोल्डर इमेज से बदल दिया जाएगा.

क्यों?

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

उदाहरण

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

ऑप्टिमाइज़ की गई इमेज की तुलना, ऑप्टिमाइज़ नहीं की गई इमेज से की जा रही है.
ऑप्टिमाइज़ की गई इमेज की तुलना, ऑप्टिमाइज़ नहीं की गई इमेज से करना.

अनुमतियों से जुड़ी यहां दी गई नीति लागू करने पर, मुझे प्लेसहोल्डर इमेज दिखती है.

Permissions-Policy: unoptimized-lossy-images *(0.5);

जब इमेज ऑप्टिमाइज़ नहीं की गई हो.
जब इमेज ऑप्टिमाइज़ नहीं होती.

कैसे इस्तेमाल करें

अगर आपने अनुमतियों की नीति के बारे में पहले कभी नहीं सुना है, तो ज़्यादा जानकारी के लिए कृपया अनुमतियों की नीति के बारे में जानकारी देखें.

खास जानकारी के लिए, unoptimized-{lossy,lossless}-images नीतियों के बारे में इनमें से किसी एक तरीके से बताया जा सकता है:

  • Permissions-Policy एचटीटीपी हेडर
  • <iframe> allow एट्रिब्यूट

unoptimized-{lossy,lossless}-images नीति का एलान करने के लिए, आपको ये जानकारी देनी होगी:

  • सुविधा का नाम, जैसे कि unoptimized-lossy-images (ज़रूरी है)
  • ऑरिजिन की सूची (ज़रूरी नहीं)
  • ब्रैकेट में बताई गई ऑरिजिन के लिए थ्रेशोल्ड वैल्यू (जैसे, हर पिक्सल के लिए बाइट का अनुपात X) (ज़रूरी नहीं)

हमारा सुझाव है कि unoptimized-lossy-images के लिए, हर पिक्सल के हिसाब से बाइट का अनुपात 0.5 या उससे कम हो. साथ ही, unoptimized-lossless-images और unoptimized-lossless-images-strict के लिए, हर पिक्सल के हिसाब से बाइट का अनुपात 1 या उससे कम हो.

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

अगर WebP फ़ॉर्मैट का इस्तेमाल किया जा रहा है, तो ज़्यादा थ्रेशोल्ड आज़माएं:

  • WEBPV8 के लिए 0.2
  • WEBPL के लिए 0.5

और उदाहरण

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

यह नीति सभी ऑरिजिन पर लागू होती है. इसमें थ्रेशोल्ड वैल्यू 0.5 (लोस वाली क्वालिटी वाले फ़ॉर्मैट के लिए) और 1 (बिना डेटा में कमी वाले फ़ॉर्मैट के लिए) होती है. जिस <img> एलिमेंट की इमेज में हर पिक्सल के लिए बाइट का अनुपात, तय सीमा से ज़्यादा है उसे अनुमति नहीं दी जाएगी. साथ ही, उसे प्लेसहोल्डर इमेज से बदल दिया जाएगा.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

यह नीति, साइट के ऑरिजिन पर लागू की जाती है. इसमें थ्रेशोल्ड वैल्यू 0.3 (लोस वाली फ़ाइलों के लिए) और 0.8 (बिना डेटा हानि वाली फ़ाइलों के लिए) होती है. टॉप-लेवल ब्राउज़िंग कॉन्टेक्स्ट और एक ही ऑरिजिन के नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट में मौजूद <img> एलिमेंट, सिर्फ़ तब सामान्य तरीके से रेंडर होंगे, जब हर पिक्सल के लिए बाइट का अनुपात इन शर्तों को पूरा करता हो. बाकी सभी जगहों पर मौजूद <img> एलिमेंट सामान्य तरीके से रेंडर होंगे.

सिर्फ़ रिपोर्ट करने वाला मोड

ऐसा हो सकता है कि आप प्लेसहोल्डर इमेज के साथ साइट पब्लिश न करना चाहें. डेवलपमेंट और स्टैजिंग के दौरान, नीतियां लागू करने वाले मोड में उन नीतियों का इस्तेमाल किया जा सकता है जिनमें प्लेसहोल्डर इमेज के तौर पर रेंडर की गई, ऑप्टिमाइज़ नहीं की गई इमेज शामिल हैं. साथ ही, प्रोडक्शन में सिर्फ़ रिपोर्ट मोड का इस्तेमाल किया जा सकता है. (ज़्यादा जानकारी के लिए, अनुमतियों की नीति के तहत शिकायत करना देखें.) Permissions-Policy एचटीटीपी हेडर की तरह ही, Permissions-Policy-Report-Only हेडर की मदद से, नीति के उल्लंघन की रिपोर्ट को बिना किसी कार्रवाई के देखा जा सकता है.

सीमाएं

इमेज से जुड़ी नीतियां सिर्फ़ एचटीएमएल इमेज एलिमेंट (<img>, <source> वगैरह) पर काम करती हैं. फ़िलहाल, ये बैकग्राउंड इमेज या जनरेट किए गए कॉन्टेंट पर काम नहीं करती हैं. अगर आपको ज़्यादा कॉन्टेंट पर नीतियों का पालन करना है, तो कृपया हमें बताएं.

इमेज ऑप्टिमाइज़ करना

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

कृपया हमें सुझाव, राय दें या शिकायत करें

हमें उम्मीद है कि इस लेख से आपको इमेज से जुड़ी नीतियों के बारे में अच्छी जानकारी मिली होगी और आपको इमेज का इस्तेमाल करने में दिलचस्पी बढ़ी होगी. हमें उम्मीद है कि आप इन नीतियों को आज़माएंगे और हमें अपने सुझाव/राय देंगे.

इस लेख में बताई गई हर सुविधा के बारे में हमें सुझाव, शिकायत या राय दी जा सकती है. इसके लिए, हमारी मेलिंग सूची पर जाएं: feature-control@chromium.org.

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