[HTML]웹 이미지 종류 살펴보기

 웹 이미지에는 비트맵과 벡터, 크게 두 가지 종류가 있습니다. 

 

 오늘은 웹 이미지의 각 특성을 살펴보고 어떤 상황에 어떤 이미지가 적절한지 공부해볼게요!

 

 

1. 비트맵(Bitmap, Raster): jpg(jpeg), gif, png, webp

 

먼저 비트맵 이미지 입니다. Raster라고도 불리는 비트맵 이미지는 픽셀이 모여 만들어진 정보의 집합입니다. 

특징

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

확대/축소 시 계단 현상 발생 -> 품질 저하

사진, 인물, 또는 그림에 적합

 

그 종류에는 jpg, gif, png, webp 정도가 있습니다. 하나씩 살펴보겠습니다. 

 

(1)  JPG(JPEG)

출처: https://commons.wikimedia.org/wiki/File:Cat03.jpg

 JPG는 full-color와 gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용됩니다. 가장 널리 쓰이는 이미지 포맷이기도 합니다. 

 

 압축률이 훌륭하기 때문에 용량이 적은 장점이 있지만 압축할 때 손실이 발생한다는 단점이 있습니다. 때문에 이미지를 반복적으로 새롭게 저장해야할 때는 jpg 사용을 피하는 것이 좋습니다. 

 

 총 24비트로 약 1600만개의 색상을 표현할 수 있어 표현 색상도가 뛰어납니다. 

 

 또한 이미지의 품질과 용량을 쉽게 조절할 수 있습니다. 

 

 

(2) GIF

출처: https://www.behance.net/gallery/55389655/gif-Collection-Two

 GIF는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장하는 이미지 포맷입니다. 

 

 JPG와 달리 비손실 압축을 하며, 여러 장의 이미지를 하나의 파일에 담을 수 있습니다. 흔히 짧은 움짤과 애니메이션의 확장자가 .gif로 설정되어 있는 것을 많이 보셨죠?

 

 하지만 8비트 색상(256가지)만 지원하기 때문에 다양한 색상 표현에는 적합하지 않습니다. 

 

 

(3) PNG

출처: https://ko.wikipedia.org/wiki/PNG

 

 PNG는 GIF의 대체 포맷으로 개발된 이미지 포맷입니다. 

 

 PNG 역시 비손실 압축이며 JPG보다 비교적 용량이 큽니다. 

 

 8비트 / 24비트 컬러 이미지를 처리하며 Apha channel(투명도)를 지원합니다. 

 

 

 

(4) WEBP

 

 WEBP는 구글이 개발한 것으로 jpg, gif, png를 모두 대체할 수 있는 이미지 포맷입니다. 

 

 완벽한 손실/비손실 압축을 지원하며 GIF 같은 애니메이션과 Alpha channel(투명도)를 지원 가능합니다. 

 

 

 

 

 

2. 벡터(Vector): svg

 

벡터 이밎는 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지입니다. 

특징

확대/축소가 자유롭고 용량 변화가 없음

정교한 이미지(인물, 풍경 같은)를 표현하기 어려움

단순 구조 아이콘이나 로고에 적합

 

 

• SVG

출처: https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4

SVG는 마크업 언어 기반의 벡터 그래픽을 표현하는 이미지 포맷입니다. 

 

해상도의 영향에서 자유롭기 때문에 이미지 크기가 자주 변동될 때 적합합니다. 

 

또한 css와 js로 제어가 가능하며 파일 및 코드에 삽입이 가능합니다.