비트맵 : 픽셀로 이루어짐
벡터 : 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지
비트맵
- 정교하고 다양한 색상을 자연스럽게 표현
- 확대/축소 시 계단 현상, 품질 저하
벡터(확장자 svg로 관리)
- 확대/축소에서 자유로움, 용량 변화가 없음
- 정교한 이미지를 표현하기 어려움
일반적으로 비트맵은 사진을 구현할 때 용이
벡터는 로고, 아이콘 등의 간단한 이미지와 메테리얼 디자인(Meterial Design)을 구현하는 데에 용이하다.
JPG
- 손실 압축(반복적으로 새롭게 저장하는 행위는 되도록 피해야함)
- 가장 자주 보이므로 이미지의 품질과 용량 역시 쉽게 조절 가능
PNG
- 비손실 압축(단점으로 용량이 클 수 있음)
- 알파 채널 지원(투명도 지원 -> 원하는 이미지 주변에 투명한 이미지 영역을 만들 수 있음)
jpg는 투명도를 지원하지 않아 정사각형 모양으로 하얀색이 남음
일반적으로 투명도 지원 시 pNG, 지원하지 않으면 JPG가 좀 더 좋은 선택이 됨.
GIF
- 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
즉, 하나의 이미지 파일에 여러 개의 이미지 파일이 저장 가능하여 애니메이션 같은 효과를 구현할 수 있다. (움짤) - 8비트 색상만 지원하여 다양한 색상 표현에는 적합하지 않다.
WEBP
- JPG, PNG, GIF 모두 대체 가능하도록 구글이 개발한 이미지 포맷
- 완벽한 손실/비손실 압축 지원
- 애니메이션 지원
- 투명도 지원(손실, 비손실 모두)
Tip. 하위호환성 확인 : 더 예전 버전의 환경에서 특정 웹기술이 지원되는지 확인하는 것
이상 위의 포멧들은 비트맵 이미지를 표현하는 포멧들이다.
SVG : 마크업언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포멧
- 해상도의 영향에서 자유로움
- CSS와 JS로 제어 가능
- 파일 및 코드 삽입 가능 (그 때 그 때 css, js로 변경하여 사용 가능)
svg이미지의 복잡한 코드를 css, js로 디테일하게 제어하기는 매우 어려워 일반적으로 색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용한다.
