डाउनलोड किए गए ज़्यादातर ट्रैफ़िक में इमेज शामिल होती हैं. इसलिए, डाउनलोड की जा सकने वाली इमेज का साइज़ जितना छोटा होगा, आपका ऐप्लिकेशन उपयोगकर्ताओं को उतना ही बेहतर नेटवर्क अनुभव दे पाएगा. इस पेज पर, इमेज फ़ाइलों का साइज़ कम करने और उन्हें नेटवर्क के हिसाब से बेहतर बनाने के बारे में दिशा-निर्देश दिए गए हैं.
इमेज फ़ॉर्मैट के बारे में जानकारी
Android ऐप्लिकेशन आम तौर पर, इन फ़ाइल फ़ॉर्मैट में से किसी एक या उससे ज़्यादा फ़ॉर्मैट वाली इमेज का इस्तेमाल करते हैं: AVIF, PNG, JPG, और WebP. इनमें से हर फ़ॉर्मैट के लिए, इमेज का साइज़ कम करने का तरीका उपलब्ध है.
AVIF
Android 12 (एपीआई लेवल 31) और इसके बाद के वर्शन में, AV1 इमेज फ़ाइल फ़ॉर्मैट (AVIF) का इस्तेमाल करने वाली इमेज काम करती हैं. AVIF, AV1 का इस्तेमाल करके एन्कोड की गई इमेज और इमेज के क्रम के लिए एक कंटेनर फ़ॉर्मैट है. AVIF, वीडियो कंप्रेस करने की प्रोसेस में, इंट्रा-फ़्रेम एन्कोड किए गए कॉन्टेंट का इस्तेमाल करता है. JPEG जैसे पुराने इमेज फ़ॉर्मैट की तुलना में, यह फ़ाइल के साइज़ को बढ़ाए बिना इमेज की क्वालिटी को बेहतर बनाता है. इस फ़ॉर्मैट के फ़ायदों के बारे में ज़्यादा जानने के लिए, Jake Archibald की ब्लॉग पोस्ट पढ़ें.
PNG
PNG फ़ाइलों का साइज़ कम करने के लिए, इमेज बनाने वाले पिक्सल की हर लाइन में इस्तेमाल किए गए अलग-अलग रंगों की संख्या कम करें. कम रंगों का इस्तेमाल करने से, पाइपलाइन के अन्य सभी चरणों में कंप्रेशन की संभावना बढ़ जाती है.
यूनीक रंगों की संख्या कम करने से, इमेज की क्वालिटी पर काफ़ी असर पड़ता है. ऐसा इसलिए, क्योंकि PNG फ़ाइल को कंप्रेस करने की प्रोसेस, इस बात पर निर्भर करती है कि हॉरिज़ॉन्टल तौर पर आस-पास मौजूद पिक्सल के रंग कितने अलग-अलग हैं. इसलिए, PNG इमेज की हर लाइन में यूनीक रंगों की संख्या कम करने से, उनके फ़ाइल साइज़ को कम करने में मदद मिल सकती है.
इस रणनीति को अपनाने का फ़ैसला करते समय, आपको यह ध्यान रखना चाहिए कि यूनीक रंगों की संख्या कम करने का मतलब है कि इमेज पर लॉसलेस एन्कोडिंग स्टेज लागू करना. हालांकि, एन्कोडिंग टूल यह नहीं बता सकता कि कोई छोटी सी गड़बड़ी, इंसान की आंखों को कितनी खराब लग सकती है. इसलिए, आपको यह काम मैन्युअल तरीके से करना चाहिए, ताकि यह पक्का किया जा सके कि इमेज को अच्छी तरह से कंप्रेस किया गया है और उसकी क्वालिटी भी ठीक है.
इन्हें इस्तेमाल करने के दो तरीके हैं: इंडेक्स किए गए फ़ॉर्मैट का इस्तेमाल करना और वेक्टर क्वांटाइज़ेशन लागू करना.
इंडेक्स किए गए फ़ॉर्मैट का इस्तेमाल करें
अगर आपको इमेज में रंगों की संख्या कम करनी है, तो सबसे पहले रंगों को ऑप्टिमाइज़ करने की कोशिश करें. इससे, इमेज को PNG फ़ॉर्मैट में एक्सपोर्ट करते समय, INDEXED फ़ॉर्मैट का इस्तेमाल किया जा सकता है. INDEXED कलर मोड, इस्तेमाल करने के लिए सबसे अच्छे 256 रंगों को चुनता है. साथ ही, सभी पिक्सल वैल्यू को उस कलर पैलेट में इंडेक्स से बदल देता है. इससे, 1.6 करोड़ (संभावित) रंगों से घटकर सिर्फ़ 256 रंग हो जाते हैं. साथ ही, हर पिक्सल के लिए 3 (पारदर्शिता के बिना) या 4 (पारदर्शिता के साथ) बाइट से घटकर 1 बाइट हो जाता है. यह बदलाव, फ़ाइल के साइज़ को कम करने की दिशा में एक अहम कदम है.
पहली इमेज में, एक इमेज और उसका इंडेक्स किया गया वैरिएंट दिखाया गया है.
इमेज 1. INDEXED फ़ॉर्मैट में बदलने से पहले और बाद की इमेज.
दूसरी इमेज में, पहली इमेज के लिए कलर पैलेट दिखाया गया है:
इमेज 2. पहली इमेज के लिए कलर पैलेट.
इमेज को पैलेट वाली इमेज के तौर पर दिखाने से, फ़ाइल का साइज़ काफ़ी कम हो जाता है. इसलिए, यह देखना ज़रूरी है कि आपकी ज़्यादातर इमेज को बदला जा सकता है या नहीं.
बेशक, हर इमेज को सिर्फ़ 256 रंगों में सटीक तरीके से नहीं दिखाया जा सकता. उदाहरण के लिए, कुछ इमेज को सही दिखने के लिए 257, 310, 512 या 912 रंगों की ज़रूरत पड़ सकती है. ऐसे मामलों में, वेक्टर क्वांटाइज़ेशन भी मददगार हो सकता है.
वेक्टर क्वांटाइज़ेशन
इंडेक्स की गई इमेज बनाने की प्रोसेस को वेक्टर क्वांटाइज़ेशन (वीक्यू) के तौर पर बेहतर तरीके से बताया जा सकता है. VQ, कई डाइमेंशन वाले नंबर को राउंड करने की प्रोसेस के तौर पर काम करता है. इस प्रोसेस में, आपकी इमेज में मौजूद सभी रंगों को उनकी समानता के आधार पर ग्रुप किया जाता है. किसी ग्रुप के लिए, उस ग्रुप के सभी रंगों को एक सेंटर पॉइंट वैल्यू से बदल दिया जाता है. इससे उस सेल (या अगर Voronoi शब्दावली का इस्तेमाल किया जा रहा है, तो "साइट") में मौजूद रंगों की गड़बड़ी कम हो जाती है. तीसरी इमेज में, हरे रंग के बिंदु इनपुट कलर को दिखाते हैं. वहीं, लाल रंग के बिंदु ऐसे सेंटर पॉइंट हैं जो इनपुट कलर की जगह लेते हैं. हर सेल को नीली लाइनों से बाउंड किया जाता है.
इमेज 3. किसी इमेज के रंगों पर वेक्टर क्वांटाइज़ेशन लागू करना.
किसी इमेज पर वीक्यू लागू करने से, यूनीक रंगों की संख्या कम हो जाती है. साथ ही, रंगों के हर ग्रुप को एक ऐसे रंग से बदल दिया जाता है जो विज़ुअल क्वालिटी के हिसाब से "लगभग एक जैसा" होता है.
इस तकनीक की मदद से, इमेज में ज़्यादा से ज़्यादा यूनीक रंगों की संख्या भी तय की जा सकती है. उदाहरण के लिए, चौथी इमेज में तोते के सिर को 1.67 करोड़ रंगों (हर पिक्सल के लिए 24 बिट या बीपीपी) में दिखाया गया है. वहीं, दूसरी इमेज में तोते के सिर को सिर्फ़ 16 (3 बीपीपी) यूनीक रंगों में दिखाया गया है.
इमेज 4. वेक्टर क्वांटीफ़िकेशन लागू करने से पहले और बाद की इमेज.
आपको तुरंत पता चल जाएगा कि क्वालिटी में गिरावट आई है. ग्रेडिएंट वाले ज़्यादातर रंगों को बदल दिया गया है. इससे इमेज में बैंडिंग इफ़ेक्ट आ गया है. इस इमेज में 16 से ज़्यादा यूनीक रंगों का इस्तेमाल किया जाना चाहिए.
अपनी पाइपलाइन में VQ चरण सेट अप करने से, आपको यह बेहतर तरीके से पता चल सकता है कि आपकी इमेज में यूनीक रंगों की सही संख्या कितनी है. साथ ही, इससे आपको उन्हें काफ़ी हद तक कम करने में मदद मिल सकती है. इस तकनीक को लागू करने के लिए, कई टूल आसानी से उपलब्ध हैं. इनका इस्तेमाल किया जा सकता है.
JPG
अगर JPG इमेज का इस्तेमाल किया जा रहा है, तो कई छोटे-छोटे बदलाव किए जा सकते हैं. इनसे फ़ाइल के साइज़ को काफ़ी हद तक कम किया जा सकता है. इनमें शामिल हैं:
- अलग-अलग एन्कोडिंग तरीकों का इस्तेमाल करके, फ़ाइल का साइज़ कम करना. इससे क्वालिटी पर कोई असर नहीं पड़ता.
- बेहतर कंप्रेस करने के लिए, क्वालिटी में थोड़ा बदलाव किया जा रहा है.
इन रणनीतियों को अपनाने से, फ़ाइल के साइज़ में अक्सर 25% तक की कमी आ सकती है.
टूल चुनते समय ध्यान रखें कि फ़ोटो एक्सपोर्ट करने वाले टूल, आपकी इमेज में गैर-ज़रूरी मेटाडेटा जोड़ सकते हैं. जैसे, जीपीएस की जानकारी. कम से कम, मौजूदा टूल का इस्तेमाल करके इस जानकारी को अपनी फ़ाइलों से हटाने की कोशिश करें.
WebP
WebP, इमेज का नया फ़ॉर्मैट है. यह Android 4.2.1 (एपीआई लेवल 17) और इसके बाद के वर्शन पर काम करता है. इस फ़ॉर्मैट की मदद से, वेब पर इमेज को दो तरीकों से कंप्रेस किया जाता है. पहला तरीका लॉसलेस, जिसमें इमेज को कोई नुकसान नहीं पहुंचता और दूसरा लॉसी, जिसमें इमेज के डेटा की क्वालिटी थोड़ी खराब हो जाती है. WebP का इस्तेमाल करके, डेवलपर छोटी और बेहतर इमेज बना सकते हैं. WebP लॉसलेस इमेज फ़ाइलें, PNG इमेज फ़ाइलों की तुलना में औसतन 26% छोटी होती हैं. इन इमेज फ़ाइलों में पारदर्शिता (इसे ऐल्फ़ा चैनल भी कहा जाता है) की सुविधा भी काम करती है. इसके लिए, सिर्फ़ 22% ज़्यादा बाइट खर्च होती हैं.
WebP लॉस इमेज, एक जैसे SSIM क्वालिटी इंडेक्स में, उसी तरह की JPG इमेज से 25-34% छोटी होती हैं. जिन मामलों में आरजीबी कंप्रेशन से इमेज की क्वालिटी में कमी स्वीकार की जा सकती है उनके लिए, लॉसलेस WebP में पारदर्शिता की सुविधा भी उपलब्ध है. आम तौर पर, इससे फ़ाइल का साइज़ PNG फ़ाइल के साइज़ से तीन गुना कम हो जाता है.
WebP के बारे में ज़्यादा जानने के लिए, WebP की साइट पर जाएं.
Android Studio का इस्तेमाल करके, मौजूदा BMP, JPG, PNG या स्टैटिक GIF इमेज को WebP फ़ॉर्मैट में बदला जा सकता है. ज़्यादा जानकारी के लिए, Android Studio का इस्तेमाल करके WebP इमेज बनाना लेख पढ़ें.
फ़ॉर्मैट चुनना
अलग-अलग तरह की इमेज के लिए, इमेज के अलग-अलग फ़ॉर्मैट सही होते हैं. JPG और PNG फ़ाइलों को कंप्रेस करने की प्रोसेस अलग-अलग होती है. इसलिए, इनके नतीजे भी अलग-अलग होते हैं.
PNG और JPG में से किसी एक को चुनने का फ़ैसला, अक्सर इमेज की जटिलता के आधार पर लिया जाता है. पांचवें फ़िगर में दो इमेज दिखाई गई हैं. ये इमेज, डेवलपर की ओर से इस्तेमाल की गई कंप्रेशन स्कीम के आधार पर अलग-अलग दिखती हैं. बाईं ओर मौजूद इमेज में कई छोटी-छोटी चीज़ें हैं. इसलिए, JPG फ़ॉर्मैट में इसे ज़्यादा बेहतर तरीके से कंप्रेस किया जा सकता है. दाईं ओर मौजूद इमेज में एक ही रंग का इस्तेमाल किया गया है. इसलिए, PNG फ़ॉर्मैट में इसे ज़्यादा बेहतर तरीके से कंप्रेस किया जा सकता है.
इमेज 5. JPG और PNG फ़ॉर्मैट का इस्तेमाल कब करना चाहिए
WebP फ़ॉर्मैट में, लॉसी और लॉसलेस, दोनों मोड काम करते हैं. इसलिए, यह PNG और JPG, दोनों फ़ॉर्मैट के लिए सबसे सही विकल्प है. आपको बस यह ध्यान रखना होगा कि यह सुविधा, Android 4.2.1 (एपीआई लेवल 17) और इसके बाद के वर्शन वाले डिवाइसों पर ही काम करती है. अच्छी बात यह है कि ज़्यादातर डिवाइसों पर यह सुविधा काम करती है.
छठी इमेज में, एक आसान विज़ुअलाइज़ेशन दिया गया है. इससे आपको यह तय करने में मदद मिलेगी कि आपको कौनसा कंप्रेशन स्कीम इस्तेमाल करना है.
इमेज 6. कंप्रेशन स्कीम तय करना
क्वालिटी की सबसे सही वैल्यू तय करना
कंप्रेशन और इमेज क्वालिटी के बीच सही संतुलन बनाए रखने के लिए, कई तकनीकों का इस्तेमाल किया जा सकता है. एक तकनीक में स्केलर वैल्यू का इस्तेमाल किया जाता है. इसलिए, यह सिर्फ़ JPG और WebP फ़ाइलों के लिए काम करती है. दूसरी तकनीक में, Butteraugli लाइब्रेरी का इस्तेमाल किया जाता है. इसका इस्तेमाल सभी इमेज फ़ॉर्मैट के लिए किया जा सकता है.
स्केलर वैल्यू (सिर्फ़ JPG और WebP)
JPG और WebP फ़ॉर्मैट की सबसे बड़ी खासियत यह है कि इनमें स्केलर वैल्यू का इस्तेमाल किया जा सकता है. इससे फ़ाइल के साइज़ और क्वालिटी के बीच संतुलन बनाए रखने में मदद मिलती है. इसमें यह पता लगाना होता है कि आपकी इमेज के लिए सही क्वालिटी वैल्यू क्या है. क्वालिटी का लेवल बहुत कम होने पर, इमेज की क्वालिटी खराब हो जाती है और फ़ाइल का साइज़ छोटा हो जाता है. क्वालिटी लेवल बहुत ज़्यादा होने पर, फ़ाइल का साइज़ बढ़ जाता है. हालांकि, इससे उपयोगकर्ता को कोई खास फ़ायदा नहीं मिलता.
सबसे आसान तरीका यह है कि आप कोई ऐसी वैल्यू चुनें जो ज़्यादा से ज़्यादा वैल्यू न हो और उस वैल्यू का इस्तेमाल करें. हालांकि, ध्यान रखें कि क्वालिटी वैल्यू का असर हर इमेज पर अलग-अलग होता है. उदाहरण के लिए, 75% क्वालिटी वाली इमेज ज़्यादातर मामलों में ठीक दिख सकती है. हालांकि, कुछ मामलों में ऐसा नहीं होता. आपको यह पक्का करना चाहिए कि आपने जो ज़्यादा से ज़्यादा वैल्यू चुनी है उसे इमेज के किसी सैंपल के साथ टेस्ट किया गया हो. साथ ही, पक्का करें कि सभी टेस्ट ओरिजनल इमेज पर किए गए हों, न कि कंप्रेस किए गए वर्शन पर.
बड़े मीडिया ऐप्लिकेशन, हर दिन लाखों JPG फ़ाइलें अपलोड और फिर से भेजते हैं. ऐसे में, हर ऐसेट के लिए मैन्युअल तरीके से ट्यूनिंग करना मुश्किल होता है. इस समस्या को हल करने के लिए, इमेज की कैटगरी के हिसाब से अलग-अलग क्वालिटी लेवल तय किए जा सकते हैं. उदाहरण के लिए, थंबनेल के लिए क्वालिटी सेटिंग को 35% पर सेट किया जा सकता है, क्योंकि छोटी इमेज में कंप्रेस करने से जुड़ी गड़बड़ियां कम दिखती हैं.
बटरऑग्ली
Butteraugli प्रोजेक्ट, किसी इमेज के साइकोविज़ुअल एरर थ्रेशोल्ड की जांच करने वाली लाइब्रेरी है. साइकोविज़ुअल एरर थ्रेशोल्ड वह पॉइंट होता है जब दर्शक को इमेज की क्वालिटी में गिरावट दिखने लगती है. दूसरे शब्दों में कहें, तो इस प्रोजेक्ट का मकसद यह पता लगाना है कि कंप्रेस की गई आपकी इमेज कितनी खराब हुई है.
Butteraugli की मदद से, विज़ुअल क्वालिटी का लक्ष्य तय किया जा सकता है. इसके बाद, PNG, JPG, WebP lossy, और WebP lossless कंप्रेसर चलाए जा सकते हैं. इसके बाद, फ़ाइल के साइज़ और बटरऑग्ली लेवल के हिसाब से सबसे अच्छी इमेज चुनी जा सकती है. सातवीं इमेज में, यह दिखाया गया है कि Butteraugli का इस्तेमाल करके, JPG की क्वालिटी का सबसे कम लेवल कैसे पता लगाया गया. ऐसा तब किया गया, जब विज़ुअल डिस्टॉर्शन इतना ज़्यादा नहीं था कि उपयोगकर्ता को कोई समस्या दिख सके. इससे फ़ाइल के साइज़ में करीब 65% की कमी आई.
इमेज 7. बटरऑगली टेक्नोलॉजी का इस्तेमाल करने से पहले और बाद की इमेज.
Butteraugli, आउटपुट या इनपुट के आधार पर आगे बढ़ने की अनुमति देता है. इसका मतलब है कि इमेज में काफ़ी बदलाव होने से पहले, सबसे खराब क्वालिटी वाली सेटिंग का पता लगाया जा सकता है. इसके अलावा, इमेज में बदलाव के लेवल को बार-बार सेट करके, उनसे जुड़ी क्वालिटी के लेवल के बारे में जाना जा सकता है.
सर्व करने की मात्रा
सर्वर पर किसी इमेज का सिर्फ़ एक रिज़ॉल्यूशन रखने का विकल्प उपलब्ध होता है. जब कोई डिवाइस इमेज को ऐक्सेस करता है, तो सर्वर उसे एक ही रिज़ॉल्यूशन में दिखाता है. साथ ही, इमेज के रिज़ॉल्यूशन को कम करने का काम डिवाइस पर छोड़ देता है.
यह समाधान डेवलपर के लिए सुविधाजनक है, लेकिन उपयोगकर्ता के लिए परेशानी भरा हो सकता है. ऐसा इसलिए, क्योंकि यह समाधान उपयोगकर्ता को ज़रूरत से ज़्यादा डेटा डाउनलोड करने के लिए मजबूर करता है. इसके बजाय, आपको इमेज के कई साइज़ सेव करने चाहिए. साथ ही, इस्तेमाल के किसी खास उदाहरण के लिए सबसे सही साइज़ वाली इमेज दिखानी चाहिए. उदाहरण के लिए, थंबनेल के लिए, पूरे साइज़ वाली इमेज को छोटा करके दिखाने के बजाय, थंबनेल की असल इमेज दिखाने से नेटवर्क बैंडविड्थ का इस्तेमाल काफ़ी कम होता है
यह तरीका, डाउनलोड करने की स्पीड के लिए अच्छा है. साथ ही, यह उन लोगों के लिए कम खर्चीला है जो सीमित या मीटर वाले डेटा प्लान का इस्तेमाल कर रहे हैं. इस तरह से आगे बढ़ने पर, इमेज डिवाइस और मुख्य मेमोरी में कम जगह लेती है. 4K जैसी बड़ी इमेज के मामले में, इस तरीके से डिवाइस को इमेज का साइज़ बदलने से भी बचाया जा सकता है. ऐसा इसलिए, क्योंकि इमेज को लोड करने से पहले ही उनका साइज़ बदल दिया जाता है.
इस तरीके को लागू करने के लिए, आपके पास बैकएंड इमेज सेवा होनी चाहिए. इससे अलग-अलग रिज़ॉल्यूशन वाली इमेज उपलब्ध कराई जा सकती हैं. साथ ही, इमेज को सही तरीके से कैश किया जा सकता है. ऐसी मौजूदा सेवाएं उपलब्ध हैं जो इस काम में आपकी मदद कर सकती हैं. उदाहरण के लिए, App Engine में इमेज का साइज़ बदलने की सुविधा पहले से इंस्टॉल होती है.