본문 바로가기
CSS

벡터와 비트맵

by 🐬마뇽뇽 마뇽🦄 2022. 8. 9.
728x90

 

백터란?

그래픽의 형태들이 수학적 공식으로 이루어져 있습니다. 다시말해 벡터 방식의 그래픽은 고정된 비트맵을 가지고 있는 것이 아니라, 수학적 공식으로 이루어진 오브젝트들이 그때그때 디스플레이에 비트맵화 되어 스크립에 표시 됩니다.

벡터의 장점과 사용하는 곳

벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않습니다. 보기로 봐야 할 만큼 크기를 줄이고, 건물 외벽에 붙일 만큼 크기를 키워도 깨짐현상이 없습니다.
그래서 벡터 방식은 여기저기 적용하는 부분이 많아, 크기조절이 자유로워야 하는 로고나 여러 포인트로 조정되어야 하는 서체, 다양한 크기로 여러 곳에 응용되어야 하는 캐릭터 등을 제작할 때 사용합니다. 그리고 픽셀로 구성되는 비트맵보다 용량이 현저히 적기 때문에 파일을 관리하기도 편리합니다.


비트맵이란?

비트맵 방식은 '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능합니다..

비트맵의 특징

픽셀의 수가 많아질수록 화질은 뛰어나지만, 용량 또한 커지게 되고 비트맵 이미지는 크기를 확대하거나 축소하면 기존 이루고 있던 픽셀의 수가 변하여 원본 이미지에 손상이 가게 되는데, 이로 인해 깨짐 현상과 이미지 품질 저하가 발생하게 됩니다. 바로 이것을 '이미지가 깨졌다'라고 표현하죠. 비트맵은 다른 표현으로 픽스맵(Pixmap)이나 레스터(Raster) 이미지로도 불립니다.


벡터와 비트맵의 차이?

이미지를 보면 벡터는 화면을 줄이거나 늘려도 거의 늘어나지 않는 반면 비트맵은 이미지가 깨지는걸 볼 수 있습니다.

  벡터 비트맵
장점 확대하거나 축소해도 해상도에 영향을 끼치지 않는다.
용량이 많이 늘어나지 않는다.
픽셀 수가 많을 수록 화질과 색감이 뛰어난 이미지를 만들 수 있다.
단점 사진과 이미지 같은 그래픽 표현에는 한계가 있다. 이미지 축소와 확대가 가능하지만 이미지가 깨질 수 있고 품질 저하가 발생 된다.
형식 AI, PDF, SVG JPG, JPEG, PNG, GIF
728x90

'CSS' 카테고리의 다른 글

이미지 스프라이트  (4) 2022.08.20
Sass  (6) 2022.08.18
강아지 애니메이션  (5) 2022.08.18
미디어 쿼리  (6) 2022.08.15
CSS 기본 문법  (5) 2022.08.15

댓글


고양이 고양이
고양이 고양이
고양이 고양이