HTML/기초

비트맵과 백터 이미지

컴공 윤서혜 학습일기 2020. 5. 30. 19:27

이미지(그래픽)은 크게 비트맵과 백터로 구분이 된다.

 

비트맵(bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부른다.

픽셀단위로 화면에 렌더링한다.

우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 형식이다.

그림판, 포토샵과 같은 툴로 편집할수 있다. ex) jpg, png, gif, webp

 

 

백터(Vector)는 수학적 정보의 형태(shape)들이 만들어내는 결과물이다.

이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링한다.

따라서 좀더 많은 연산을 해야하지만, 대신 해상도(픽셀)에 영향을 비트맵 이미지와 달리 해상도로부터 자유롭게 렌더링할 수 있다. 쉽게 말하면 확대 및 축소를 해도 이미지가 깨지지 않는다.

또한 수학적 정보만 가지고 있기 때문에 이미지 확대/축소에 따른 용량 변화가 없다.

--> 장점같은 경우는 확대했는데도 용량이 늘지 않는 경우이고, 단점으로는 축소하고 싶은데 용량이 줄지 않는 부분이 불편한 점이다.

일러스트 같은 툴로 편집할 수 있다.

 

비트맵
이미지 확대/축소 시 픽셀이 깨져서 나온다.(계단현상, 품질저하)
작게 여러게 만들때 용량관리가 용이하다.
정교하고 다양한 색상들을 자연스럽게 표현

 

벡터
확대/축소에서 자유로움, 용량 변화가 없다.
정교한 이미지(인물, 풍경 사진같은)를 표현하기가 어렵다.

'HTML > 기초' 카테고리의 다른 글

HTML 문서의 구조  (0) 2020.05.31
HTML 문서의 범위 및 기초 코딩방법  (0) 2020.05.31
태그란  (0) 2020.05.31
JPG, PNG, GIF, WEBP, SVG  (0) 2020.05.30
HTML 비쥬얼스튜디오 단축키에 대해  (0) 2020.05.30