JPEG vs PNG vs WebP vs AVIF vs JXL
다섯 가지 포맷, 다섯 가지 서로 다른 절충. 이 가이드는 각 포맷이 실제로 어떻게 압축하는지, 어디서 무너지는지, 그리고 추측 없이 어떻게 고르는지 설명합니다.
한 줄 요약
호환성이 가장 중요할 때 사진에는 JPEG를, 안전한 현대적 기본값으로는 WebP를, 가능한 한 가장 작은 파일을 원하면 AVIF를, 이미지에 날카로운 경계나 텍스트, 투명도가 있으면 PNG를 사용하세요. 현대적인 아카이브급 포맷이 필요하고 여는 소프트웨어를 직접 통제할 수 있다면 JXL을 사용하세요.
각 포맷의 압축 방식
JPEG — 만능 일꾼
JPEG는 1992년부터 사진의 기본 포맷이었고, 지금도 모든 도구와 브라우저, 프린터가 알아보는 형식입니다. 손실 압축으로, 이미지를 블록으로 나누고 주파수 데이터로 변환한 뒤 눈이 가장 둔감한 고주파 디테일을 버립니다. 그래서 품질을 너무 낮추면 경계 주위에 특징적인 블록과 링잉 아티팩트가 생깁니다.
장점: 사진에서 파일이 매우 작고, 지원 범위가 가장 넓으며, 인코딩과 디코딩이 빠릅니다. 단점: 투명도를 지원하지 않고, 날카로운 경계와 텍스트에 약하며, 다시 저장할 때마다 화질이 떨어집니다. JPEG를 반복해서 재압축하지 마세요.
PNG — 무손실, 그리고 그 자부심
PNG는 모든 픽셀을 정확히 저장합니다. 예측 필터와 DEFLATE를 사용하므로 넓은 영역이 반복될 때 압축이 잘 됩니다. 단색 영역, UI, 스크린샷, 다이어그램, 로고가 그렇습니다. JPEG가 못 하는 완전한 알파 투명도도 지원합니다.
장점: 픽셀 단위로 정확한 결과, 투명도, 텍스트와 선화에 최적. 단점: 사진은 압축이 형편없습니다. 사진을 PNG로 저장하면 같은 사진의 JPEG보다 5~10배 커지기 쉽습니다. 참고로 PNG 출력은 항상 무손실이라, 화질 손실을 전혀 감수할 수 없을 때 안전한 선택입니다.
WebP — 실용적인 중간 지점
WebP는 Google이 JPEG와 PNG를 대체할 개선안으로 설계했고 두 가지 일을 모두 합니다. 사진용 손실 모드와 그래픽용 무손실 모드, 그리고 알파 투명도까지 지원합니다. 실제로 손실 WebP는 비슷한 품질에서 JPEG보다 보통 25~35% 작고, 지금은 모든 최신 브라우저가 지원합니다.
장점: 폭넓은 지원과 함께 좋은 절감 효과를 주고, 손실 모드에서도 투명도를 처리합니다. 단점: 일부 오래되었거나 틈새 도구는 여전히 열지 못하며, 무손실 WebP가 최적화된 PNG보다 항상 낫지는 않습니다.
AVIF — 가장 작은 파일
AVIF는 AV1 비디오 코덱을 기반으로 하며, 오늘날 널리 쓰이는 포맷 중 가장 효율적입니다. JPEG와 비교하면 같은 시각적 품질에서 훨씬 작은 파일을 만들어냅니다. 흔히 절반 정도 크기이며, 투명도와 넓은 색 영역, HDR도 지원합니다.
장점: 확실한 차이로 앞서는 압축률, 현대적인 기능. 단점: 인코딩이 느리고(이미지 한 장에 밀리초가 아니라 초 단위), 아주 오래된 브라우저는 표시하지 못합니다. 여러 장을 한꺼번에 처리할 때 인내가 가장 크게 보상되는 포맷입니다.
JXL — 현대적인 아카이브 선택
JPEG XL(JXL)은 JPEG의 후속을 목표로 설계되었습니다. 손실과 무손실 모드를 모두 제공하고, 완전한 알파 투명도, 넓은 색 영역, HDR, 점진적 디코딩을 지원합니다. 비슷한 품질에서 보통 JPEG보다 작은 파일을 만들기 때문에 아카이브와 디코더를 직접 통제하는 파이프라인에 적합합니다.
장점: 손실과 무손실을 한 포맷에서 처리하는 효율적인 압축, 현대적 기능, 특허 사용료 없음. 단점: 높은 노력 수준에서는 인코딩이 느리고 브라우저 표시 지원도 아직 고르지 않습니다. Chrome과 Firefox는 기본적으로 JXL 파일을 표시하지 않으므로 오픈 웹에서 WebP나 AVIF를 안전하게 대체하기는 아직 이릅니다. tinyimg는 JXL을 인코딩·디코딩할 수 있지만, 먼저 결과를 열 대상 환경을 확인하세요.
나란히 비교
| 포맷 | 압축 | 투명도 | 적합한 용도 | 주의할 점 |
|---|---|---|---|---|
| JPEG | 손실 | 없음 | 사진, 최대 호환성 | 낮은 품질에서 아티팩트, 재저장 시 화질 저하 |
| PNG | 무손실 | 있음 | 스크린샷, UI, 로고, 텍스트 | 사진에서는 용량이 매우 큼 |
| WebP | 둘 다 | 있음 | 범용 현대적 기본값 | 간혹 도구 지원에 공백, 무손실은 PNG를 거의 못 이김 |
| AVIF | 둘 다 | 있음 | 최소 파일 크기, 이미지가 많은 사이트 | 인코딩이 느림, 최신 브라우저 필요 |
| JXL | 둘 다 | 있음 | 아카이브, 고품질 사진, 통제된 파이프라인 | 인코딩이 느림, 브라우저 표시 지원이 고르지 않음 |
이미지가 무엇인지에 따른 선택
- 사진(인물, 풍경, 제품) — 인코딩 시간을 감당할 수 있다면 AVIF를 먼저, 아니면 WebP. 뒤 단계 도구가 고집할 때만 JPEG로 돌아가세요.
- 스크린샷이나 UI 시안 — PNG 또는 무손실 WebP. 1픽셀짜리 날카로운 선과 텍스트는 손실 포맷이 가장 흐려지는 지점입니다.
- 단색 로고나 아이콘 — PNG 또는 무손실 WebP. 원래 벡터 아트였다면 SVG도 고려하세요.
- 투명도가 필요한 이미지 — PNG, WebP, AVIF 또는 JXL. JPEG는 아예 할 수 없습니다.
- 이미 충분히 최적화된 파일 — 그대로 두세요. 최적화된 파일을 다시 인코딩하면 오히려 커지는 경우가 많습니다.
웹에서의 실용적인 답: AVIF와 WebP로 내보낸 뒤 <picture>로 JPEG 폴백과 함께 제공하세요. 최신 브라우저는 작은 파일을 받고, 오래된 브라우저도 이미지를 볼 수 있습니다.
포맷 선택보다 중요한 두 가지 규칙
- 압축하기 전에 크기를 줄이세요. 4000픽셀 너비의 사진을 800픽셀 자리에 넣는 것은 어떤 코덱 차이로도 되돌릴 수 없는 바이트를 낭비합니다. 크기 예산은 웹 성능 가이드에서 다룹니다.
- 원본을 보관하세요. 손실 저장은 매번 되돌릴 수 없습니다. 사본을 압축하고, 압축된 파일은 아카이브가 아니라 빌드 결과물로 취급하세요.
내 파일로 직접 확인해 보세요
수치는 이미지에 따라 크게 달라지므로, 유일하게 믿을 만한 기준은 여러분의 이미지 모음입니다. tinyimg는 한 묶음을 여러 포맷으로 한 번에 압축해 크기를 나란히 비교할 수 있게 해 주며, 모든 처리가 로컬에서 실행되므로 실험 중에도 아무것도 업로드되지 않습니다.