이미지 형식 비교: JPEG, PNG, WebP, AVIF
현대 웹 이미지의 99% 이상을 이 네 형식이 차지합니다. 압축, 투명도, 애니메이션, 브라우저 지원에서 트레이드오프가 크게 다릅니다. 실무에서 무엇을 고를지에 대한 가이드입니다.
한눈에 비교
먼저 요약표입니다. 각 형식의 자세한 설명은 아래에 있습니다.
| 항목 | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| 압축 | 손실 | 무손실 | 손실 + 무손실 | 손실 + 무손실 |
| 알파(투명도) | 없음 | 있음(8비트) | 있음(8비트) | 있음(전체) |
| 애니메이션 | 없음 | APNG만 | 있음 | 있음 |
| 최대 비트 깊이 | 8비트 | 16비트 | 8비트 | 10/12비트 |
| 사진에서 전형적 크기(JPEG 대비) | 100% | 300~1000% | 65~75% | 40~60% |
| 브라우저 지원 | 거의 전부 | 거의 전부 | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| 전형적 인코딩 속도 | 빠름 | 빠름 | 보통 | 느림 |
JPEG — 가장 넓은 공통 기반
동작 방식
JPEG(Joint Photographic Experts Group)는 1992년에 표준화된 네 형식 중 가장 오래된 것입니다. 8×8 블록에 대한 손실 DCT, 양자화, 엔트로피 코딩을 사용합니다. 품질은 1~100 숫자로 조절합니다. MozJPEG 같은 현대 인코더는 비트스트림을 바꾸지 않고 10~20% 정도 더 압축하며 모든 JPEG 디코더가 읽을 수 있습니다.
적합한 용도
부드러운 톤과 디테일이 있는 사진 — 인물, 풍경, 제품 사진, 히어로 이미지 등.
장점
- 사실상 모든 이미지 뷰어에서 표시 가능.
- 대부분의 환경에서 하드웨어 디코딩 지원.
- MozJPEG, jpegli 등 최적화 생태계가 성숙함.
단점
- 알파 없음 — 배경은 평탄화해야 함.
- 텍스트·선화·날카로운 가장자리에서 블록 아티팩트.
- 채널당 8비트만.
PNG — 무손실과 투명도
동작 방식
PNG(Portable Network Graphics)는 1990년대 중반 GIF의 자유로운 대안으로 만들어졌습니다. 행별 필터 위에 DEFLATE를 얹은 엄격히 무손실 형식입니다. oxipng(optipng의 Rust 포트)는 필터·압축 조합을 탐색해 픽셀 하나도 바꾸지 않고 최소 크기를 찾습니다.
적합한 용도
UI 그래픽, 아이콘, 스크린샷, 다이어그램, 선화, 플랫 컬러 로고, 진짜 알파가 필요한 모든 것.
장점
- 무손실 — 왕복 후에도 픽셀이 완전 일치.
- 8비트 알파, 채널당 최대 16비트.
- 지원 범위가 사실상 보편적.
단점
- 사진에서는 매우 큼 — JPEG/WebP/AVIF의 수배일 수 있음.
- 원래 사양에 애니메이션 없음(APNG는 나중 확장).
WebP — Google의 웹 우선 형식
동작 방식
WebP는 2010년에 Google이 공개했고 VP8 비디오 코덱을 기반으로 하며 이후 별도 모드로 무손실을 추가했습니다. 하나의 컨테이너에서 손실·무손실 모두, 선택적 알파와 애니메이션을 지원합니다. 손실에서는 같은 느낌의 품질이면 JPEG보다 보통 25~35% 작아지기 쉽고, 무손실에서는 PNG보다 20~30% 작아지기도 합니다.
적합한 용도
AVIF를 아직 신중하게 써야 하는 경우의 범용 전달 — 사진, 투명 UI 스프라이트, GIF 대체, AVIF 아래 폴백 층.
장점
- 사진·그래픽·알파·애니메이션을 한 형식으로 처리.
- 비슷한 품질이면 JPEG·PNG보다 훨씬 작아지기 쉬움.
- 2020년 이후 주요 브라우저에서 널리 사용 가능.
단점
- 채널 8비트 — HDR에는 부적합.
- 저사양 기기에서는 JPEG보다 디코딩이 무거울 수 있음.
AVIF — 현재 압축 효율의 선두
동작 방식
AVIF(AV1 Image File Format)는 Alliance for Open Media가 2019년에 낸 AV1 비디오 코덱의 정지화 프로필입니다. 최대 12비트, 전체 알파, HDR, 넓은 색역, 필름 그레인 합성을 지원합니다. 참조 인코더(libavif가 쓰는 aom-av1)는 느리지만 실사진에서는 오늘날 최강급 압축을 노릴 수 있습니다.
적합한 용도
히어로 이미지, 포토 갤러리, CPU 시간보다 대역폭이 더 중요한 곳. <picture>의 최상위 소스로도 잘 맞습니다.
장점
- 압축 최상급 — JPEG 대비 보통 40~60% 더 작아지기 쉬움.
- 알파, 애니메이션, HDR, 넓은 색역, 10/12비트 지원.
- 로열티 없이 오픈.
단점
- 인코딩이 느림 — 빌드 타임·비동기 처리를 고려.
- Safari는 버전 16(2022)부터 지원.
- 합성 그래픽에서는 WebP 무손실이나 PNG에 비해 불리할 수 있음.
어떤 형식을 써야 할까요?
- 사진, 풀폭 히어로: 주로 AVIF,
<picture>로 WebP와 JPEG 폴백. - 투명 UI(아이콘·로고): 호환을 위해 PNG, 용량 우선이면 무손실 WebP.
- 선화, 스크린샷, 도표: PNG(또는 무손실 WebP) — JPEG/AVIF의 가장자리 아티팩트가 거슬림.
- 애니 GIF 대체: WebP 또는 AVIF — 둘 다 훨씬 작고 진짜 알파 지원.
- 오늘 모든 브라우저에 형식 하나만: 사진은 JPEG, 그래픽은 PNG. 최소 용량은 아니지만 호환 부담은 없음.
실무에서는 하나로 고를 필요가 없습니다. <picture> 안에서 AVIF → WebP → JPEG 또는 PNG 순으로 두면 각 브라우저가 디코딩할 수 있는 가장 작은 버전을 받습니다.
자주 묻는 질문
JPG를 WebP로 변환하려면?
PicBrewery를 열고 JPG를 업로드 영역에 놓으면 JPEG, PNG, WebP, AVIF가 자동 생성됩니다. WebP 타일을 선택하고 다운로드 아이콘을 누르세요. 모두 브라우저 안에서만 처리되며 업로드되지 않습니다.
PNG를 AVIF로 변환하려면?
PNG를 PicBrewery에 놓습니다. JPEG, WebP, AVIF로의 재인코딩은 Web Worker에서 병렬로 실행됩니다. AVIF 열에서 다운로드하거나 여러 행을 선택해 ZIP으로 묶고 소스마다 가장 작았던 형식만 담을 수 있습니다.
AVIF가 WebP보다 나은가요?
사진에서는 같은 느낌이면 AVIF가 WebP보다 20~30% 더 작아지는 경우가 많고 기반 AV1 덕분입니다. WebP는 인코딩이 빠르고 구형 기기 지원이 넓은 편입니다. 한쪽이 다른 쪽을 완전히 대체한다기보다 함께 씁니다.
Safari는 WebP를 지원하나요?
예. Safari 14(macOS Big Sur, iOS 14, 2020년)부터입니다. 최신 Safari는 손실·무손실 WebP를 모두 디코딩합니다.
PNG는 항상 무손실인가요?
예. DEFLATE는 엄격히 무손실이며 PNG에서 디코딩한 픽셀은 소스와 비트 일치입니다. 용량 감소는 필터·DEFLATE 튜닝(oxipng 등) 때문이며 데이터를 버리지 않습니다.
JPEG에 투명도를 넣을 수 있나요?
아니요. 고전 JPEG에는 알파가 없습니다. 투명이 필요하면 PNG, WebP, AVIF를 쓰세요. JPEG XL은 알파가 있으나 브라우저 보급은 제한적입니다.
AVIF는 JPEG보다 얼마나 작나요?
현대 AVIF 인코더(aom / libavif)의 전형적인 사진은 같은 지각 품질의 MozJPEG보다 보통 40~60% 더 작습니다. 하늘이나 단색이 많은 그래픽에서는 JPEG 자체가 잘 압축되어 차이는 줄어듭니다.
내 브라우저가 AVIF를 표시할 수 있나요?
Chrome 85+, Firefox 93+, Edge 121+, Safari 16+에서 지원됩니다. 구형 브라우저를 위해 <picture>에 WebP나 JPEG를 폴백으로 두세요.
PicBrewery는 정말 클라이언트만 사용하나요?
예. 디코딩과 재인코딩은 WebAssembly로 Web Worker 안, 사용자 기기에서 이루어집니다. 이미지 바이트는 네트워크로 보내지 않습니다. 로드되는 것은 정적 앱과 코덱뿐입니다.
형식 간 변환
특정 변환이 필요하신가요? 아래 쌍을 고르세요. 각 페이지에 단계별 안내, 예상 용량 절감, 해당 쌍 FAQ가 있습니다.