웹에서 사용되는 이미지 포맷은 크게 비트맵, 벡터로 나눌 수 있다.
비트맵(Bitmap) :
픽셀이 모여 만들어진 정보의 집합, 래스터(Raster) 이미지라고도 함.
벡터(Vector) :
점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지
| 종류 | 장점 | 단점 |
|---|---|---|
| 비트맵 | 정교하고 다양한 색상을 자연스럽게 표현 | 확대/축소 시 계단 현상 발생, 품질 저하 |
| 벡터 | 확대/축소에서 자유로움, 용량 변화 x | 정교한 이미지(인물, 풍경 사진 등)를 표현하기 어려움 |
비트맵 이미지 종류
JPEG
- 압축률이 훌륭해 사진, 예술 분야에서 많이 사용
- 손실 압축 (용량 ↓)
- 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
- 이미지 품질과 용량 쉽게 조절 가능
- 가장 널리 쓰이는 이미지 포맷
PNG
- Gif의 대체 포맷으로 개발됨
- 비손실 압축
- 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
- Alpha Channel 지원(투명도)
- W3C 권장 포맷
GIF
- 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
- 비손실 압축
- 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
- 8비트 색상만 지원(다양한 색상 표현에는 적합하지 x)
WEBP
-
구글이 개발한 JPG, PNG, GIF를 모두 대체할 수 있는 이미지 포맷
-
완벽한 손실/비손실 압축 지원
-
GIF 같은 애니메이션 지원
-
Alpha Channel(손실, 비손실 모두)
-
Can I Use를 통해 지원 브라우저 확인 필요
📎 하위 호환성 특정 기술이나 파일 형식(ex : 이미지 포맷)이 다양한 웹 브라우저 또는 시스템 환경에서 정상적으로 작동하는지, 오래된 버전에서도 호환 이 되는지를 확인하는 개념. 이를 통해 웹이나 소프트웨어의 사용성을 높이고, 사용자가 각기 다른 버전의 브라우저나 장치를 사용하더라도 일관된 경험을 제공할 수 있게 한다.
벡터 이미지 종류
SVG
- 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷
- 해상도의 영향에서 자유로움
- CSS, JS로 제어 가능
- 파일 및 코드 삽입 가능
Refer : 패스트캠퍼스 - 프론트엔드 웹 개발의 모든 것 초격차 패키지
