본문 바로가기
CSS

이미지 표현 방식 : 벡터와 비트맵의 차이

by 코딩 척척학사 2022. 8. 9.
728x90

이미지 표현 방식

이미지를 표현하는 방식에는 벡터 방식비트맵 방식이 있습니다. 두 방법에는 각 장점과 단점이 있으며, 차이점을 잘 알아두어 적절한 표현방식을 사용하도록 합니다.

벡터 방식이란?

벡터는 점과 점을 연결해 수학적인 함수관계로 이미지를 표현해 선과 면을 만들어내는 것을 말합니다. 점과 점을 연결해 선을 만들 수 있고 선이 3개 이상 모이면 면을 만들 수가 있습니다. 이렇게 만들어진 선은 두께, 색상, 곡률 값을 갖게 되고 면은 색상 값을 가질 수가 있게 됩니다. 이러한 점, 선, 면이 모여 벡터 그래픽을 만들게 됩니다.


비트맵 방식이란?

비트맵은 비트의 지도(map of bits)란 뜻으로 각 픽셀에 저장된 일련의 비트 정보 집합을 말합니다. 디스플레이는 픽셀의 배열로 구성되어 있으며, 픽셀들의 배열 방식과 픽셀의 숫자와 비율이 디스플레이의 해상도를 결정한다고 할 수 있습니다. 1920x1080의 해상도를 가진 디스플레이의 경우 가로 1920개, 세로 1080개의 픽셀들로 구성되어 있다고 생각할 수 있습니다. 이렇게 가로와 세로를 곱하면 디스플레이가 가진 총 픽셀의 개수를 알 수 있습니다.


벡터와 비트맵 방식의 차이점

벡터 방식과 비트맵 방식의 장단점은 다음과 같습니다. 상황에 맞는 방식과 확장자를 사용하도록 합니다.

벡터 비트맵
장점 -확대/축소해도 해상도에 영향을 끼치지 않는다(이미지 깨짐x)
-비트맵 방식에 비해 용량이 작다.
-많은 픽셀로 정교하고 다양한 색상을 가진 이미지를 만들 수 있다.
-화려한 이미지를 표현할 수 있다.
단점 정교한 그래픽 표현에 한계가 있다. -이미지를 축소/확대 할 경우 화질에 따라 이미지가 깨질 수 있으며, 품질이 떨어진다.
-벡터 방식에 비해 이미지의 용량이 크다.
형식 AI, PDF, SVG JPG, JPEG: 색상을 화려하게 표현할 수 있다.
PNG: 투명도를 표현할 수 있다.
GIF: 애니메이션을 표현할 수 있다.

벡터와 비트맵 방식 이미지의 차이

왼쪽은 벡터 방식, 오른쪽은 비트맵 방식의 이미지입니다. 오른쪽의 이미지가 확대했을 때 계단현상이 일어나며 깨지는 것을 알 수 있습니다.

728x90

'CSS' 카테고리의 다른 글

SCSS : 기본 문법 알아보기  (8) 2022.08.18
애니메이션 : 강아지 애니메이션  (7) 2022.08.18
미디어쿼리 알아보기  (4) 2022.08.14
CSS 기본 문법 : 스타일 작성의 4가지 방법  (3) 2022.08.14
레이아웃을 만들기  (11) 2022.07.25

댓글


HTML이 적힌 썸네일 이미지
CSS가 적힌 썸네일 이미지
JAVASCRIPT가 적힌 썸네일 이미지

JAVASCRIPT

자세히 보기