[CSS] 비트맵 방식과 벡터 방식 알아보기

비트맵(Bitmap) 방식

서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식을 비트맵이라고 하며, 사진 이미지에서 주로 사용된다. 크기를 늘리거나 줄이면 원본 이미지에 손상이 가는 것이 단점이자 큰 특징이며 이에 대해 우리는 '계단현상'이나 '이미지가 깨졌다'라고 흔히 표현한다.

치명적 단점 「계단현상」에도 많이 사용되는 이유는?

이미지를 표시하는 방식 중 가장 컴퓨터에 부담을 덜 주는 구조를 갖기 때문에 웹에서 이미지를 표시할 때에는 주로 비트맵 방식 이미지를 사용한다. 우리가 흔히 사용하는 .jpg, .jpeg, .png, .gif 등이 비트맵 방식이다.

대표적 파일 확장자와 특징 정리

확장자	특징
BMP	픽셀 데이터를 압축하지 않고 그대로 저장. 구조가 간단한 반면 파일 용량이 커진다는 단점이 있음
JPG	화려한 포토샵 효과를 표현할 수 있으며 손실 압축 방식을 사용함
GIF	256 이하의 색상을 가진 무손실 압축 방식을 사용하며, 애니메이션 구현이 가능함
PNG	256 색상 영상뿐만 아니라 트루컬러 영상도 지원함. 무손실 압축 방식을 사용하기 때문에 파일 용량이 커지지만 픽셀 값이 변경되지 않은 장점이 있음
WEBP	새로 나온 확장자이며, PNG와 JPG의 장점을 모두 갖고 있음

---

벡터(Vector) 방식

점과 점을 연결해 수학적인 원리로 그림을 그려 표현하는 방식을 벡터 방식이라고 하며 이미지를 확대하고 축소해도 전혀 손상되지 않는 장점이 있지만, 사진과 같은 복잡한 그림을 표현할 때엔 컴퓨터에 엄청난 부담을 준다는 단점 때문에 웹상에서는 잘 사용되지 않는다.

웹상에서 벡터 방식이 사용되는 곳은?

최근에는 컴퓨터 하드웨어가 발달했기 때문에 웹사이트의 로고나 아이콘 표시에 벡터 방식 그래픽이 많이 사용되고 있으며, 벡터 파일 형식에는 .ai, .eps, .svg 등이 있다.

대표적 파일 확장자와 특징 정리

확장자	특징
AI	대표적 벡터 방식 드로잉 프로그램 Adobe Illustrator에서 사용하는 자체 확장자 파일
EPS	2차원 벡터 그래픽, 텍스트, 비트맵 이미지 지원
SVG	벡터, 래스터 이미지, 텍스트로 구성된 이미지의 텍스트 기반 설명으로, 해상도의 영향을 받지 않고 고화질 이미지를 적은 용량의 파일로 만들 수 있음
PDF	벡터와 래스터 그래픽을 모두 표시 가능한 범용 표준 파일 형식

---

비트맵과 벡터 비교하기

	비트맵 (Bitmap)	벡터 (Vector)
정의	정사각형의 픽셀에 저장된 비트 정보들의 집합	수학적 함수 관계로 만든 그래픽 이미지
확대	계단 현상 발생	뚜렷한 외곽선
변화·회전	이미지 품질 손상	변화 없음
특징	사실적인 표현, 특수 효과, 풍부한 색감 표현	선명한 표현, 효과적인 응용 작업
단점	이미지의 축소, 확대로 인한 이미지 품질 손상	사진과 같은 이미지 그래픽의 정교한 작업의 한계점
확장자	JPG, PNG, GIF 등	AI, SVG, VML 등
프로그램	포토샵, 페인터 등	일러스트레이터, 플래시 등