इमेज बिटमैप बनाम इमेज वेक्टर

इमेज के दो सबसे आम फ़ॉर्मैट, रास्टर और वेक्टर इमेज होते हैं.

रास्टर ग्राफ़िक फ़ॉर्मैट में पिक्सल होते हैं. ये छोटे-छोटे स्क्वेयर होते हैं, जिनमें रंग होता है. यह रंग, लाल, हरे, नीले, और ऐल्फ़ा वैल्यू से मिलकर बना होता है. कई पिक्सल को एक साथ रखने पर, बहुत ज़्यादा जानकारी वाली इमेज बनाई जा सकती है. जैसे, कोई फ़ोटोग्राफ़. रास्टर ग्राफ़िक का रिज़ॉल्यूशन तय होता है. यानी, इसमें पिक्सल की संख्या तय होती है. इसका मतलब है कि इमेज का साइज़ बढ़ाने पर, उसकी क्वालिटी खराब हो जाती है और पिक्सल दिख सकते हैं. रास्टर ग्राफ़िक फ़ॉर्मैट के उदाहरण JPEG, PNG, और WEBP हैं.

गोल्डन रिट्रीवर नस्ल के कुत्ते की क्लोज़-अप फ़ोटो.
पहली इमेज. JPEG फ़ाइल का उदाहरण.

वहीं दूसरी ओर, वेक्टर इमेज को स्क्रीन पर मौजूद किसी विज़ुअल एलिमेंट के गणितीय प्रतिनिधित्व के तौर पर दिखाया जाता है. इन्हें ज़रूरत के हिसाब से बड़ा या छोटा किया जा सकता है. वेक्टर, निर्देशों का एक सेट होता है. इसमें यह बताया जाता है कि स्क्रीन पर इमेज कैसे बनानी है. उदाहरण के लिए, लाइन, पॉइंट या फ़िल. स्क्रीन पर किसी वेक्टर को बड़ा करने पर, उसकी क्वालिटी कम नहीं होती. ऐसा इसलिए होता है, क्योंकि गणित का फ़ॉर्मूला अलग-अलग कमांड के बीच के संबंध को बनाए रखता है. ImageVector के अच्छे उदाहरणों में, मटीरियल सिंबल शामिल हैं. ऐसा इसलिए, क्योंकि इन सभी को गणित के फ़ॉर्मूले से तय किया जा सकता है.

यह शॉपिंग कार्ट का एक सामान्य लाइन-आर्ट आइकॉन है. इसमें हैंडल, बास्केट, और दो पहिए हैं.
दूसरी इमेज. वेक्टर का उदाहरण (फ़ाइल एक्सटेंशन .xml है या Kotlin कोड में तय किया गया है).

ImageBitmap

Compose में, रास्टर इमेज (इसे अक्सर Bitmap कहा जाता है) को ImageBitmap इंस्टेंस में लोड किया जा सकता है. साथ ही, BitmapPainter स्क्रीन पर बिटमैप को ड्रॉ करने के लिए ज़िम्मेदार होता है.

सामान्य इस्तेमाल के उदाहरणों के लिए, painterResource() का इस्तेमाल करके ImageBitmap बनाया जा सकता है. साथ ही, यह Painter ऑब्जेक्ट दिखाता है. इस मामले में, यह BitmapPainter है:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

अगर आपको और कस्टमाइज़ेशन (उदाहरण के लिए, कस्टम पेंटर लागू करना) की ज़रूरत है और आपको ImageBitmap का ऐक्सेस चाहिए, तो इसे इस तरह लोड किया जा सकता है:

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)

ImageVector

VectorPainter, स्क्रीन पर ImageVector को ड्रॉ करने के लिए ज़िम्मेदार होता है. ImageVector, स्केलेबल वेक्टर ग्राफ़िक्स (एसवीजी) की कुछ कमांड के साथ काम करता है. सभी इमेज को वेक्टर के तौर पर नहीं दिखाया जा सकता. उदाहरण के लिए, कैमरे से ली गई फ़ोटो को वेक्टर में नहीं बदला जा सकता.

कस्टम ImageVector बनाने के लिए, मौजूदा vector drawable एक्सएमएल फ़ाइल इंपोर्ट करें. इसे import tool का इस्तेमाल करके Android Studio में इंपोर्ट किया जाता है. इसके अलावा, क्लास लागू करके और पाथ कमांड मैन्युअल तरीके से जारी करके भी कस्टम ImageVector बनाया जा सकता है.

सामान्य इस्तेमाल के मामलों में, painterResource(), ImageVectors के लिए उसी तरह काम करता है जिस तरह ImageBitmap क्लास के लिए काम करता है. इससे VectorPainter नतीजे के तौर पर मिलता है. painterResource(), VectorDrawables और BitmapDrawables को क्रमशः VectorPainter और BitmapPainter में लोड करने की प्रोसेस को मैनेज करता है. किसी इमेज में VectorDrawable लोड करने के लिए, इस कोड का इस्तेमाल करें:

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)

अगर आपको और कस्टमाइज़ेशन की ज़रूरत है और आपको ImageVector को ऐक्सेस करना है, तो इसे इस तरह लोड किया जा सकता है:

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)