ऑप्टिमाइज़ की गई इमेज की नीतियों का इस्तेमाल करके, यह पक्का करें कि आपकी साइट सबसे अच्छी परफ़ॉर्मेंस वाली इमेज का इस्तेमाल कर रही है.
इमेज अक्सर ज़्यादा विज़ुअल जगह लेती हैं और वेबसाइट पर डाउनलोड की जाने वाली बाइट से ज़्यादा हैं. इमेज को ऑप्टिमाइज़ करने से, लोडिंग की परफ़ॉर्मेंस बेहतर हो सकती है और नेटवर्क ट्रैफ़िक कम हो सकता है.
हैरानी की बात है कि वेब पर आधी से ज़्यादा साइटों पर खराब तरीके से कंप्रेस की गई या बेवजह बड़ी इमेज दिखाई जा रही हैं. इससे सिर्फ़ इमेज को ऑप्टिमाइज़ करके, परफ़ॉर्मेंस में सुधार करने की काफ़ी गुंजाइश रहती है.
आप खुद से यह सवाल पूछ सकते हैं कि मुझे कैसे पता चलेगा कि मेरी इमेज ऑप्टिमाइज़ की गई हैं या नहीं और मैं उन्हें कैसे ऑप्टिमाइज़ करूं? हम इमेज को ऑप्टिमाइज़ करने के लिए, सुविधा से जुड़ी नई नीतियों पर प्रयोग कर रहे हैं: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images, औरunoptimized-lossless-images-strict.
सभी अब ऑरिजिन ट्रायल के लिए उपलब्ध हैं.
ऑप्टिमाइज़ की गई इमेज की नीतियां
अनुमतियों की नीति में इमेज के लिए नई पाबंदियां जोड़ी जा रही हैं. इन पाबंदियों को डेवलपमेंट के दौरान लागू किए जाने वाले नीति के मुताबिक लागू किया जा सकता है. किसी भी पाबंदी का उल्लंघन करने वाली इमेज, प्लेसहोल्डर इमेज के तौर पर रेंडर की जाएंगी. इन्हें पहचानना और ठीक करना आसान होता है. इन नीतियों को 'सिर्फ़ रिपोर्ट' मोड में बताया जा सकता है, जहां रिपोर्ट में उल्लंघनों की जानकारी मिलने के दौरान इमेज, नीति उल्लंघन ठीक करने के तरीके के बिना सामान्य रूप से रेंडर हो जाएंगी. (ज़्यादा जानकारी के लिए नीचे जंगल में रिपोर्ट-ओनली मोड देखें.)
बड़े साइज़ की इमेज
oversized-images की अनुमतियों से जुड़ी नीति के तहत, कंटेनर के साइज़ के हिसाब से इमेज के इंटेंसिक डाइमेंशन पर पाबंदी लगाई जाती है.
जब किसी दस्तावेज़ में oversized-images नीति का इस्तेमाल किया जाता है, तो ऐसे <img> एलिमेंट को प्लेसहोल्डर इमेज से बदल दिया जाएगा जिसका असली रिज़ॉल्यूशन, डाइमेंशन में मौजूद कंटेनर के साइज़ से X गुना ज़्यादा होगा.
ऐसा क्यों हो रहा है?
डिवाइस की इमेज से बड़ी इमेज दिखाना. उदाहरण के लिए, मोबाइल पर डेस्कटॉप इमेज दिखाना या कम पिक्सल डेंसिटी वाले डिवाइस पर ज़्यादा पिक्सल वाली इमेज दिखाना. इससे नेटवर्क ट्रैफ़िक और डिवाइस मेमोरी की बर्बादी होती है. अपनी इमेज को ऑप्टिमाइज़ करने के बारे में जानकारी के लिए, सही डाइमेंशन वाली इमेज दिखाना और रिस्पॉन्सिव इमेज दिखाना लेख पढ़ें.
उदाहरण
कुछ उदाहरणों में इसे दिखाया गया है. नीचे दी गई इमेज में, किसी इमेज के डिसप्ले साइज़ को आधा करने का डिफ़ॉल्ट तरीका दिखाया गया है.
अगर मैं अनुमतियों की यह नीति लागू करता/करती हूं, तो मुझे इसके बजाय प्लेसहोल्डर इमेज दिखेगी.
Permissions-Policy: oversized-images *(2);
सिर्फ़ चौड़ाई या ऊंचाई कम करने पर, मुझे मिलते-जुलते नतीजे मिलते हैं.
How to use
खास जानकारी में, 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> एलिमेंट सामान्य रूप से रेंडर होंगे.
ऑप्टिमाइज़ न की गई-{lossy,lossless}-इमेज
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);
How to use
अगर आपको अनुमतियों से जुड़ी नीति के बारे में ज़्यादा नहीं पता है, तो ज़्यादा जानकारी के लिए अनुमतियों की नीति के बारे में जानकारी देखें.
खास जानकारी में, 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 को इस्तेमाल करना ज़्यादा सहज और
आसान है या नहीं. इसके अलावा, हमें यह जानने में भी खुशी होगी कि इसके बजाय, हमें अलग-अलग ओवरहेड अनु खर्च का इस्तेमाल करना चाहिए या नहीं. मुफ़्त में आज़माने की अवधि खत्म होने से पहले, हम आपको एक सर्वे भेजेंगे. हमारे साथ बने रहें!