래스터 그래픽 형식은 픽셀을 포함합니다. 픽셀은 색상(빨간색, 녹색, 파란색, 알파 값으로 구성됨)이 포함된 작은 개별 정사각형입니다. 다량의 픽셀을 함께 배치하면 사진과 같은 매우 상세한 이미지를 형성할 수 있습니다. 래스터 그래픽의 해상도는 고정(고정된 픽셀 수)되어 있습니다. 즉, 이미지 크기를 늘리면 세부 사항이 손실되고 모자이크 현상이 발생할 수 있습니다. 래스터 그래픽 형식의 예로는 JPEG, PNG, WEBP가 있습니다.
그림 1: JPEG 파일 예
반면 벡터 이미지는 화면에 표시되는 시각적 요소의 확장 가능한 수학적 표현입니다. 벡터는 선, 점, 채우기 등 화면에 이미지를 그리는 방법을 설명하는 명령어 집합입니다. 화면에서 벡터를 조정할 때는 수학 수식이 여러 명령어 간의 관계를 유지하므로 품질이 저하되지 않습니다. ImageVector의 좋은 예는 Material 기호입니다. 모두 수학 수식으로 정의할 수 있기 때문입니다.
그림 2: 벡터 예(파일 확장자는 .xml이거나 Kotlin 코드로 정의됨)
ImageBitmap
Compose에서 래스터 이미지(Bitmap이라고도 함)는 ImageBitmap 인스턴스에 로드할 수 있으며 BitmapPainter는 화면에 비트맵을 그리는 역할을 합니다.
간단한 사용 사례에서는 ImageBitmap 생성을 처리하고 Painter 객체(이 경우 BitmapPainter)를 반환하는 painterResource()를 사용할 수 있습니다.
VectorPainter는 ImageVector를 화면에 그리는 역할을 합니다.
ImageVector는 SVG 명령어의 하위 집합을 지원합니다. 모든 이미지를 벡터로 표현할 수 있는 것은 아닙니다. 예를 들어 카메라로 촬영한 사진은 벡터로 변환할 수 없습니다.
기존 벡터 드로어블 XML 파일(가져오기 도구를 사용하여 Android 스튜디오로 가져옴)을 가져오거나 클래스를 구현하고 경로 명령어를 수동으로 실행하여 맞춤 ImageVector를 만들 수 있습니다.
간단한 사용 사례에서는 painterResource()가 ImageBitmap 클래스에서 작동하는 것과 동일한 방식으로 ImageVectors에도 작동하여 VectorPainter를 결과로 반환합니다. painterResource()는 VectorDrawables 및 BitmapDrawables를 각각 VectorPainter 및 BitmapPainter에 로드하는 작업을 처리합니다. VectorDrawable을 이미지에 로드하려면 다음을 사용하세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-23(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-23(UTC)"],[],[],null,["# ImageBitmap vs ImageVector\n\nThe two most common kinds of image formats are raster and vector images.\n\nA raster graphic format contains pixels: tiny individual squares that contain a\ncolor (made up of red, green, blue, and alpha values). When placing a lot of\npixels together, a very detailed image can be formed, such as a photograph. A\nraster graphic has a fixed resolution (fixed number of pixels). This means that\nwhen you increase the size of the image, it loses detail, and pixelation can\noccur. Examples of raster graphic formats are JPEG, PNG, and WEBP.\n**Figure 1**: JPEG file example\n\nVector images, on the other hand, are scalable mathematical representations of a\nvisual element on screen. A vector is a set of commands describing how to draw\nthe image on screen- for instance, a line, point, or fill. When scaling a vector\non screen, it will not lose quality as the mathematical formula will maintain\nthe relationship between the different commands. A good example of ImageVector\nare the Material [Symbols](https://fonts.google.com/icons), as they can all be defined with\nmathematical formulas.\n**Figure 2**: Vector example (file extensions are .xml or defined in Kotlin code)\n\n`ImageBitmap`\n-------------\n\nIn Compose, a raster image (often referred to as a `Bitmap`) can be loaded up\ninto an `ImageBitmap` instance, and a `BitmapPainter` is what is responsible for\ndrawing the bitmap to screen.\n\nFor simple use cases, the `painterResource()` can be used which takes care of\ncreating an `ImageBitmap` and returns a `Painter` object (in this case - a\n`BitmapPainter`):\n\n\n```kotlin\nImage(\n painter = painterResource(id = R.drawable.dog),\n contentDescription = stringResource(id = R.string.dog_content_description)\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L49-L52\n```\n\n\u003cbr /\u003e\n\nIf you require further customization (for instance a [custom painter\nimplementation](/develop/ui/compose/graphics/images/custompainter)) and need access to the `ImageBitmap` itself, you can load it\nin the following way:\n\n\n```kotlin\nval imageBitmap = ImageBitmap.imageResource(R.drawable.dog)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L56-L56\n```\n\n\u003cbr /\u003e\n\n`ImageVector`\n-------------\n\nA `VectorPainter` is responsible for drawing an `ImageVector` to screen.\n`ImageVector` supports a subset of SVG commands. Not all images can be\nrepresented as vectors (for example, the photos you take with your camera cannot\nbe transformed into a vector).\n\nYou can create a custom `ImageVector` either by importing an existing vector\ndrawable XML file (imported into Android Studio using the [import tool](/studio/write/vector-asset-studio#running)) or\nimplementing the class and issuing path commands manually.\n\nFor simple use cases, the same way in which `painterResource()` works for the\n`ImageBitmap` class, it also works for `ImageVectors`, returning a\n`VectorPainter` as the result. `painterResource()` handles the loading of\n`VectorDrawables` and `BitmapDrawables` into `VectorPainter` and `BitmapPainter`\nrespectively. To load a `VectorDrawable` into an image, use:\n\n\n```kotlin\nImage(\n painter = painterResource(id = R.drawable.baseline_shopping_cart_24),\n contentDescription = stringResource(id = R.string.shopping_cart_content_desc)\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L64-L67\n```\n\n\u003cbr /\u003e\n\nIf you'd require further customization and need to access to the `ImageVector`\nitself, you can load it in the following way:\n\n\n```kotlin\nval imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L71-L71\n```\n\n\u003cbr /\u003e\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Custom painter {:#custom-painter}](/develop/ui/compose/graphics/images/custompainter)\n- [Resources in Compose](/develop/ui/compose/resources)\n- [Loading images {:#loading-images}](/develop/ui/compose/graphics/images/loading)"]]
