이미지(그래픽)은 크게 비트맵과 벡터로 구분된다.
비트맵(Bitmap)벡터(Vector)
- 비트맵(Bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고 부르기도 한다.
- 픽셀 단위로 화면에 렌더링된다.
- 픽셀 : 화면에 나타나 있는 하나의 점
- 렌더링 : 사용자의 시각으로 볼 수 있도록 화면에 그려지는 것
- 일반적으로 사용하는 대부분의 이미지는 비트맵 형식이다.
- 그림판, 포토샵과 같은 툴로 편집할 수 있다.
- 수학적 정보의 형태들이 만들어내는 결과물이다.
- 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있다. 해당 정보가 화면에 렌더링된다.
- 따라서 조금 더 많은 연산을 해야 하지만, 비트맵 이미지와 다르게 해상도에 영향을 받지 않는다. (확대 및 축소를 해도 이미지가 깨지지 않음)
- 수학적 정보만을 가지고 있기 때문에 이미지 확대 및 축소에 따른 용량 변화가 없다. (용량을 줄이려고 이미지 사이즈를 작게 만들어도 용량에 변화가 없음)
JPG(Joint Phtographic coding Experts Group) Full-color와 Gray-scale의 압축을 위해 만들어진 포맷이다.
- 손실 압축 방식
- JPG 포맷을 저장하는 경우, 압축 과정에서 이미지 해상도가 손실됨
- 이미지의 품질과 용량을 쉽게 조절 가능
- 가장 널리 쓰이는 이미지 포맷
- 높은 압축률(적은 용량) -> 이미지의 용량을 획기적으로 줄여줌
PNG(Portable Network Graphics)는 Gif의 대체 포맷으로 개발되었다.
- 비손실 압축 방식
- 이미지가 손상되지 않고 저장되기 때문에, JPG처럼 용량을 획기적으로 줄일 수 없음
- 8비트(256색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
- Alpha Channel 지원 (투명도)
- W3C 권장 포맷
GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있다. (여러 장의 이미지를 넣을 수 있다.)
- 비손실 압축
- 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
- 8비트 컬러만 지원(다양한 색상을 표현하는 작업에는 적합하지 않은 포맷)
JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이다.
- 완벽한 손실 및 비손실 압축 지원
- GIF 같은 애니메이션 지원
- Alpha Channel 지원(손실, 비손실 모두)
- 완벽한 포맷이지만, 브라우저 호환성 문제가 있음
SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷이다.
- 해상도의 영향에서 자유로움
- CSS로 Styling 가능
- JavaScript로 Event Handling 가능
- 코드 및 파일로 사용 가능
- cf. 일러스트는 벡터 이미지 편집툴
- 이미지에 대한 용량을 조절해야 할 때는
JPG - 이미지에 투명도를 지정해야 할 때는
PNG - 이미지에 애니메이션 기능이 필요할 때는
GIF WEBP는 호환성 문제로 인해 아직 많이 사용되지는 않음SVG는 스타일링 및 JS로 핸들링할 수 있지만, 이는 비효율적임. 반응형에서 많이 사용된다는 정도만 알고 있자.