Google PageSpeed सुधारने के लिए इमेज कैसे कंप्रेस करें

रिपोर्ट असल में किस ओर इशारा कर रही है

PageSpeed इमेज से जुड़ी दिक्कतें कई अलग-अलग तरीकों से बताता है, और हर एक का मतलब अलग है। “इमेज को सही साइज़ दें” का मतलब है कि आपकी भेजी फ़ाइल में उस जगह से ज़्यादा पिक्सेल हैं, जिसमें वह दिखाई गई। “इमेज को कुशलता से एन्कोड करें” का मतलब है कि क्वालिटी सेटिंग तस्वीर की ज़रूरत से ऊँची थी। “इमेज को नई पीढ़ी के फ़ॉर्मैट में दिखाएँ” का मतलब है कि वही तस्वीर WebP या AVIF में छोटी होती। इनमें पहली चेतावनी लगभग हमेशा सबसे महँगी पड़ती है, और लोग उसी को छोड़ देते हैं, क्योंकि स्क्रीन पर पेज ठीक दिखता है।

इसमें समय का पहलू भी है। ज़्यादातर लेख और प्रोडक्ट पेजों पर स्क्रीन की सबसे बड़ी चीज़ एक इमेज होती है, इसलिए जब तक वह फ़ाइल नहीं आ जाती, ब्राउज़र मुख्य कंटेंट को पूरी तरह दिखा नहीं पाता। उसे छोटा करने से लोडिंग का पूरा माप बदलता है, रिपोर्ट की सिर्फ़ एक लाइन नहीं।

पहले डाइमेंशन, फिर क्वालिटी

शुरुआत पिक्सेल डाइमेंशन से करें, क्योंकि वहाँ बचत कई गुना होती है। फ़ोन से ली गई फ़ोटो की लंबी साइड अक्सर लगभग 4000 पिक्सेल की होती है। उसे 1280 पर ले आएँ, तो करीब दसवाँ हिस्सा पिक्सेल ही बचते हैं, क्योंकि चौड़ाई और ऊँचाई दोनों एक ही अनुपात में घटती हैं। कोई भी क्वालिटी स्लाइडर इतनी बड़ी कमी नहीं ला सकता।

चौड़ाई फ़ाइल के हिसाब से नहीं, अपने लेआउट के हिसाब से चुनें। अगर इमेज 700 पिक्सेल के कॉलम में है, तो हाई-डेंसिटी स्क्रीन के लिए भी 1280 आराम से काफ़ी है। 4000 भेजने का मतलब है ऐसे डिटेल के ट्रांसफ़र का खर्च उठाना, जिसे कोई कभी नहीं देखेगा। पूरे रिज़ॉल्यूशन की हक़दार सिर्फ़ वे इमेज हैं जिन्हें विज़िटर क्लिक करके फ़ुल स्क्रीन में खोल सकता है, और उन्हें भी शायद ही कभी कैमरे की पूरी ओरिजिनल फ़ाइल चाहिए होती है।

क्वालिटी स्लाइडर क्या करता है

JPEG ऐसे डिटेल हटाकर काम करता है जिन पर आँख का ध्यान कम जाता है, और क्वालिटी का नंबर तय करता है कि यह कितनी सख़्ती से हो। नंबर काफ़ी नीचे कर दें, तो गड़बड़ियाँ उन्हीं जगहों पर दिखने लगती हैं जहाँ उनकी उम्मीद होती है: टेक्स्ट या छत की रेखा जैसे तीखे किनारों के आसपास धुंधले घेरे, और साफ़ आसमान या स्टूडियो बैकड्रॉप जैसे हल्के ग्रेडिएंट में धब्बे। ज़्यादा टेक्सचर वाली फ़ोटो कंप्रेशन को अच्छी तरह छिपा लेती हैं। सपाट रंग और बारीक टेक्स्ट नहीं छिपा पाते।

नतीजे को उसी साइज़ पर परखें जिस पर वह दिखेगा, और उसी लेआउट में जिसमें वह लगेगा। गड़बड़ियाँ ढूँढने के लिए 300% तक ज़ूम करेंगे, तो ख़ुद को पेज की ज़रूरत से कहीं ऊँची क्वालिटी रखने के लिए मना लेंगे, और वह फ़ालतू वज़न बेवजह पेज के साथ चला जाएगा।

जहाँ कंप्रेशन काम नहीं आता

कुछ फ़ाइलों में देने को कुछ बचा ही नहीं होता, और उन्हें और दबाने से सिर्फ़ क्वालिटी जाती है:

• ऐसी JPEG जो पहले ही एक बार कंप्रेस हो चुकी है। दोबारा एन्कोड करने से पुरानी गड़बड़ियों के ऊपर नई गड़बड़ियों की एक और परत चढ़ जाती है, और बचत आम तौर पर थोड़ी ही होती है। अगर वेब डाइमेंशन पर कोई फ़ोटो पहले से दो-तीन सौ किलोबाइट की है, तो उसे वैसे ही रहने दें।
• PNG में सेव की गई फ़ोटो। कंप्रेसर PNG को PNG ही रखता है और उसका कलर पैलेट घटाकर उसे छोटा करता है। यह स्क्रीनशॉट और सपाट ग्राफ़िक्स के लिए ठीक है, लेकिन फ़ोटो पर रंगों की पट्टियों के रूप में दिखता है। ऐसी फ़ोटो को पहले JPG या WebP में कन्वर्ट करें और फिर उसी को कंप्रेस करें।
• आइकन, लोगो और छोटे इंटरफ़ेस ग्राफ़िक्स। कुछ-कुछ किलोबाइट की ये फ़ाइलें आपके ऑडिट के फ़ेल होने की वजह नहीं हैं। इनकी जगह पेज की सबसे बड़ी मुख्य इमेज ढूँढें।

यहाँ के कंप्रेसर का इस्तेमाल

क्वालिटी स्लाइडर 10 से 95 तक जाता है। JPEG के लिए यह एन्कोडर की क्वालिटी तय करता है। PNG लिखते समय ब्राउज़र इस वैल्यू को अनदेखा करते हैं, इसलिए PNG के लिए यह तय करता है कि कितने रंग बचेंगे: रेंज के ऊपरी हिस्से में 256 से लेकर सबसे नीचे 16 तक, और पारदर्शिता बनी रहती है। अधिकतम डाइमेंशन वाली सेटिंग में ओरिजिनल साइज़ या सबसे लंबी साइड पर 1920, 1280 या 800 पिक्सेल के विकल्प हैं, और स्केलिंग अनुपात में होती है ताकि कुछ भी खिंचे नहीं। किसी फ़ोल्डर की सारी इमेज एक साथ छोड़ें, सबको एक ही बार में कंप्रेस करें और ZIP में वापस ले लें।

कुछ काम यह जान-बूझकर नहीं करता। यह आपके लिए कोई तय फ़ाइल साइज़ हासिल नहीं करता, इसलिए आप क्वालिटी चुनें, नतीजा देखें और ज़रूरत हो तो बदलें। जिन फ़ाइलों को यह दोबारा एन्कोड करता है, उनका मेटाडेटा नहीं रखता: इमेज डिकोड होती है, कैनवस पर बनाई जाती है और नए सिरे से लिखी जाती है, इसलिए कैमरा सेटिंग्स, टाइमस्टैम्प और GPS कोऑर्डिनेट, अगर हों, तो हट जाते हैं। और यह आपकी दी हुई फ़ाइल से बड़ी फ़ाइल वापस नहीं देता। अगर दोबारा एन्कोड करने से पहले से अच्छी तरह कंप्रेस की गई इमेज बड़ी हो जाती, और आपने छोटे डाइमेंशन नहीं चुने हैं, तो आपको ओरिजिनल फ़ाइल बिना बदले वापस मिलती है।

यह आपके ब्राउज़र में क्यों चलता है

लॉन्च से पहले लोग जिन इमेज को कंप्रेस करते हैं, वे अक्सर ऐसी होती हैं जिन्हें वे किसी अनजान के हाथ में नहीं देना चाहते: ऐसे प्रोडक्ट की फ़ोटो जो अभी सामने नहीं आए, क्लाइंट के लिए की गई फ़ोटोग्राफ़ी, अंदरूनी डेटा वाले स्क्रीनशॉट। यहाँ कुछ भी अपलोड नहीं होता। फ़ाइल आपकी डिस्क से पढ़ी जाती है, टैब के अंदर ही डिकोड और दोबारा एन्कोड होती है, और आपके डाउनलोड फ़ोल्डर में लिख दी जाती है। कंप्रेस करते समय डेवलपर टूल्स का नेटवर्क टैब खोलें: आपको ऐसी कोई रिक्वेस्ट नहीं दिखेगी जिसमें आपकी फ़ाइल जा रही हो, क्योंकि ऐसी कोई रिक्वेस्ट होती ही नहीं।

कब बिल्ड स्टेप बेहतर रास्ता है

अगर आप लगातार इमेज पब्लिश करते हैं, तो यह काम आपकी पाइपलाइन में होना चाहिए, ब्राउज़र टैब में नहीं। कोई बिल्ड प्लगइन या इमेज CDN हर इमेज की कई चौड़ाइयाँ और फ़ॉर्मैट बना सकता है, हर डिवाइस को सही वर्ज़न भेज सकता है, और ऐसा करना कभी नहीं भूलता। हर हफ़्ते यह हाथ से करना ज़्यादा दिन नहीं चलता, और यह उसी तरह का काम है जिसे लोग एक महीने बाद चुपचाप करना छोड़ देते हैं। ब्राउज़र टूल उन गिनी-चुनी फ़ाइलों के लिए ठीक है जिन्हें आप अभी अपलोड करने वाले हैं, या उन तीन भारी इमेज के लिए जिनकी शिकायत ऑडिट ने सच में की थी।