किसी वेब पेज पर डाउनलोड होने वाले ज़्यादातर बाइट अक्सर इमेज के होते हैं और ये अक्सर काफ़ी विज़ुअल स्पेस लेते हैं. इससे, इमेज को ऑप्टिमाइज़ करने से बाइट में बहुत ज़्यादा बचत हो सकती है और आपकी वेबसाइट की परफ़ॉर्मेंस बेहतर हो सकती है: ब्राउज़र को जितनी कम बाइट डाउनलोड करनी होंगी, क्लाइंट के बैंडविड्थ के लिए उतनी ही कम प्रतिस्पर्धा होगी और ब्राउज़र उतनी ही तेज़ी से स्क्रीन पर उपयोगी कॉन्टेंट डाउनलोड और रेंडर कर पाएगा.
इमेज ऑप्टिमाइज़ेशन कला और विज्ञान, दोनों ही है: एक कला, क्योंकि इस बात का कोई तय जवाब नहीं है कि किसी इमेज को कैसे कंप्रेस किया जाए. विज्ञान भी है, क्योंकि ऐसी बहुत सारी तकनीकें और एल्गोरिदम हैं जो इमेज के साइज़ को काफ़ी कम कर सकती हैं. अपनी इमेज के लिए सबसे सही सेटिंग ढूंढने के लिए कई डाइमेंशन का गहराई से विश्लेषण करने की ज़रूरत होती है: फ़ॉर्मैट की क्षमताएं, कोड में बदले गए डेटा का कॉन्टेंट, क्वालिटी, पिक्सल डाइमेंशन वगैरह.
वेक्टर इमेज ऑप्टिमाइज़ करना
सभी आधुनिक ब्राउज़र स्केलेबल वेक्टर ग्राफ़िक (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 पिक्सल का क्रम होता है. बदले में, हर पिक्सल "RGBA" वैल्यू सेव करता है: (R) रेड चैनल, (G) ग्रीन चैनल, (B) ब्लू चैनल, और (A) ऐल्फ़ा (पारदर्शिता) चैनल.
ब्राउज़र, इंटरनल तौर पर हर चैनल के लिए 256 वैल्यू (शेड) देता है. चैनल के लिए यह वैल्यू 8 बिट (2 ^ 8 = 256) और हर पिक्सल के लिए चार बाइट (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 केबी की इमेज शायद आपको ज़्यादा काम की न लगे, लेकिन बड़ी इमेज के लिए फ़ाइल का साइज़ जल्दी बड़ा हो जाता है. इससे इमेज एसेट धीमी और महंगा, दोनों डाउनलोड हो जाती हैं. इस पोस्ट में अब तक सिर्फ़ "कंप्रेस्ड" इमेज फ़ॉर्मैट पर फ़ोकस किया गया है. हालांकि, इमेज फ़ाइल के साइज़ को कम करने के लिए बहुत कुछ किया जा सकता है.
एक आसान रणनीति यह है कि हर चैनल के लिए इमेज की "बिट-डेप्थ" को 8 बिट से कम करके छोटे रंग पटल पर सेट किया जाए: हर चैनल के लिए 8 बिट, हमें हर चैनल के लिए 256 वैल्यू और कुल 1,67,77,216 (256 ^ 3) कलर मिलती हैं. अगर पैलेट को कम करके 256 किया जाए, तो क्या होगा? इसके बाद, आपको आरजीबी चैनलों के लिए कुल 8 बिट की ज़रूरत होगी और तुरंत दो बाइट प्रति पिक्सल सेव करने होंगे—यह मूल 4 बाइट प्रति पिक्सल फ़ॉर्मैट के मुकाबले 50% कम्प्रेशन से होने वाली बचत है!
धीरे-धीरे रंग के ट्रांज़िशन वाले कॉम्प्लेक्स सीन (उदाहरण के लिए, ग्रेडिएंट या आसमान) में बड़े रंग पटल की ज़रूरत होती है, ताकि 5-बिट ऐसेट में पिक्सलेट किए हुए आसमान जैसे विज़ुअल आर्टफ़ैक्ट को न दिखाया जा सके. वहीं दूसरी ओर, अगर इमेज में कुछ ही रंगों का इस्तेमाल किया गया है, तो एक बड़ा पैलेट, कीमती बिट को बर्बाद कर रहा है!
इसके बाद, अलग-अलग पिक्सल में स्टोर किए गए डेटा को ऑप्टिमाइज़ करने के बाद, आपके पास ज़्यादा समझदारी से काम करने और आस-पास के पिक्सल देखने का विकल्प होगा: इससे पता चलता है कि आस-पास के कई पिक्सल और खास तौर पर फ़ोटो में, मिलते-जुलते रंगों वाले कई पिक्सल होते हैं—उदाहरण के लिए, आकाश, एक ही रंग का बार-बार दिखने वाला टेक्स्चर वगैरह. इस जानकारी का इस्तेमाल करके कंप्रेसर डेल्टा एन्कोडिंग लागू कर सकता है, जहां हर पिक्सल के लिए अलग-अलग वैल्यू सेव करने के बजाय, आस-पास के पिक्सल के बीच का अंतर स्टोर किया जा सकता है: अगर पास के पिक्सल एक जैसे हैं, तो डेल्टा "शून्य" है और आपको सिर्फ़ एक बिट सेव करना होगा! लेकिन रुको क्यों...
इंसानों की आंखों में अलग-अलग रंगों के लिए अलग-अलग लेवल की संवेदनशीलता होती है: इसके लिए, कलर एन्कोडिंग को ऑप्टिमाइज़ किया जा सकता है. ऐसा करने के लिए, रंग के पटल को कम या ज़्यादा करें. "आस-पास" पिक्सल से दो-डाइमेंशन वाला ग्रिड बनता है. इसका मतलब है कि हर पिक्सल के एक से ज़्यादा पड़ोसी होते हैं: डेल्टा एन्कोडिंग को और बेहतर बनाने के लिए इस तथ्य का इस्तेमाल किया जा सकता है. हर पिक्सल के लिए सिर्फ़ आस-पास की चीज़ों पर नज़र रखने के बजाय, आस-पास के पिक्सल के बड़े ब्लॉक पर नज़र डालें और अलग-अलग सेटिंग के ज़रिए अलग-अलग ब्लॉक को कोड में बदलें.
जैसा कि आपको बताना चाहिए, इमेज ऑप्टिमाइज़ेशन बहुत जल्दी मुश्किल (या मज़ेदार, आपके नज़रिए के हिसाब से) हो जाता है. साथ ही, शिक्षा और व्यावसायिक तौर पर की जाने वाली रिसर्च का एक अहम हिस्सा है. इमेज का साइज़ बहुत ज़्यादा बाइट होता है. इसलिए, इमेज को कंप्रेस करने की बेहतर तकनीकों को डेवलप करने में बहुत मदद मिलती है! अगर आपको इस बारे में ज़्यादा जानना है, तो Wikipedia पेज पर जाएं या WebP कंप्रेशन तकनीक से जुड़ा व्हाइट पेपर देखें.
एक बार फिर से बता दें कि यह बहुत बढ़िया है, लेकिन यह बहुत ही शैक्षणिक भी है: यह आपकी साइट पर इमेज को ऑप्टिमाइज़ करने में कैसे मदद करता है? समस्या के आकार को समझना ज़रूरी है: आरजीबीए पिक्सल, बिट डेप्थ, और अलग-अलग ऑप्टिमाइज़ेशन तकनीकें. अलग-अलग रास्टर इमेज फ़ॉर्मैट के बारे में चर्चा शुरू करने से पहले, इन सभी कॉन्सेप्ट को समझना और इन्हें ध्यान में रखना ज़रूरी है.
खराब इमेज कंप्रेस करने की तुलना
कुछ खास तरह के डेटा, जैसे कि पेज का सोर्स कोड या एक्ज़ीक्यूटेबल फ़ाइल के लिए, यह ज़रूरी है कि कंप्रेसर में दी गई ओरिजनल जानकारी में कोई बदलाव न हो या वह खो न जाए: एक छोटा या गलत डेटा, फ़ाइल के कॉन्टेंट का मतलब पूरी तरह बदल सकता है या उसमें गड़बड़ी भी हो सकती है. कुछ अन्य तरह के डेटा, जैसे कि इमेज, ऑडियो, और वीडियो के लिए, मूल डेटा को "अनुमानित" तरीके से दिखाना पूरी तरह से स्वीकार किया जा सकता है.
दरअसल, आंख के काम करने के तरीके की वजह से हम अक्सर हर पिक्सल की कुछ जानकारी खारिज कर देते हैं, ताकि किसी इमेज का फ़ाइल साइज़ कम किया जा सके. उदाहरण के लिए, हमारी आंखों के लिए अलग-अलग रंगों की संवेदनशीलता अलग-अलग होती है. इसका मतलब है कि हम कुछ रंगों को कोड में बदलने के लिए कम बिट का इस्तेमाल कर सकते हैं. इस वजह से, एक सामान्य इमेज ऑप्टिमाइज़ेशन पाइपलाइन में दो हाई लेवल के चरण शामिल होते हैं:
- इमेज को लॉसी फ़िल्टर की मदद से प्रोसेस किया जाता है, जो कुछ पिक्सल डेटा को हटा देता है.
- इमेज को एक लॉसलेस फ़िल्टर की मदद से प्रोसेस किया जाता है, जो पिक्सल डेटा को कंप्रेस करता है.
पहला चरण वैकल्पिक है और सटीक एल्गोरिदम, इमेज के किसी खास फ़ॉर्मैट पर निर्भर करेगा. हालांकि, यह समझना ज़रूरी है कि किसी भी इमेज का साइज़ कम करने के लिए, उसे कंप्रेस करने वाले चरण से गुज़रना पड़ सकता है. असल में, GIF, PNG, JPEG, और अन्य इमेज फ़ॉर्मैट के बीच का अंतर, उन एल्गोरिदम के कॉम्बिनेशन में होता है जिनका इस्तेमाल वे गड़बड़ी और लॉसलेस चरणों को लागू करने के लिए करते हैं.
आइए जानते हैं कि नुकसान पहुंचाने वाले और नुकसान न पहुंचाने वाले ऑप्टिमाइज़ेशन का "सबसे अच्छा" कॉन्फ़िगरेशन क्या है? इसका जवाब, इमेज के कॉन्टेंट और आपकी ज़रूरतों पर निर्भर करता है. जैसे, नुकसान पहुंचाने वाले कंप्रेशन की वजह से फ़ाइल के साइज़ और आर्टफ़ैक्ट को आपस में जोड़ना: कुछ मामलों में, हो सकता है कि आपको पूरी क्वालिटी के साथ बारीकियां बताने के लिए, खराब ऑप्टिमाइज़ेशन को स्किप करना पड़े. अन्य मामलों में, इमेज ऐसेट की फ़ाइल का साइज़ कम करने के लिए, नुकसान पहुंचाने वाले एग्रेसिव ऑप्टिमाइज़ेशन लागू किया जा सकता है. ऐसे मामले में, हर चीज़ के लिए अपनी सूझ-बूझ और संदर्भ की ज़रूरत होती है. ऐसी कोई एक सेटिंग नहीं है, जो सभी पर निर्भर करती है.
उदाहरण के लिए, JPEG जैसे नुकसान पहुंचाने वाले फ़ॉर्मैट का इस्तेमाल करते समय कंप्रेसर, पसंद के मुताबिक बनाई जा सकने वाली "क्वालिटी" सेटिंग दिखाएगा (उदाहरण के लिए, Adobe Photoshop में "वेब के लिए सेव करें" सुविधा से मिलने वाला क्वालिटी स्लाइडर). यह आम तौर पर 1 से 100 के बीच की वह संख्या होती है जो नुकसान पहुंचाने वाले और नुकसान न पहुंचाने वाले एल्गोरिदम के खास कलेक्शन के अंदर की कार्रवाइयों को कंट्रोल करती है. सबसे अच्छे नतीजों के लिए, अपनी इमेज की क्वालिटी से जुड़ी अलग-अलग सेटिंग आज़माकर देखें. साथ ही, क्वालिटी को कम करने में न घबराएं. विज़ुअल नतीजे अक्सर बहुत अच्छे होते हैं और फ़ाइल साइज़ की बचत भी काफ़ी हो सकती है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट में, इमेज को कंप्रेस करने के असर
आम तौर पर, इमेज सबसे बड़े कॉन्टेंटफ़ुल पेंट के तौर पर इस्तेमाल की जाती हैं. इसलिए, किसी इमेज के रिसॉर्स लोड होने की अवधि को कम करने से, लैब और फ़ील्ड, दोनों में एलसीपी को बेहतर बनाया जा सकता है.
रास्टर इमेज फ़ॉर्मैट पर कंप्रेशन सेटिंग के साथ चलाते समय, WebP और AVIF फ़ॉर्मैट के साथ एक्सपेरिमेंट करना न भूलें. इससे यह पता चलेगा कि क्या पुराने फ़ॉर्मैट की तुलना में छोटे फ़ुटप्रिंट में वही इमेज डिलीवर की जा सकती है या नहीं.
हालांकि, आप इस बात का ध्यान रखना चाहते हैं कि रास्टर इमेज को ओवरकंप्रेस न किया जाए. अपने लिए सबसे अच्छी कंप्रेशन सेटिंग खोजने के लिए, इमेज ऑप्टिमाइज़ेशन सीडीएन का इस्तेमाल करना एक अच्छा विकल्प है. हालांकि, विज़ुअल अंतर का अनुमान लगाने के लिए बटरौगली जैसे टूल का इस्तेमाल किया जा सकता है. इससे इमेज को बहुत ज़्यादा एन्कोड नहीं किया जाएगा और क्वालिटी भी बहुत खराब नहीं होगी.
इमेज ऑप्टिमाइज़ेशन की चेकलिस्ट
इमेज को ऑप्टिमाइज़ करते समय ध्यान में रखने लायक कुछ सलाह और तकनीकें:
- वेक्टर फ़ॉर्मैट को प्राथमिकता दें: वेक्टर इमेज का रिज़ॉल्यूशन और स्केल स्वतंत्र होता है. इस वजह से वे मल्टी-डिवाइस और हाई-रिज़ॉल्यूशन वाली इमेज के लिए सबसे सटीक बन जाती हैं.
- SVG एसेट को छोटा और कंप्रेस करें: ज़्यादातर ड्रॉइंग ऐप्लिकेशन के ज़रिए बनाए गए एक्सएमएल मार्कअप में अक्सर ऐसा गैर-ज़रूरी मेटाडेटा होता है जिसे हटाया जा सकता है; पक्का करें कि आपके सर्वर SVG एसेट के लिए GZIP कंप्रेशन लागू करने के लिए कॉन्फ़िगर किए गए हों.
- पुराने रास्टर फ़ॉर्मैट के मुकाबले WebP या AVIF को प्राथमिकता दें: आम तौर पर, WebP और AVIF इमेज, पुराने इमेज फ़ॉर्मैट की तुलना में बहुत छोटे होते हैं.
- सबसे अच्छे रास्टर इमेज फ़ॉर्मैट चुनें: अपने फ़ंक्शन से जुड़ी ज़रूरी शर्तें तय करें और हर ऐसेट के हिसाब से सही विकल्प चुनें.
- रास्टर फ़ॉर्मैट के लिए सबसे अच्छी क्वालिटी सेटिंग के साथ प्रयोग करें: "क्वालिटी" सेटिंग को कम करने से न घबराएं, इससे मिलने वाले नतीजे अक्सर बहुत अच्छे होते हैं और बाइट की बचत भी काफ़ी होती है.
- गैर-ज़रूरी इमेज मेटाडेटा हटाएं: कई रास्टर इमेज में ऐसेट के बारे में गैर-ज़रूरी मेटाडेटा होता है: जियो की जानकारी, कैमरे की जानकारी वगैरह. इस डेटा को कम करने के लिए सही टूल का इस्तेमाल करें.
- स्केल की गई इमेज उपलब्ध कराएं: इमेज का साइज़ बदलें. साथ ही, पक्का करें कि "डिसप्ले" साइज़, इमेज के "सामान्य" साइज़ के ज़्यादा से ज़्यादा करीब हो. खास तौर पर बड़ी इमेज पर ध्यान दें, क्योंकि साइज़ बदलने पर वे सबसे बड़े ओवरहेड के बारे में सोचती हैं!
- ऑटोमैटिक, ऑटोमेटिक, और ऑटोमेटिक: ऐसे ऑटोमेटेड टूल और इन्फ़्रास्ट्रक्चर में निवेश करें जो यह पक्का करेंगे कि आपकी सभी इमेज ऐसेट हमेशा ऑप्टिमाइज़ रहें.