इमेज के साथ काम करते समय, अगर ध्यान नहीं दिया जाता है, तो परफ़ॉर्मेंस से जुड़ी समस्याएं तुरंत आ सकती हैं. बड़े बिटमैप के साथ काम करते समय, आपको OutOfMemoryError
का सामना आसानी से हो सकता है. अपने ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने के लिए, ये सबसे सही तरीके अपनाएं.
सिर्फ़ अपनी ज़रूरत के मुताबिक बिटमैप का साइज़ लोड करें
ज़्यादातर स्मार्टफ़ोन में हाई रिज़ॉल्यूशन वाले कैमरे होते हैं, जो बड़ी इमेज फ़ाइलें बनाते हैं. अगर स्क्रीन पर इमेज दिखाई जा रही है, तो आपको इमेज का रिज़ॉल्यूशन कम करना होगा या सिर्फ़ इमेज कंटेनर के साइज़ तक ही इमेज लोड करनी होगी. लगातार ज़रूरत से ज़्यादा इमेज लोड होने की वजह से जीपीयू कैश मेमोरी खत्म हो सकती हैं. इस वजह से, यूज़र इंटरफ़ेस (यूआई) रेंडर होने में कम समय लगता है.
इमेज के साइज़ मैनेज करने के लिए:
- अपनी इमेज फ़ाइलों को जितना हो सके उतना छोटा करें. ऐसा करने से, आउटपुट इमेज पर कोई असर नहीं पड़ेगा.
- JPEG या PNG के बजाय, अपनी इमेज को WEBP फ़ॉर्मैट में बदलें.
- अलग-अलग स्क्रीन रिज़ॉल्यूशन के लिए छोटी इमेज दें (सलाह #3 देखें),
- इमेज लोड करने वाली लाइब्रेरी का इस्तेमाल करें. इससे, स्क्रीन पर आपके व्यू के साइज़ में फ़िट होने के लिए, इमेज का साइज़ कम हो जाता है. इससे आपकी स्क्रीन के लोड होने की परफ़ॉर्मेंस बेहतर हो सकती है.
जहां भी हो सके, बिटमैप के बजाय वेक्टर का इस्तेमाल करें
स्क्रीन पर किसी चीज़ को विज़ुअल के तौर पर दिखाते समय, आपको यह तय करना होगा कि उसे वेक्टर के तौर पर दिखाया जा सकता है या नहीं. बिटमैप के बजाय वेक्टर इमेज का इस्तेमाल करें, क्योंकि इन्हें अलग-अलग साइज़ में स्केल करने पर, इनमें पिक्सल नहीं दिखते. हालांकि, हर चीज़ को वेक्टर के तौर पर नहीं दिखाया जा सकता. कैमरे से ली गई इमेज को वेक्टर में बदला नहीं जा सकता.
अलग-अलग स्क्रीन साइज़ के लिए वैकल्पिक रिसॉर्स उपलब्ध कराएं
अगर आपको अपने ऐप्लिकेशन के साथ इमेज शिप करनी हैं, तो अलग-अलग डिवाइस रिज़ॉल्यूशन के लिए अलग-अलग साइज़ की एसेट उपलब्ध कराएं. इससे डिवाइसों पर आपके ऐप्लिकेशन के डाउनलोड साइज़ को कम करने में मदद मिल सकती है. साथ ही, परफ़ॉर्मेंस भी बेहतर हो सकती है, क्योंकि यह कम रिज़ॉल्यूशन वाले डिवाइस पर कम रिज़ॉल्यूशन वाली इमेज लोड करेगा. अलग-अलग डिवाइस साइज़ के लिए वैकल्पिक बिटमैप उपलब्ध कराने के बारे में ज़्यादा जानने के लिए, वैकल्पिक बिटमैप के दस्तावेज़ देखें.
ImageBitmap
का इस्तेमाल करते समय, ड्रॉ करने से पहले prepareToDraw
को कॉल करें
ImageBitmap
का इस्तेमाल करते समय, टेक्स्चर को GPU पर अपलोड करने की प्रोसेस शुरू करने के लिए, उसे ड्रॉ करने से पहले ImageBitmap#prepareToDraw()
को कॉल करें. इससे जीपीयू को टेक्स्चर तैयार करने और स्क्रीन पर विज़ुअल दिखाने की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलती है. ज़्यादातर इमेज लोड करने वाली लाइब्रेरी, पहले से ही यह ऑप्टिमाइज़ेशन करती हैं. हालांकि, अगर आपने ImageBitmap
क्लास का इस्तेमाल किया है, तो इसे ध्यान में रखें.
Painter
के बजाय, अपने कॉम्पोज़ेबल में पैरामीटर के तौर पर Int
DrawableRes
या यूआरएल इस्तेमाल करें
इमेज के साथ काम करने की जटिलताओं की वजह से, Painter
एपीआई को साफ़ तौर पर स्टैबल क्लास के तौर पर मार्क नहीं किया गया है. उदाहरण के लिए, Bitmaps
के लिए बराबर वाला फ़ंक्शन लिखना, गणना के हिसाब से महंगा होगा. स्थिर न होने वाली क्लास की वजह से, गै़र-ज़रूरी बदलाव हो सकते हैं. इसकी वजह यह है कि डेटा में बदलाव होने पर कंपाइलर आसानी से यह अनुमान नहीं लगा सकता.
इसलिए, पैरामीटर के तौर पर Painter
पास करने के बजाय, अपने कॉम्पोज़ेबल में पैरामीटर के तौर पर यूआरएल या ड्रॉबल संसाधन आईडी पास करना बेहतर होता है.
// Prefer this:
@Composable
fun MyImage(url: String) {
}
// Over this:
@Composable
fun MyImage(painter: Painter) {
}
बिटमैप को ज़रूरत से ज़्यादा समय तक मेमोरी में सेव न रखें
मेमोरी में जितने ज़्यादा बिटमैप लोड किए जाते हैं, डिवाइस में मेमोरी खत्म होने की संभावना उतनी ही ज़्यादा होती है. उदाहरण के लिए, अगर स्क्रीन पर इमेज कॉम्पोज़ेबल की बड़ी सूची लोड की जा रही है, तो LazyColumn
या LazyRow
का इस्तेमाल करें. इससे, बड़ी सूची को स्क्रोल करते समय मेमोरी खाली हो जाएगी.
अपनी AAB/APK फ़ाइल के साथ बड़ी इमेज पैकेज न करें
ऐप्लिकेशन के बड़े डाउनलोड साइज़ की एक सबसे बड़ी वजह एएबी या APK फ़ाइल में पैकेज किए गए ग्राफ़िक हैं. APK ऐनालाइज़र टूल का इस्तेमाल करके यह पक्का करें कि आपकी पैकेजिंग ज़रूरी इमेज फ़ाइलों से बड़ी न हो. इमेज के साइज़ कम करें या इमेज को सर्वर पर डालें और ज़रूरत पड़ने पर ही उन्हें डाउनलोड करें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- ImageBitmap बनाम Image पक्ष {:#bitmap-vs-vector}
- Compose में यूज़र इंटरफ़ेस (यूआई) की स्थिति सेव करना
- Jetpack Compose के चरण