किसी वेब पेज पर डाउनलोड होने वाले ज़्यादातर बाइट अक्सर इमेज के हिसाब से होते हैं और वे अक्सर बहुत ज़्यादा विज़ुअल जगह भी लेते हैं. इस वजह से, इमेज को ऑप्टिमाइज़ करने से, बाइट की बचत की जा सकती है और आपकी वेबसाइट की परफ़ॉर्मेंस बेहतर हो सकती है: ब्राउज़र को जितने कम बाइट डाउनलोड करने पड़ते हैं, क्लाइंट के बैंडविथ के लिए उतनी ही कम प्रतिस्पर्धा होती है. साथ ही, ब्राउज़र उतनी ही तेज़ी से डाउनलोड करके स्क्रीन पर उपयोगी कॉन्टेंट रेंडर करता है.
इमेज ऑप्टिमाइज़ेशन कला और विज्ञान दोनों है: यह एक कला है, क्योंकि इस बात का कोई तय जवाब नहीं है कि किसी इमेज को कैसे कंप्रेस किया जाए. यह विज्ञान भी है, क्योंकि ऐसी कई अच्छी तरह की टेक्नोलॉजी और एल्गोरिदम हैं जिनसे किसी भी इमेज के साइज़ को काफ़ी कम किया जा सकता है. अपनी इमेज के लिए सबसे सही सेटिंग ढूंढने के लिए, कई डाइमेंशन का सावधानी से विश्लेषण करना ज़रूरी होता है: फ़ॉर्मैट की क्षमताएं, एन्कोड किए गए डेटा का कॉन्टेंट, क्वालिटी, पिक्सल डाइमेंशन वगैरह.
वेक्टर इमेज ऑप्टिमाइज़ करना
सभी मॉडर्न ब्राउज़र, स्केलेबल वेक्टर ग्राफ़िक (SVG) का इस्तेमाल करते हैं, जो दो डाइमेंशन वाले ग्राफ़िक के लिए एक्सएमएल पर आधारित इमेज फ़ॉर्मैट है. SVG मार्कअप को सीधे पेज पर या बाहरी संसाधन के तौर पर एम्बेड किया जा सकता है. वेक्टर पर आधारित ज़्यादातर ड्रॉइंग सॉफ़्टवेयर, SVG फ़ाइलें बना सकते हैं या उन्हें सीधे अपने पसंदीदा टेक्स्ट एडिटर में हाथ से लिखा जा सकता है.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
ऊपर दिया गया उदाहरण, नीचे दिए गए सामान्य सर्कल के आकार को काली आउटलाइन और लाल बैकग्राउंड के साथ रेंडर करता है. इसे Adobe Illustrator से एक्सपोर्ट किया गया है.
<?xml version="1.0" encoding="utf-8"?>
जैसा कि आपको पता है, इसमें बहुत सारा मेटाडेटा होता है. जैसे, लेयर की जानकारी, टिप्पणियां, और एक्सएमएल नेमस्पेस जो ब्राउज़र में एसेट को रेंडर करने के लिए अक्सर ज़रूरी नहीं होते. इसलिए, SVGO जैसे टूल का इस्तेमाल करके अपनी SVG फ़ाइलों को छोटा करें.
इस बात को ध्यान में रखते हुए, SVGO, Illustrator से जनरेट की गई ऊपर दी गई SVG फ़ाइल का साइज़ 58% कम कर देता है. इसका साइज़ 470 से 199 बाइट हो जाता है.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
SVG एक एक्सएमएल-आधारित फ़ॉर्मैट है, इसलिए इसके ट्रांसफ़र साइज़ को कम करने के लिए, GZIP कंप्रेशन को भी लागू किया जा सकता है—पक्का करें कि आपका सर्वर SVG ऐसेट को कंप्रेस करने के लिए कॉन्फ़िगर किया गया हो!
रास्टर इमेज अलग-अलग "पिक्सल" का दो-डाइमेंशन वाला ग्रिड होता है—उदाहरण के लिए, 100x100 पिक्सल की इमेज, 10,000 पिक्सल का क्रम है. इसके बदले, हर पिक्सल "आरजीबीए" वैल्यू सेव करता है: (R) लाल चैनल, (G) हरा चैनल, (B) नीला चैनल, और (A) ऐल्फ़ा (पारदर्शिता) चैनल.
ब्राउज़र इंटरनल तौर पर हर चैनल के लिए 256 वैल्यू (शेड) तय करता है, जो हर चैनल के लिए आठ बिट (2 ^ 8 = 256) और 4 बाइट प्रति पिक्सल (4 चैनल x 8 बिट = 32 बिट = 4 बाइट) होते हैं. इस वजह से, अगर हमें ग्रिड के डाइमेंशन पता हैं, तो हम फ़ाइल के साइज़ का आसानी से हिसाब लगा सकते हैं:
- 100x100 पिक्सल की इमेज 10,000 पिक्सल की होती है
- 10,000 पिक्सल x 4 बाइट = 40,000 बाइट
- 40,000 बाइट / 1024 = 39 केबी
| डाइमेंशन | पिक्सल | फ़ाइल का साइज़ |
|---|---|---|
| 100 x 100 | 10,000 | 39 केबी |
| 200 x 200 | 40,000 | 156 केबी |
| 300 x 300 | 90,000 | 351 केबी |
| 500 x 500 | 250,000 | 977 केबी |
| 800 x 800 | 6,40,000 | 2500 केबी |
100x100 पिक्सल वाली इमेज के लिए 39 केबी का साइज़ शायद बहुत बड़ी न हो, लेकिन बड़ी इमेज के लिए, फ़ाइल का साइज़ तेज़ी से अलग-अलग हो जाता है. इस वजह से, इमेज एसेट को डाउनलोड करना धीमा और महंगा हो जाता है. इस पोस्ट ने अभी तक सिर्फ़ "अनकंप्रेस्ड" इमेज फ़ॉर्मैट पर फ़ोकस किया है. अच्छी बात यह है कि इमेज फ़ाइल के साइज़ को कम करने के लिए बहुत कुछ किया जा सकता है.
एक आसान रणनीति यह है कि इमेज की "बिट डेप्थ" को हर चैनल के लिए आठ बिट से कम करके छोटे रंग पटल करें: हर चैनल पर आठ बिट से हमें हर चैनल पर 256 वैल्यू और कुल 1,67,77,216 (256 ^ 3) रंग मिलते हैं. अगर आप पैलेट को 256 रंगों तक कम कर दें, तो क्या होगा? इसके बाद आपको आरजीबी चैनलों के लिए कुल सिर्फ़ 8 बिट की ज़रूरत होगी और तुरंत दो बाइट हर पिक्सल बचाने की ज़रूरत होगी—यह मूल 4 बाइट प्रति पिक्सल फ़ॉर्मैट की तुलना में 50% कंप्रेशन की बचत है!
धीरे-धीरे होने वाले कलर ट्रांज़िशन (उदाहरण के लिए, ग्रेडिएंट या आसमान) वाले कॉम्प्लेक्स सीन के लिए बड़े कलर पटल की ज़रूरत होती है, ताकि 5-बिट ऐसेट में पिक्सलेटेड स्काई जैसी विज़ुअल आर्टफ़ैक्ट न बनाए जा सकें. वहीं दूसरी ओर, अगर इमेज में सिर्फ़ कुछ ही रंगों का इस्तेमाल किया गया है, तो एक बड़ा पैलेट बेहद कीमती बिट को बर्बाद कर रहा है!
फिर, अलग-अलग पिक्सल में स्टोर किए गए डेटा को ऑप्टिमाइज़ करने के बाद, ज़्यादा समझदारी से आस-पास के पिक्सल को देखा जा सकता है: इस जानकारी का इस्तेमाल करने के लिए कंप्रेसर, हर पिक्सल के लिए अलग-अलग वैल्यू सेव करने के बजाय, डेल्टा के लिए कोड में बदलने का तरीका लागू कर सकता है: अगर पास के पिक्सल एक जैसे हैं, तो डेल्टा "शून्य" होता है और आपको सिर्फ़ एक बिट सेव करने की ज़रूरत होती है! लेकिन रुकिए क्यों...
अलग-अलग रंगों के लिए, इंसान की आंख में अलग-अलग स्तर की संवेदनशीलता होती है: इसके लिए, कलर एन्कोडिंग को ऑप्टिमाइज़ किया जा सकता है. ऐसा करने के लिए, कलर के लिए पैलेट को कम या ज़्यादा करें. "आस-पास" पिक्सल एक दो-डाइमेंशन ग्रिड बनाते हैं. इसका मतलब है कि हर पिक्सल के एक से ज़्यादा पास होते हैं: इस तथ्य का इस्तेमाल डेल्टा एन्कोडिंग को और बेहतर बनाने के लिए किया जा सकता है. हर पिक्सल के लिए सिर्फ़ आस-पास के ब्लॉक को देखने के बजाय, आस-पास के पिक्सल के बड़े ब्लॉक को देखा जा सकता है और अलग-अलग ब्लॉक को अलग-अलग सेटिंग से कोड में बदला जा सकता है.
जैसा कि आपको पहले से पता है, इमेज ऑप्टिमाइज़ेशन बहुत जल्द जटिल (या आपके नज़रिए के आधार पर मज़ेदार) हो जाता है. यह शिक्षा और कारोबार के लिए रिसर्च करने का एक सक्रिय क्षेत्र है. इमेज बहुत ज़्यादा बाइट घेरती हैं. इसलिए, इमेज को कंप्रेस करने की बेहतर तकनीकें डेवलप करने में हमारी बहुत मदद होती है! अगर आपको ज़्यादा जानकारी चाहिए, तो Wikipedia पेज पर जाएं या WebP कंप्रेशन तकनीक का व्हाइट पेपर देखें. इससे आपको इस बारे में बेहतर जानकारी मिलेगी.
एक बार फिर, यह बात अच्छी है, लेकिन यह बहुत शैक्षणिक है: यह आपकी साइट पर इमेज को ऑप्टिमाइज़ करने में कैसे मदद करती है? समस्या के आकार को समझना ज़रूरी है: आरजीए पिक्सल, बिट की गहराई, और ऑप्टिमाइज़ेशन की अलग-अलग तकनीकें. रास्टर इमेज फ़ॉर्मैट के बारे में चर्चा शुरू करने से पहले, इन सभी कॉन्सेप्ट को समझना और ध्यान में रखना ज़रूरी है.
लॉसलेस बनाम लॉसी इमेज कंप्रेशन
कुछ खास तरह के डेटा, जैसे कि किसी पेज के सोर्स कोड या एक्ज़ीक्यूटेबल फ़ाइल के लिए, यह ज़रूरी है कि कंप्रेसर से कोई भी मूल जानकारी न तो बदल पाए और न ही मिटे: डेटा का एक भी गलत हिस्सा या एक भी गलत बिट से फ़ाइल के कॉन्टेंट का मतलब पूरी तरह बदल सकता है या यह पूरी तरह से बिगाड़ सकता है. कुछ दूसरे टाइप के डेटा, जैसे कि इमेज, ऑडियो, और वीडियो के लिए, मूल डेटा का "अनुमानित" तरीके से इस्तेमाल करना सही हो सकता है.
असल में, आंख के काम करने के तरीके के चलते, हम किसी इमेज के फ़ाइल आकार को कम करने के लिए, हर पिक्सल के बारे में कुछ जानकारी को खारिज कर देते हैं—उदाहरण के लिए, हमारी आंखों में अलग-अलग रंगों को लेकर अलग-अलग संवेदनशीलता होती है. इसका मतलब है कि हम कुछ रंगों को कोड में बदलने के लिए कम बिट का इस्तेमाल कर सकते हैं. इस वजह से, एक सामान्य इमेज ऑप्टिमाइज़ेशन पाइपलाइन में दो हाई लेवल चरण होते हैं:
- इमेज को लॉसी फ़िल्टर से प्रोसेस किया जाता है, जिससे पिक्सल का कुछ डेटा हट जाता है.
- इमेज को लॉसलेस फ़िल्टर से प्रोसेस किया जाता है, जो पिक्सल के डेटा को कंप्रेस कर देता है.
पहला चरण ज़रूरी नहीं है और सटीक एल्गोरिदम, इमेज के फ़ॉर्मैट पर निर्भर करेगा. लेकिन यह समझना ज़रूरी है कि कोई भी इमेज, साइज़ कम करने के लिए नुकसान पहुंचाने वाले कंप्रेसिंग चरण से गुज़र सकती है. असल में, GIF, PNG, JPEG, और अन्य जैसे अलग-अलग इमेज फ़ॉर्मैट के बीच का अंतर, उन खास एल्गोरिदम के कॉम्बिनेशन में होता है जिनका इस्तेमाल वे नुकसान पहुंचाने वाले और नुकसान न पहुंचाने वाले चरणों को लागू करते समय करते हैं (या छोड़ देते हैं).
ऐसे में, लॉसलेस और लॉसलेस ऑप्टिमाइज़ेशन का "सबसे अच्छा" कॉन्फ़िगरेशन क्या है? इसका जवाब, इमेज के कॉन्टेंट और अपने मापदंड पर निर्भर करता है, जैसे कि कम्प्रेशन की मदद से फ़ाइल के साइज़ और आर्टफ़ैक्ट के बीच के अंतर को खत्म करना: कुछ मामलों में, ऐसा हो सकता है कि आप बिना किसी गड़बड़ी वाले ऑप्टिमाइज़ेशन को छोड़ना चाहें, ताकि मुश्किल जानकारी को पूरी फ़िडेलिटी के साथ पेश किया जा सके. अन्य मामलों में, इमेज एसेट के फ़ाइल साइज़ को कम करने के लिए, एग्रेसिव लॉसी ऑप्टिमाइज़ेशन लागू किया जा सकता है. यहां कॉन्टेंट बनाने के लिए, आपको अपनी कहानी और संदर्भ का इस्तेमाल करने की ज़रूरत होती है. ऐसा करने के लिए दुनिया भर में कोई एक सेटिंग नहीं है.
उदाहरण के तौर पर, JPEG जैसे नुकसानदेह फ़ॉर्मैट का इस्तेमाल करते समय, कंप्रेसर आम तौर पर पसंद के मुताबिक बनाई जा सकने वाली "क्वालिटी" सेटिंग दिखाता है (उदाहरण के लिए, Adobe Photoshop में "वेब के लिए सेव करें" फ़ंक्शन से दिया गया क्वालिटी स्लाइडर), आम तौर पर यह 1 से 100 के बीच की संख्या होती है जो नुकसान पहुंचाने वाले और लॉसलेस एल्गोरिदम के खास संग्रह के अंदरूनी काम को कंट्रोल करती है. सबसे अच्छे नतीजे पाने के लिए, इमेज की अलग-अलग क्वालिटी सेटिंग के साथ प्रयोग करें. क्वालिटी को कम करने में न झिझकें—विज़ुअल नतीजे अक्सर बहुत अच्छे होते हैं और फ़ाइलों के साइज़ में काफ़ी बचत की जा सकती है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर, इमेज कंप्रेस करने के असर
आम तौर पर, इमेज को सबसे बड़े कॉन्टेंटफ़ुल पेंट के लिए चुना जाता है. इसलिए, किसी इमेज के रिसॉर्स लोड होने के समय को कम करने से, लैब और फ़ील्ड, दोनों में एलसीपी बेहतर हो सकता है.
रास्टर इमेज फ़ॉर्मैट पर कंप्रेशन सेटिंग के साथ खेलते समय, WebP और AVIF फ़ॉर्मैट के साथ प्रयोग करना न भूलें. इससे यह देखा जा सकता है कि पुराने फ़ॉर्मैट के मुकाबले छोटे फ़ुटप्रिंट में समान इमेज डिलीवर की जा सकती है या नहीं.
हालांकि, आपको इस बात का ध्यान रखना होगा कि रास्टर इमेज को ओवरकंप्रेस न किया जाए. इमेज ऑप्टिमाइज़ेशन सीडीएन का इस्तेमाल करके अपने लिए सबसे अच्छी कंप्रेशन सेटिंग खोजें. हालांकि, विज़ुअल डिफ़रेंस का अनुमान लगाने के लिए Butteraugli जैसे टूल का इस्तेमाल किया जा सकता है. इससे इमेज को बहुत ज़्यादा एन्कोड न करें और बहुत ज़्यादा क्वालिटी भी खराब न हो.
इमेज ऑप्टिमाइज़ेशन चेकलिस्ट
इमेज ऑप्टिमाइज़ करते समय इन बातों का ध्यान रखें:
- वेक्टर फ़ॉर्मैट को प्राथमिकता दें: वेक्टर इमेज का रिज़ॉल्यूशन और स्केल स्वतंत्र होता है. इससे वे कई डिवाइस और हाई रिज़ॉल्यूशन वाली दुनिया के लिए सबसे सही बन जाती हैं.
- SVG ऐसेट को छोटा और कंप्रेस करना: ज़्यादातर ड्रॉइंग ऐप्लिकेशन से बने एक्सएमएल मार्कअप में अक्सर ऐसा गै़र-ज़रूरी मेटाडेटा होता है जिसे हटाया जा सकता है; पक्का करें कि आपके सर्वर, SVG ऐसेट के लिए GZIP कंप्रेशन लागू करने के लिए कॉन्फ़िगर किए गए हों.
- पुराने रास्टर फ़ॉर्मैट के बजाय WebP या AVIF को प्राथमिकता दें: WebP और AVIF इमेज, आम तौर पर पुराने इमेज फ़ॉर्मैट की तुलना में काफ़ी छोटे होंगे.
- सबसे अच्छा रास्टर इमेज फ़ॉर्मैट चुनें: अपने फ़ंक्शन के लिए ज़रूरी शर्तें तय करें और हर एसेट के हिसाब से सही फ़ॉर्मैट चुनें.
- रास्टर फ़ॉर्मैट के लिए सबसे अच्छी क्वालिटी सेटिंग के साथ प्रयोग करें: "क्वालिटी" सेटिंग को कम करने में ज़रा भी न डरें, अक्सर नतीजे बहुत अच्छे होते हैं और बाइट की बचत भी काफ़ी होती है.
- ग़ैर-ज़रूरी इमेज मेटाडेटा हटाएं: कई रास्टर इमेज में एसेट के बारे में गै़र-ज़रूरी मेटाडेटा होता है: भौगोलिक जानकारी, कैमरे की जानकारी वगैरह. इस डेटा को हटाने के लिए सही टूल का इस्तेमाल करें.
- स्केल की गई इमेज दिखाएं: इमेज का साइज़ बदलें और पक्का करें कि "डिसप्ले" का साइज़, इमेज के "सामान्य" साइज़ के ज़्यादा से ज़्यादा करीब हो. खास तौर पर बड़ी इमेज पर ध्यान दें, क्योंकि साइज़ बदलने पर उनसे ही सबसे बड़ा ओवरहेड बनता है!
- ऑटोमेटेड, ऑटोमेट, और ऑटोमेट करना: ऐसे ऑटोमेटेड टूल और इन्फ़्रास्ट्रक्चर में निवेश करें जो यह पक्का करेंगे कि आपकी सभी इमेज ऐसेट हमेशा ऑप्टिमाइज़ हों.