본문 바로가기

Fundamental/Web

WEB에서 사용되는 이미지 포맷들

들어가며

웹에서 사용되는 이미지는 여러가지가 있습니다. 기존의 이미지 포맷인 BMP, JPG, PNG, GIF와 구글이 개발한 WEBP, W3C에서 개발한 SVG가 뭔지 간단히 알아보려 합니다.

 

목차

1. BMP

2. JPG

3. PNG

4. GIF

5. WEBP

6. SVG

 

 

1. BMP

비트맵 디지털 그림을 저장하는 데 사용되는 이미지 포맷입니다. 원본 그대로 저장되기 때문에 이미지 원본에 손실은 없지만, 파일을 압축하지 않기 때문에 다른 포맷들에 비해 용량이 가장 큽니다.

 

2. JPG(=JPEG)

높은 압축률로 용량이 작아서 가장 널리 사용되는 이미지 포맷입니다. 반대로 압축률이 크기 때문에 이미지 원본에 손실이 큰 단점이 있습니다.

 

3. PNG

JPG에 비해 이미지 원본에 손실이 적고, BMP 보다는 높은 압축률을 가지며, 투명한 영역을 보존할 수 있습니다. JPG 보단 압축률이 낮아서 용량이 비교적 큽니다.

 

4. GIF

PNG와 마찬가지로 손실이 적고, BMP 보다는 높은 압축률을 가지며, 이미지를 애니메이션으로 저장할 수 있지만 해상도 제한이 있습니다.

 

5. WEBP(웹피)

WEBP 포맷은 구글이 개발하고 2010년에 발표한 이미지 포맷이며, 위 이미지 포맷들을 대체하기 위해 만들어졌습니다. 이미지 로딩 속도를 단축시킬 수 있고, JPG 보다 높은 압축률 PNG, GIF 보다 낮은 이미지 원본 손실을 기대할 수 있습니다. 단, IE(Internet Explorer)와 Safari 14 이전 버전에선 지원되지 않습니다.

 

6. SVG(Scalable Vector Graphics)

위 포맷들은 비트맵 방식으로 이미지를 표현하지만, SVG 포맷의 경우 마크업 언어(HTML/XML) 기반으로 백터 그래픽을 사용해 이미지를 표현하기 때문에 화면 크기가 변경되어도 계단 현상과 같은 깨짐이 거의 없습니다.

 

 

마치며

위와 같이 이미지 포맷들에 대해 간략히 알아보았습니다. 기존 레스터 방식에선 WEBP 포맷이 가장 우수하지만 사파리 브라우저의 지원이 늦게 이루어졌기 때문에 아직 이전 버전을 사용하는 유저들과의 호환성이 떨어진다는 단점이 있다고 생각합니다.

 

고맙습니다.