비트맵과 벡터

비트맵(Bitmap)

- 픽셀이 모여 만들어진 정보의 집합

- 레스터(Raster) 이미지라고도 부름

- jpeg, gif, png 등의 확장자

- 정교하고 다양한 색상을 자연스럽게 표현 (장점)

- 확대/축소 시 계단 현상, 품질 저하 (단점)

- 주로 일반적인 사진이나 그림

 

벡터(Vector)

- 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지

- svg 확장자

- 확대/축소에서 자유로움, 용량 변화가 없음 (장점)

- 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움 (단점)

- 주로 단순구조의 아이콘이나 로고의 이미지나 머터리얼 이미지

- 머터리얼 디자인(Material Design)은 고품질 디지털 경험을 구축할 수 있도록 구글에서 만든 디자인 시스템

 

※ 비트맵 이미지의 특징

 

JPG(Joint Photographic coding Experts Group)

- JPG(JPEG)

- Full-color와 Gray-scale의 압축을 위해 만들어짐

- 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용

- 손실 압축

- 표현 색상도(24비트, 약 1600만 색상)가 뛰어남

- 이미지의 품질과 용량을 쉽게 조절 가능

- 가장 널리 쓰이는 이미지 포맷

 

PNG(Portable Network Graphics)

- Gif의 대체 포맷으로 개발

- 비손실 압축 (JPG와 다르게 이미지 손실X)

- 8비트(256 색상) / 24비트(약 1600만 색상) 동시 지원

- Alpha Channel 지원(투명도)

- W3C 권장 포맷

 

GIF(Graphics Interchange Format)

- 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장

- 비손실 압축

- 여라 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)

- 8비트 색상만 지원

 

WEBP

- JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

- 완벽한 손실/비손실 압축 지원

- GIF 같은 애니메이션 지원

- Alpha Channel 지원(손실, 비손실 모두)

- IE 지원 불가

 

※ 벡터 이미지의 특징

 

SVG(Scalable Vector Graphics)

- 마크업 언어(HTML / XML) 기반의 벡터 그래픽을 표현하는 포맷

- 해상도의 영향에서 자유로움

- CSS와 JS로 제어 가능

- 파일 및 코드 삽입 가능