이미지 포맷 비교 분석 (JPG, PNG, WebP, HEIC, AVIF)

이미지는 웹 성능에 직접적인 영향을 줄 정도로 용량이 큰 리소스입니다.

특히 우리 서비스는 사진 포함 콘텐츠가 중심이기 때문에, 웹에 사용할 이미지 포맷을 어떻게 선택하느냐가 성능에 직접적인 영향을 줍니다.

 

그래서 대표적인 이미지 포맷인 JPG, PNG, WebP, HEIC, AVIF의 기술적 특징과 브라우저 호환성을 비교 분석하고, 어떤 포맷이 우리 서비스에 적합한지를 판단해봤습니다.

 

가장 익숙한 포맷인 JPG와 PNG를 먼저 비교하기 전에 얘네한테 사용된 압축 기술에 대해서 먼저 알아봅시다.

 

압축(Compression) 방식 

이미지에서 사용하는 압축 방식은 크게 두 가지입니다.

 

1) 손실 압축 (Lossy Compression)

• 압축률이 높아 파일 크기를 크게 줄일 수 있습니다.
• 다만 파일 압축 시 이미지의 일부 데이터가 영구적으로 삭제 됩니다.
• 예: JPG

 

2) 무손실 압축 (Lossless Compression)

• 압축 후에도 모든 이미지 데이터가 그대로 보존됩니다.
• 주로 로고, UI, 그래픽, 그래프 등 디테일이 중요한 이미지에 적합합니다.
• 예: PNG

 

JPG vs PNG

 1) JPG (JPEG)

 

JPG는 1992년에 Joint Photographic Experts Group에서 개발한 이미지 포맷으로, 손실 압축 방식을 사용합니다.

가장 큰 장점은 파일 크기가 작고 웹 호환성이 매우 뛰어나며, 특히 사진과 같이 색상 변화가 많은 이미지에 적합하다는 점입니다.

다만 압축 과정에서 일부 이미지 정보가 손실되기 때문에 화질이 저하될 수 있고, 투명 배경을 지원하지 않는다는 단점이 있습니다.

 

2) PNG

 

PNG는 1996년에 PNG Development Group에 의해 개발된 이미지 포맷으로, 무손실 압축 방식을 사용합니다.

이미지 데이터를 손상시키지 않고 저장하므로 화질이 유지되며, 투명도(알파 채널)를 지원하고 픽셀 단위의 정밀한 표현이 가능합니다.

하지만 파일 크기가 크고, 연속적인 색상 변화가 많은 일반 사진에는 비효율적이어서 주로 로고, 아이콘, UI 요소 등에 적합합니다.

 

 

Adobe 공식 JPG vs PNG 비교

JPEG와 TIFF 파일의 용도 | Adobe

 

 

그럼 최적화를 위한 다른 차세대 확장자들을 알아봅시다.

 

WebP 이란??

WebP는 2010년에 Google이 개발한, 손실과 무손실 압축을 모두 지원하는 웹 최적화 이미지 포맷입니다.

투명도와 애니메이션도 지원하며, 동일 품질 대비 더 작은 파일 크기를 제공하는 것이 핵심입니다.

 

파일 크기가 무려

JPG보다 25~34% 더 작으며 PNG보다 26% 더 작습니다.

 

호환성은 어떨까

2025년 기준 Can I use

• Chrome, Firefox, Safari, Edge 등 주요 브라우저 모두 지원
• IE(Internet Explorer)만 미지원

 

더 더 높은 압축률의 HEIC, AVIF

HEIC (High Efficiency Image Container)

 

HEIC는 2015년 MPEG에서 만든 이미지 포맷으로, 애플이 iOS 11부터 기본으로 사용하고 있는 형식입니다.

아이폰을 쓰신 분들은 많이 보셨을 확장자입니다 ㅎㅎ

 

일반적인 JPG보다 훨씬 적은 용량으로 고화질 이미지를 저장할 수 있고,

HDR 효과, 라이브 포토, 심도 정보처럼 아이폰의 다양한 사진 기능을 담을 수 있다는 게 큰 장점이라고 합니다.

 

하지만 호환성이...

 

사실상 웹을 위한 이미지 포맷은 아닌 듯 하네요...

 

 

AVIF (AV1 Image File Format)

 

AVIF는 2019년에 Google, Netflix 같은 기업들이 참여한 ‘Alliance for Open Media’라는 단체에서 만든 이미지 포맷입니다.

사실 저도 이번에 처음 알았는데, 기존의 WebP보다도 더 높은 압축률과 HDR, 무손실 압축, 투명도 지원 같은 고급 기능까지 갖춘 포맷이라고 합니다.

과연 이 친구의 호환성은?

 

아직까지는 브라우저와 툴의 지원 범위가 제한적이며, 일반 이미지 뷰어에서도 미리보기가 안 되는 경우가 많다고 합니다.

can i use에서도 webP에 비해 지원하는 버전이 적은 것을 확인하실 수 있습니다.

 

fallback 전략 없이 단독으로 사용하긴 어려워 보이네요.

 

결론:  WebP 선택

WebP는 JPG, PNG 대비 용량이 작으면서도, HEIC와 AVIF와 달리 주요 브라우저에서도 안정적으로 지원됩니다.

 

특히 GA(구글 애널리틱스)를 확인해본 결과, 우리 서비스에서는 Internet Explorer의 사용률이 0%이기 때문에 WebP 도입에 문제가 없다고 판단했습니다.

 

높은 압축률과 높은 호환성을 위해서 WebP를 택하게 되었습니다 :)