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

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

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
लॉसलेस फ़ॉर्मैट का साइज़, बाइट प्रति पिक्सल से ज़्यादा नहीं होना चाहिए. साथ ही, डिवाइस के ऊपर 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 के बिना डेटा खोने वाले फ़ॉर्मैट का इस्तेमाल करें. WebP फ़ॉर्मैट के साथ काम न करने वाले ब्राउज़र पर JPEG का इस्तेमाल करें. अगर इनमें से कोई भी फ़ॉर्मैट काम नहीं करता है, तो 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 में से कौनसा विकल्प ज़्यादा आसान और समझने में आसान है. इसके अलावा, हमें यह भी जानना है कि क्या हमें इसके बजाय, अलग से ओवरहेड अलॉवेंस का इस्तेमाल करना चाहिए. हम ट्रायल खत्म होने के करीब एक सर्वे भेजेंगे. हमारे साथ बने रहें!