본문 바로가기
CSS

비트맵/벡터 방식

by 코딩달림 2022. 8. 10.
728x90

벡터와 비트맵 방식 차이

이미지를 표현하는 방식으로 비트맵과 벡터 방식이 있습니다.

비트맵을 설명하기 전에 우선 픽셀의 개념부터 알아야 합니다.


1. 픽셀(pixel)

픽셀이란?
Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위.

픽셀은 그림을 나타내는 최소한의 점이며, 이 점 하나에 해당 색의 정보가 담겨져 있습니다.
픽셀 하나하나가 모이면 그림이 되며 이렇게 이미지를 나타내는 방식이 바로 비트맵 방식이 됩니다.

2. 비트맵(Bitmap) 방식

비트맵 방식이란?
'비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된 것.

비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능하며, 픽셀의 수가 많아질수록 화질이 좋아집니다.

하지만 픽셀의 수가 많아질수록 용량이 커지며, 이미지를 확대하거나 축소하게 되면 기존 픽셀의 수가 변하여 깨짐 현상과 이미지 품질 저하가 발생하게 됩니다.

비트맵 방식을 사용하는 대표적인 포멧으론 BMP, PNG, JPG, GIF가 있으며, 프로그램은 포토샵, 페인터, 캔버스 등이 있습니다.

※ 대표적인 이미지 포멧

포멧 설명
BMP - 품질 저하 없이 다양한 플랫폼에 표시 가능
- 비손실 압축식 대용량 파일
JPG - 손실 압축 : 이미지를 손상시키며 저장하지만 큰 용량 절약
- 압출률이 높음
- 24비트(약1600만 컬러)지원 - 고해상도
- 이미지 품질 및 용량 조절이 쉬움
- 호환성이 뛰어남
GIF - 비손실 압축 : 이미지를 손상하지 않지만 용량이 커짐
- 8비트(256 컬러)만 지원
-파일내 여러 이미지를 저장 가능 : 애니메이션
PNG - 비손실 압축
- 8비트/24비트 전부 지원
- Alpha Channel(투명도) 지원
- JPG와 함께 가장 많이 쓰이는 포멧
WEBP - 구글에서 개발한 jpg, png, gif를 모두 대체하는 포멧
- 완벽한 손실/비손실 압축 동시 지원
- 애니메이션 지원
- Alpha Channel(투명도) 지원
- 아직 호환성이 완벽하지 않음 (지원하지 않는 브라우저가 있다)

2. 벡터(Vector) 방식

벡터 방식이란?
그래픽의 형태들이 수학적 연산을 통해 점, 선, 면을 그려 표현하는 방식.

점과 점이 연결되어 선이 되고 선과 선이 연결되어 면이 되는 즉 점,선, 면을 이용해 이미지를 표현합니다. 점,선,면을 수학적인 함수로 표현하기에 벡터이미지는 원본 이미지를 크게 확장해도 깨지지 않습니다. 보통 벡터 이미지는 로고나 아이콘 작업을 할 때 많이 사용되는 됩니다.

벡터 이미지는 특성상 색을 표현하는 것에는 한계가 있습니다. 하지만 그래픽 이미지 표현의 발전으로 벡터 이미지에서도 그레디언트 같은 섬세한 색상을 표현하는 방법도 개선되고 있습니다.

사용하는 포멧으로는 svg, eps, pdf, ai가 있으며, 프로그램은 일러스트레이터 등이 있습니다.

'CSS' 카테고리의 다른 글

백그라운드 이미지/ir 효과  (3) 2022.08.22
강아지 애니메이션 만들기  (4) 2022.08.18
SCSS  (3) 2022.08.18
미디어 쿼리  (4) 2022.08.15
CSS 기본 문법  (4) 2022.08.15

댓글


광고 준비중입니다.