[HTML]웹 이미지 종류 살펴보기
웹 이미지에는 비트맵과 벡터, 크게 두 가지 종류가 있습니다.
오늘은 웹 이미지의 각 특성을 살펴보고 어떤 상황에 어떤 이미지가 적절한지 공부해볼게요!
1. 비트맵(Bitmap, Raster): jpg(jpeg), gif, png, webp
먼저 비트맵 이미지 입니다. Raster라고도 불리는 비트맵 이미지는 픽셀이 모여 만들어진 정보의 집합입니다.
| 특징 |
| 정교하고 다양한 색상을 자연스럽게 표현 가능 |
| 확대/축소 시 계단 현상 발생 -> 품질 저하 |
| 사진, 인물, 또는 그림에 적합 |
그 종류에는 jpg, gif, png, webp 정도가 있습니다. 하나씩 살펴보겠습니다.
(1) JPG(JPEG)
JPG는 full-color와 gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용됩니다. 가장 널리 쓰이는 이미지 포맷이기도 합니다.
압축률이 훌륭하기 때문에 용량이 적은 장점이 있지만 압축할 때 손실이 발생한다는 단점이 있습니다. 때문에 이미지를 반복적으로 새롭게 저장해야할 때는 jpg 사용을 피하는 것이 좋습니다.
총 24비트로 약 1600만개의 색상을 표현할 수 있어 표현 색상도가 뛰어납니다.
또한 이미지의 품질과 용량을 쉽게 조절할 수 있습니다.
(2) GIF
GIF는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장하는 이미지 포맷입니다.
JPG와 달리 비손실 압축을 하며, 여러 장의 이미지를 하나의 파일에 담을 수 있습니다. 흔히 짧은 움짤과 애니메이션의 확장자가 .gif로 설정되어 있는 것을 많이 보셨죠?
하지만 8비트 색상(256가지)만 지원하기 때문에 다양한 색상 표현에는 적합하지 않습니다.
(3) PNG
PNG는 GIF의 대체 포맷으로 개발된 이미지 포맷입니다.
PNG 역시 비손실 압축이며 JPG보다 비교적 용량이 큽니다.
8비트 / 24비트 컬러 이미지를 처리하며 Apha channel(투명도)를 지원합니다.
(4) WEBP
WEBP는 구글이 개발한 것으로 jpg, gif, png를 모두 대체할 수 있는 이미지 포맷입니다.
완벽한 손실/비손실 압축을 지원하며 GIF 같은 애니메이션과 Alpha channel(투명도)를 지원 가능합니다.
2. 벡터(Vector): svg
벡터 이밎는 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지입니다.
| 특징 |
| 확대/축소가 자유롭고 용량 변화가 없음 |
| 정교한 이미지(인물, 풍경 같은)를 표현하기 어려움 |
| 단순 구조 아이콘이나 로고에 적합 |
- SVG
SVG는 마크업 언어 기반의 벡터 그래픽을 표현하는 이미지 포맷입니다.
해상도의 영향에서 자유롭기 때문에 이미지 크기가 자주 변동될 때 적합합니다.
또한 css와 js로 제어가 가능하며 파일 및 코드에 삽입이 가능합니다.