웹 이미지 파일 형식(포맷) 종류 및 개념 정리

비트맵(Bitmap)과 벡터(Vector) 

 

비트맵(Bitmap) - .jpeg .gif .png

- 픽셀이 모여 만들어진 정보의 집합. 레스터(Raster) 이미지라고도 부름. 

- 정교하고 다양한 색상을 자연스럽게 표현.

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

 

벡터(Vector) - .svg

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

- 확대/축소에서 자유로움. 용량 변화가 없음.

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

---

JPG(JPEG)

- Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.

- "손실 압축" => 용량이 획기적으로 줄어든다.

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

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

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

 

PNG

- Gif의 대체 포맷으로 개발됨.

- "비손실 압축" 

- 8비트(256색상) / 24비트(약 1600만 색상) 컬러 이미지 처리

- Alpha Channel 지원(투명도) => 투명 배경 지원

- W3C 권장 포맷

 

GIF

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

- "비손실 압축"

- 여러 장의 이미지를 한 개의 파일에 담을 수 있음

- 움짤, 애니메이션

- 8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

 

WEBP

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

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

- GIF 같은 애니메이션 지원

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

- 비교적 최신 기술이라 지원되는 브라우저 확인 필요

- IE 지원 불가

 

SVG

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

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

- CSS와 JS로 제어 가능

- 파일 및 코드 삽입 가능