#Image Bitmap versus Image Vector

The two most common kinds of image formats are raster and vector images.

---

#Raster Graphics (ImageBitmap)

A raster graphic format contains pixels: tiny individual squares that contain a color (made up of red, green, blue, and alpha values). When placing a lot of pixels together, a very detailed image can be formed, such as a photograph.

• Fixed Resolution: A raster graphic has a fixed number of pixels.
• Scaling Issues: When you increase the size of the image, it loses detail and pixelation can occur.
• Examples: JPEG, PNG, and WEBP.

Figure 1. JPEG file example: A close-up photograph of a golden retriever dog.

#Implementation in Compose

In Compose, a raster image is often referred to as a Bitmap. It is loaded into an ImageBitmap instance, and a BitmapPainter is responsible for drawing it to the screen.

Basic use case: Use painterResource() to create an ImageBitmap (returns a BitmapPainter).

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

Advanced use case: If you need access to the ImageBitmap itself for custom implementations:

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

---

#Vector Images (ImageVector)

Vector images are scalable mathematical representations of a visual element. A vector is a set of commands describing how to draw the image—for example, a line, point, or fill.

• Infinite Scalability: When scaling a vector, it won't lose quality because the mathematical formula maintains the relationship between commands.
• Use Case: Ideal for icons, such as Material Symbols.
• Examples: SVG, VectorDrawables (.xml), or code-defined shapes.

Figure 2. Vector example: A simple line-art icon of a shopping cart.

#Implementation in Compose

A VectorPainter is responsible for drawing an ImageVector. While it supports a subset of SVG commands, complex photos cannot be represented as vectors.

Basic use case: painterResource() automatically handles VectorDrawables and returns a VectorPainter.

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

Advanced use case: To access the ImageVector object directly:

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