यह नियम तब ट्रिगर होता है, जब PageSpeed Insights को पता चलता है कि पेज पर मौजूद इमेज को, उनकी विज़ुअल क्वालिटी पर बहुत ज़्यादा असर डाले बिना फ़ाइल का साइज़ कम करने के लिए ऑप्टिमाइज़ किया जा सकता है.
खास जानकारी
किसी पेज पर डाउनलोड की गई ज़्यादातर बाइट अक्सर इमेज के हिसाब से होती हैं. नतीजतन, इमेज को ऑप्टिमाइज़ करने से अक्सर बाइट की बचत हो सकती है और परफ़ॉर्मेंस बेहतर हो सकती है: ब्राउज़र को जितने कम बाइट डाउनलोड करने पड़ेंगे, क्लाइंट की बैंडविड्थ के लिए उतनी ही कम प्रतिस्पर्धा होगी. साथ ही, ब्राउज़र उतनी ही तेज़ी से कॉन्टेंट को डाउनलोड और स्क्रीन पर रेंडर कर सकेगा.
सुझाव
अपनी इमेज एसेट के लिए सबसे सही फ़ॉर्मैट और ऑप्टिमाइज़ेशन रणनीति ढूंढने के लिए, कई डाइमेंशन का विश्लेषण करने की ज़रूरत होती है: कोड में बदला जाने वाला डेटा किस तरह का है, इमेज फ़ॉर्मैट की सुविधाएं, क्वालिटी सेटिंग, रिज़ॉल्यूशन वगैरह. इसके अलावा, आपको इस बात पर ध्यान देना होगा कि कुछ इमेज, वेक्टर फ़ॉर्मैट में सबसे अच्छी तरह से दिखाई जा रही हैं या नहीं. साथ ही, आपको यह भी ध्यान रखना होगा कि सीएसएस से आपको अपनी पसंद के मुताबिक इफ़ेक्ट मिल सकते हैं या नहीं. साथ ही, आपको यह भी देखना होगा कि हर तरह के डिवाइस के लिए, सही तरीके से स्केल की गई एसेट कैसे डिलीवर की जाएं.
सभी तरह की इमेज के लिए ऑप्टिमाइज़ेशन
- रिस्पॉन्सिव इमेज दिखाने के सबसे सही तरीकों को अपनाएं
- अलग-अलग इमेज के लिए इमेज ऑप्टिमाइज़ेशन चेकलिस्ट का पालन करें
GIF, PNG, और JPEG इमेज के लिए ऑप्टिमाइज़ेशन
पूरे इंटरनेट पर इमेज पर आने वाले ट्रैफ़िक का 96% GIF, PNG, और JPEG फ़ॉर्मैट से आता है. इनकी लोकप्रियता की वजह से, PageSpeed Insights खास ऑप्टिमाइज़ेशन सुझाव देता है. आपकी सुविधा के लिए, ऑप्टिमाइज़ की गई इमेज को सीधे PageSpeed Insights से डाउनलोड किया जा सकता है. इसके लिए, modpagespeed.com की इमेज ऑप्टिमाइज़ेशन लाइब्रेरी का इस्तेमाल होता है.
आप ImageMagick द्वारा बनाए गए रूपांतरित बाइनरी जैसे टूल का भी उपयोग कर सकते हैं जो समान ऑप्टिमाइज़ेशन लागू कर सकते हैं - नीचे उदाहरण के निर्देश देखें.
अगर तीसरे पक्ष के टूल का इस्तेमाल किया जाता है, तो कृपया ध्यान रखें कि अगर इमेज को पहले से ही बेहतर तरीके से ऑप्टिमाइज़ किया गया है, तो ट्रांसफ़ॉर्मेशन की वजह से इमेज बड़ी हो सकती हैं. अगर ऐसा होता है, तो कृपया मूल ईमेल का इस्तेमाल करें.
GIF और PNG लॉसलेस फ़ॉर्मैट हैं. इनमें, कंप्रेस करने की प्रोसेस से इमेज में कोई विज़ुअल बदलाव नहीं किया जाता. स्टिल इमेज के लिए PNG, बेहतर विज़ुअल क्वालिटी के साथ बेहतर कंप्रेशन अनुपात हासिल करता है. ऐनिमेशन वाली इमेज को बेहतर तरीके से कंप्रेस करने के लिए, GIF के बजाय video एलिमेंट का इस्तेमाल करें.
- GIF को हमेशा PNG में बदलें, जब तक कि ओरिजनल ऐनिमेटेड या छोटी (कुछ सौ बाइट से कम) न हो.
- अगर सभी पिक्सल ओपेक हैं, तो GIF और PNG, दोनों के लिए ऐल्फ़ा चैनल हटा दें.
उदाहरण के लिए, अपनी GIF और PNG इमेज को ऑप्टिमाइज़ करने के लिए, बाइनरी को बदलें का इस्तेमाल करें. ब्रैकेट में दिए गए पैरामीटर ज़रूरी नहीं हैं:
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG एक नुकसान पहुंचाने वाला फ़ॉर्मैट है. कंप्रेस करने से इमेज की विज़ुअल जानकारी हट जाती है. हालांकि, कंप्रेस करने का अनुपात GIF या PNG से 10 गुना ज़्यादा हो सकता है.
- अगर यह ज़्यादा होता है, तो क्वालिटी को घटाकर 85 कर दें. इसकी क्वालिटी 85 से ज़्यादा होने पर, इमेज तेज़ी से बड़ी हो जाती है, जबकि विज़ुअल में थोड़ा सुधार होता है.
- क्रोमा के सैंपल को 4:2:0 तक कम करें, क्योंकि इंसानों का विज़ुअल सिस्टम, चमक के मुकाबले रंगों को कम संवेदनशील करता है.
- 10 हज़ार बाइट से ज़्यादा की इमेज के लिए प्रोग्रेसिव फ़ॉर्मैट का इस्तेमाल करें. आम तौर पर, प्रोग्रेसिव JPEG फ़ॉर्मैट में, बड़ी इमेज के लिए बेसलाइन JPEG की तुलना में ज़्यादा कंप्रेस करने का अनुपात होता है. साथ ही, इससे इमेज को धीरे-धीरे रेंडर करने में मदद मिलती है.
- अगर इमेज ब्लैक ऐंड व्हाइट है, तो ग्रेस्केल कलर स्पेस का इस्तेमाल करें.
उदाहरण के लिए, अपनी JPEG इमेज को ऑप्टिमाइज़ करने के लिए, नीचे दिए गए कमांड की मदद से बाइनरी को बदलें का इस्तेमाल करें. ब्रैकेट के अंदर दिए गए पैरामीटर ज़रूरी नहीं हैं:
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
सुझाव/राय दें या शिकायत करें
क्या इस पेज से कोई मदद मिली?