이미지 포맷 비교 가이드: JPEG, PNG, WebP, AVIF

웹사이트를 운영하거나 디자인 작업을 하다 보면 이미지 포맷 때문에 고민한 적이 한 번쯤은 있을 겁니다. JPEG로 저장할까, PNG로 저장할까, 아니면 요즘 많이 들리는 WebP나 AVIF로 바꿔야 할까. 이미지 형식 비교는 단순히 확장자 하나 바꾸는 문제가 아닙니다. 어떤 포맷을 선택하느냐에 따라 웹사이트 로딩 속도, 이미지 품질, 사용자 경험이 완전히 달라지거든요. 이 글에서는 주요 이미지 포맷의 특징부터 실전에서 어떻게 골라 써야 하는지까지 하나씩 정리해 드리겠습니다.

이미지 포맷이란 무엇이고 왜 이렇게 종류가 많을까요?

이미지 포맷은 디지털 이미지 데이터를 저장하는 방식을 말합니다. 사진이나 그래픽을 파일로 저장할 때 어떤 방식으로 압축하고, 어떤 정보를 유지하고, 어떤 정보를 버릴지를 정하는 규칙이라고 생각하면 됩니다.

그런데 왜 하나의 포맷으로 통일하지 않고 이렇게 여러 가지가 있을까요? 이유는 간단합니다. 용도가 다르기 때문입니다. 사진처럼 색상이 복잡한 이미지에 적합한 포맷이 있고, 로고처럼 선명한 경계선이 중요한 이미지에 맞는 포맷이 따로 있습니다. 또한 기술이 발전하면서 기존 포맷의 단점을 보완한 차세대 이미지 포맷도 계속 등장하고 있습니다.

현재 웹에서 가장 많이 쓰이는 이미지 포맷 네 가지를 정리하면 이렇습니다.

JPEG: 1992년에 만들어진 가장 오래된 포맷. 사진에 최적화되어 있고 파일 크기가 작습니다.
PNG: 투명 배경을 지원하고 품질 손실 없이 저장할 수 있습니다.
WebP: 구글이 2010년에 개발한 포맷. JPEG과 PNG의 장점을 합쳤습니다.
AVIF: 2019년에 등장한 최신 포맷. 현존하는 포맷 중 압축 효율이 가장 높습니다.

JPEG는 언제 쓰는 게 좋을까요?

JPEG는 30년이 넘은 포맷이지만 여전히 웹에서 가장 많이 사용되는 이미지 형식입니다. 특히 사진이나 색상이 풍부한 이미지를 저장할 때 진가를 발휘합니다.

JPEG의 핵심은 손실 압축입니다. 사람의 눈이 잘 구분하지 못하는 색상 정보를 과감하게 버려서 파일 크기를 줄이는 방식이죠. 압축률을 높이면 파일 크기는 작아지지만 화질이 떨어지고, 압축률을 낮추면 화질은 좋지만 파일이 커집니다. 보통 품질 70~85% 정도로 설정하면 눈으로 봤을 때 큰 차이 없이 적당한 파일 크기를 얻을 수 있습니다.

JPEG를 쓰면 좋은 경우는 이렇습니다.

풍경 사진, 인물 사진 등 색상이 다양한 이미지
블로그 포스트나 뉴스 기사의 본문 이미지
SNS에 올리는 사진
이메일에 첨부하는 이미지

반면 JPEG가 적합하지 않은 경우도 있습니다. 투명 배경이 필요한 로고, 텍스트가 포함된 스크린샷, 색상 경계가 뚜렷한 일러스트 같은 이미지는 JPEG로 저장하면 경계 부분이 뭉개지는 현상이 생깁니다. 이런 경우에는 다른 포맷을 써야 합니다.

PNG는 어떤 상황에서 선택해야 할까요?

JPEG PNG 차이를 가장 쉽게 설명하자면 이렇습니다. JPEG는 "적당히 예쁘게, 가볍게"이고 PNG는 "완벽하게 깨끗하게, 대신 무겁게"입니다.

PNG는 무손실 압축 방식을 사용합니다. 원본 이미지의 모든 픽셀 정보를 그대로 보존하기 때문에 아무리 저장을 반복해도 화질이 떨어지지 않습니다. 또한 PNG의 가장 큰 장점은 **투명도(알파 채널)**를 지원한다는 점입니다. 배경이 투명한 로고나 아이콘을 만들 때 반드시 PNG를 써야 하는 이유가 바로 이것입니다.

PNG가 필수인 상황을 정리하면 다음과 같습니다.

투명 배경이 필요한 로고, 아이콘, UI 요소
텍스트가 많이 포함된 스크린샷이나 인포그래픽
선이 선명해야 하는 도면, 다이어그램
편집을 여러 번 반복해야 하는 작업 파일

다만 PNG는 파일 크기가 상당히 큽니다. 같은 사진을 JPEG와 PNG로 저장하면 PNG 파일이 5배에서 10배까지 커질 수 있습니다. 그래서 단순히 사진을 웹에 올리는 용도라면 PNG 대신 JPEG를 쓰는 게 맞습니다. 파일 크기가 크면 페이지 로딩이 느려지고, 모바일 데이터도 많이 소모되니까요.

WebP 변환을 해야 하는 이유는 무엇일까요?

WebP는 구글이 개발한 차세대 이미지 포맷으로, JPEG과 PNG의 장점을 하나로 합친 포맷입니다. 손실 압축과 무손실 압축을 모두 지원하고, 투명도까지 지원합니다. 쉽게 말해 JPEG처럼 가볍고 PNG처럼 투명 배경도 쓸 수 있는 "만능 포맷"인 셈이죠.

WebP 장점을 숫자로 보면 더 확실합니다.

손실 압축 기준으로 JPEG 대비 25~35% 더 작은 파일 크기 (동일 화질 기준)
무손실 압축 기준으로 PNG 대비 약 26% 더 작은 파일 크기
투명도 지원 (PNG 대체 가능)
애니메이션 지원 (GIF 대체 가능)

2024년 기준으로 전 세계 브라우저의 97% 이상이 WebP를 지원합니다. 크롬, 사파리, 파이어폭스, 엣지 등 주요 브라우저에서 모두 문제없이 표시됩니다. 한때 사파리가 WebP를 지원하지 않아서 도입을 망설이는 경우가 많았는데, 이제는 그런 걱정을 할 필요가 없습니다.

구글의 PageSpeed Insights나 Lighthouse 같은 웹 성능 측정 도구에서도 "차세대 포맷으로 이미지를 제공하세요"라는 권장 사항을 자주 볼 수 있습니다. 여기서 말하는 차세대 포맷이 바로 WebP와 AVIF입니다. 이미지 포맷 최적화를 시작하고 싶다면 기존 JPEG 이미지를 WebP로 변환하는 것이 가장 쉽고 효과적인 첫 번째 단계입니다.

AVIF 포맷은 지금 사용해도 괜찮을까요?

AVIF는 현재 사용 가능한 이미지 포맷 중에서 압축 효율이 가장 뛰어난 포맷입니다. AV1 비디오 코덱을 기반으로 만들어졌으며, 같은 화질에서 JPEG보다 최대 50%, WebP보다도 20% 정도 더 작은 파일을 만들 수 있습니다.

AVIF 장점을 정리하면 다음과 같습니다.

압도적인 압축 효율: 동일 화질 대비 가장 작은 파일 크기
넓은 색 영역(HDR) 지원: 10비트, 12비트 색 깊이를 지원해서 더 풍부한 색상 표현 가능
투명도 지원: PNG처럼 알파 채널 사용 가능
애니메이션 지원: GIF 대체 가능

하지만 AVIF에도 단점이 있습니다.

첫째, 인코딩 속도가 느립니다. JPEG나 WebP로 변환하는 것보다 AVIF로 변환하는 데 시간이 훨씬 오래 걸립니다. 이미지를 수천 장씩 처리해야 하는 대규모 서비스에서는 이 부분이 부담이 될 수 있습니다.

둘째, 브라우저 지원률이 WebP보다 낮습니다. 크롬, 파이어폭스, 삼성 인터넷 브라우저는 AVIF를 지원하지만, 사파리는 비교적 최근에야 지원을 시작했고 일부 구형 버전에서는 여전히 문제가 있을 수 있습니다. 전체 브라우저 지원률은 약 93% 수준입니다.

그래서 AVIF를 쓸 때는 단독으로 쓰기보다 WebP나 JPEG와 함께 폴백(fallback) 전략을 세우는 것이 안전합니다. 이 부분은 뒤에서 더 자세히 설명하겠습니다.

프로젝트에 맞는 이미지 포맷은 어떻게 골라야 할까요?

이미지 형식 비교를 한눈에 정리한 표를 만들어 봤습니다. 프로젝트에서 어떤 포맷을 쓸지 고민될 때 참고하세요.

구분	JPEG	PNG	WebP	AVIF
압축 방식	손실	무손실	손실/무손실	손실/무손실
투명도	미지원	지원	지원	지원
애니메이션	미지원	미지원	지원	지원
파일 크기	작음	큼	매우 작음	가장 작음
브라우저 지원	100%	100%	97%	93%
인코딩 속도	빠름	보통	빠름	느림
색 깊이	8비트	8/16비트	8비트	8/10/12비트
추천 용도	사진	로고, 스크린샷	웹 전반	고품질 웹 이미지

간단한 판단 기준도 정리해 드릴게요.

사진인가요? JPEG, WebP, 또는 AVIF를 쓰세요.
투명 배경이 필요한가요? PNG, WebP, 또는 AVIF를 쓰세요.
웹 성능이 중요한가요? WebP 또는 AVIF를 우선 고려하세요.
모든 브라우저에서 확실히 보여야 하나요? JPEG 또는 PNG가 가장 안전합니다.
이메일이나 문서에 넣을 이미지인가요? JPEG 또는 PNG를 쓰세요. 이메일 클라이언트는 WebP나 AVIF를 지원하지 않는 경우가 많습니다.

이미지 포맷을 변환하면 어떤 일이 일어날까요?

이미지 변환 과정에서 알아두면 좋은 점들이 있습니다. 포맷을 바꾼다고 해서 항상 좋은 결과만 나오는 건 아니거든요.

손실 포맷에서 손실 포맷으로 변환하는 경우(예: JPEG에서 WebP)

이미 한번 압축하면서 정보가 손실된 이미지를 다시 압축하는 것이기 때문에 화질이 추가로 떨어질 수 있습니다. 이를 "이중 압축" 또는 "세대 손실"이라고 부릅니다. 그래서 가능하다면 원본 이미지(RAW나 무손실 PNG)에서 직접 WebP나 AVIF로 변환하는 것이 가장 좋습니다.

무손실 포맷에서 손실 포맷으로 변환하는 경우(예: PNG에서 JPEG)

PNG 원본의 완벽한 픽셀 정보 중 일부가 버려집니다. 특히 투명 배경이 있는 PNG를 JPEG로 변환하면 투명한 부분이 흰색이나 검은색 배경으로 채워지게 됩니다. 변환 전에 투명도가 필요한 이미지인지 꼭 확인하세요.

손실 포맷에서 무손실 포맷으로 변환하는 경우(예: JPEG에서 PNG)

이미 손실된 화질이 복구되지는 않습니다. JPEG에서 이미 버려진 정보는 PNG로 저장한다고 해서 다시 돌아오지 않아요. 오히려 파일 크기만 불필요하게 커지는 결과가 됩니다.

정리하면, 이미지 변환을 할 때는 반드시 원본 파일을 보관해 두고, 변환 후 화질을 직접 눈으로 확인하는 습관을 들이는 것이 좋습니다. 다행히 요즘은 이미지 변환 도구들이 변환 전후 비교 미리보기 기능을 제공하는 경우가 많아서 어렵지 않게 확인할 수 있습니다.

브라우저마다 다른 포맷을 제공하려면 어떻게 해야 할까요?

WebP와 AVIF를 쓰고 싶지만 모든 사용자의 브라우저가 이를 지원하는 건 아닙니다. 이때 사용하는 방법이 HTML의 <picture> 요소입니다.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="이미지 설명">
</picture>

이 코드의 동작 방식은 간단합니다. 브라우저가 위에서부터 순서대로 확인하면서 자신이 지원하는 첫 번째 포맷을 선택합니다. AVIF를 지원하면 AVIF를 보여주고, AVIF는 안 되지만 WebP는 되면 WebP를 보여주고, 둘 다 안 되면 마지막의 JPEG를 보여줍니다.

이 방식의 장점은 다음과 같습니다.

최신 브라우저 사용자는 가장 가벼운 이미지를 받아 빠른 로딩을 경험합니다.
구형 브라우저 사용자도 이미지가 깨지지 않고 정상적으로 표시됩니다.
자바스크립트 없이 HTML만으로 처리되기 때문에 성능에 부담이 없습니다.

Next.js를 사용하는 경우에는 next/image 컴포넌트가 이 과정을 자동으로 처리해 줍니다. 워드프레스도 5.8 버전부터 WebP를 기본 지원하고 있고, 다양한 플러그인을 통해 AVIF까지 자동 변환이 가능합니다.

물론 포맷별로 이미지 파일을 여러 벌 준비해야 한다는 번거로움은 있습니다. 하지만 CDN 서비스나 이미지 최적화 도구를 활용하면 이 과정을 자동화할 수 있습니다.

웹사이트를 느리게 만드는 이미지 포맷 실수에는 어떤 것들이 있을까요?

이미지 포맷 최적화를 제대로 하지 않으면 웹사이트 성능이 크게 떨어집니다. 실제로 많은 웹사이트에서 흔히 발견되는 실수들을 정리해 봤습니다.

1. 사진을 PNG로 저장하는 실수

가장 흔한 실수입니다. 투명도가 필요 없는 일반 사진을 PNG로 저장하면 JPEG 대비 파일 크기가 5~10배 커집니다. 네이버 블로그나 티스토리에 사진을 올릴 때도 PNG 대신 JPEG를 쓰면 훨씬 빠르게 로딩됩니다.

2. 원본 크기 그대로 업로드하는 실수

스마트폰으로 찍은 사진은 보통 4000x3000 픽셀 이상에 파일 크기가 5MB를 넘기는 경우도 많습니다. 웹에서 실제로 표시되는 크기가 800x600 픽셀이라면 굳이 원본 크기로 올릴 필요가 없습니다. 이미지를 적절한 크기로 리사이즈한 후 업로드하세요.

3. 모든 이미지를 같은 포맷으로 저장하는 실수

사진은 JPEG나 WebP로, 로고나 아이콘은 PNG나 SVG로, 간단한 애니메이션은 WebP로. 이미지의 특성에 맞는 포맷을 선택하는 것이 중요합니다.

4. 압축률 설정을 신경 쓰지 않는 실수

JPEG 품질 100%와 80%는 파일 크기가 3~4배 차이 나지만, 눈으로는 거의 구분이 안 됩니다. 웹용 이미지라면 JPEG 기준 75~85%, WebP 기준 75~80% 정도의 품질 설정이 적절합니다.

5. 차세대 포맷을 아예 사용하지 않는 실수

아직도 모든 이미지를 JPEG와 PNG로만 제공하고 있다면 상당한 최적화 기회를 놓치고 있는 겁니다. WebP 변환만으로도 전체 이미지 용량을 25~35% 줄일 수 있고, 이는 곧 페이지 로딩 시간 단축으로 이어집니다. 구글은 Core Web Vitals에서 LCP(Largest Contentful Paint)를 중요한 지표로 보고 있는데, 이미지 최적화는 LCP를 개선하는 가장 직접적인 방법 중 하나입니다.

이미지 포맷 변환, 어디서 시작하면 될까요?

지금까지 각 이미지 포맷의 특징과 언제 어떤 포맷을 써야 하는지 알아봤습니다. 핵심만 다시 정리하면 이렇습니다.

JPEG: 사진에 적합하고 호환성이 가장 높습니다.
PNG: 투명도가 필요하거나 화질 손실이 허용되지 않을 때 씁니다.
WebP: 웹에서 사용하는 대부분의 이미지에 가장 균형 잡힌 선택입니다.
AVIF: 최고의 압축 효율이 필요할 때, 폴백 전략과 함께 사용합니다.

이제 이론은 충분합니다. 실제로 이미지 포맷을 변환해 볼 차례입니다.

ConvertIMG에서는 JPEG, PNG, WebP, AVIF 간의 이미지 변환을 브라우저에서 바로 할 수 있습니다. 별도 프로그램 설치 없이 파일을 업로드하면 원하는 포맷으로 빠르게 변환할 수 있고, 변환 전후 화질 비교도 간편하게 확인할 수 있습니다. 웹사이트 이미지 최적화를 시작하고 싶다면 지금 바로 ConvertIMG에서 이미지 변환을 체험해 보세요.