WebP vs AVIF vs JPEG vs PNG — 무엇을 언제 쓰나
수정 7분 분량
형식 논쟁은 보통 “무엇이 최고냐”로 흐르는데 그 질문에는 답이 없습니다. 의미 있는 질문은 더 좁습니다. 이 이미지의 내용과 도착지를 생각할 때, 무엇이 가장 손해가 적은가?
요약
| 압축률 | 지원 범위 | 투명도 | 적합한 용도 | |
|---|---|---|---|---|
| JPEG | 기준점 | 20년 전 소프트웨어까지 전부 | 없음 | 어디서든 열려야 하는 사진 |
| PNG | 무손실, 큼 | 전부 | 있음 | 스크린샷, 로고, 글자 있는 이미지 |
| WebP | JPEG보다 25~35% 작음 | 현행 브라우저 전부, 대부분의 최신 앱 | 있음 | 웹의 무난한 기본값 |
| AVIF | WebP보다 20~30% 작음 | 현행 브라우저, 브라우저 밖은 들쭉날쭉 | 있음 | 용량이 정말 중요한 웹 이미지 |
이 표는 “아래로 갈수록 작아지고, 아래로 갈수록 통용 범위가 좁아진다”로 읽으시면 됩니다.
JPEG: 언제나 열리는 형식
JPEG는 30년 된 손실 형식이고 투명도도 없지만, 형식 애호가들이 인정하고 싶어 하는 것보다 훨씬 자주 정답입니다. 메일 첨부, 관공서 업로드 양식, 인쇄소에 넘기는 파일, 어떤 컴퓨터에서 열릴지 모르는 발표 자료라면 JPEG를 보내세요. 압축률은 대안들보다 4분의 1쯤 나쁘고, 호환성은 완벽합니다.
진짜 약점은 사진이 아니라 딱 떨어지는 경계입니다. 글자, 스크린샷, 선 그림, 단색 블록에는 눈에 보이는 물결 자국이 생깁니다. 알고리즘 자체가 “인접 픽셀은 서로 비슷하다”는 가정 위에 세워져 있기 때문입니다.
PNG: 무손실, 그리고 자주 잘못 쓰이는
PNG는 모든 픽셀을 정확히 저장하고 투명도를 지원하며, 스크린샷·UI 시안·도표·로고에 맞는 선택입니다. 동시에 사진에도 자주 쓰이는데, 이 경우 시각적으로 동일한 JPEG보다 5~10배 큰 파일을 만들면서 얻는 것은 전혀 없습니다.
간단한 기준: 카메라에서 나온 이미지라면 PNG는 틀린 선택이고, 화면에서 나온 이미지라면 PNG가 대체로 맞습니다. 다만 같은 내용을 무손실 WebP로 저장하면 보통 20~30% 더 작습니다.
WebP: 웹의 합리적인 기본값
WebP는 손실·무손실 모두 되고 투명도와 애니메이션을 지원하며, 현재 쓰이는 모든 브라우저가 지원합니다. 그래서 웹페이지에 올라가는 이미지의 기본값으로 삼기에 적합합니다. 같은 체감 품질에서 JPEG보다 4분의 1~3분의 1 작고, 2026년 시점에 호환성 걱정은 사실상 사라졌습니다.
여전히 발목을 잡는 곳은 브라우저 밖입니다. 일부 데스크톱 편집기, 오래된 오피스 제품, 몇몇 업로드 양식은 아직 .webp를 거부합니다. 웹페이지가 아니라 사람에게 보내는 파일이라면 JPEG가 더 안전합니다.
AVIF: 최고의 압축률, 그리고 단서들
AV1 비디오 코덱에서 나온 AVIF는 현재 압축률 1위입니다. 보통 WebP보다 20~30% 더 작고, 낮은 비트레이트에서 압도적으로 좋습니다. JPEG가 노을을 계단 모양 띠로 뭉개는 지점에서 AVIF는 믿기 힘든 용량으로 그라데이션을 붙잡고 있습니다.
실전에서 중요한 단서 세 가지:
- 인코딩이 느립니다. 특히 큰 이미지에서 WebP·JPEG보다 눈에 띄게 오래 걸립니다. 수백 장을 한 번에 처리하면 체감됩니다.
- 브라우저 지원과 앱 지원은 다릅니다. 현행 브라우저는 모두 AVIF를 디코딩하지만, 운영체제 미리보기, 동료의 이미지 뷰어, 많은 CMS 업로더는 그렇지 않을 수 있습니다.
- 브라우저에서 도는 도구는 브라우저가 만들 수 있는 형식만 만듭니다. 기기에서만 동작하는 도구는(이 사이트도 포함) 브라우저 자체 인코더에 의존합니다. 그래서 일부 브라우저에서는 AVIF 버튼이 비활성화됩니다. 깨진 파일을 조용히 내놓는 대신, 시작할 때 실제 지원 여부를 검사하기 때문입니다.
품질 척도도 JPEG와 다릅니다. AVIF 50이 대략 JPEG 80에 해당하므로, 익숙한 숫자를 그대로 쓰면 예상보다 큰 파일이 나옵니다.
선택 순서
위에서 아래로 읽고 처음 걸리는 곳에서 멈추면 됩니다.
- 투명도가 필요한가? → WebP, 어디서든 열려야 한다면 PNG.
- 스크린샷·도표거나 글자가 들어 있나? → 무손실 WebP, 호환성이 걸리면 PNG.
- 사람·양식·인쇄소로 가는 파일인가? → JPEG 품질 85.
- 웹페이지에 올리고 마크업을 내가 통제하나? → AVIF + WebP 대체, 파일 하나로 단순하게 가려면 WebP.
- 그 외 전부 → WebP 품질 80.
변환 전에 알아둘 것
변환이 화질을 되살리지는 않습니다. 심하게 압축된 JPEG를 AVIF로 바꾸면 기존 자국을 그대로 보존하면서 인코딩 시간만 더 씁니다. 항상 가장 좋은 원본에서 변환하세요.
손실 → 손실은 매번 조금씩 잃습니다. JPEG → WebP → AVIF → JPEG는 원본에서 한 번에 가는 것보다 눈에 띄게 나쁩니다. 원본은 보관하고, 내보낸 파일은 일회용으로 취급하세요.
캔버스 기반 변환은 메타데이터를 지웁니다. 브라우저 캔버스로 내보내는 모든 도구는(역시 이 사이트도) EXIF를 버립니다. 방향, 촬영 설정, 시각, GPS까지. 프라이버시에는 이득이고 EXIF로 사진을 정리하는 사람에게는 불편입니다. 방향 값은 내보내기 전에 읽어서 적용하므로 사진이 옆으로 누워 나오지는 않지만, 태그 자체는 결과물에 남지 않습니다.
움직이는 GIF를 목록에 넣지 않은 건 의도입니다. 애니메이션 GIF의 올바른 도착지는 다른 이미지 형식이 아니라 비디오 코덱입니다. 짧은 MP4나 WebM이 같은 내용의 GIF보다 대개 10배 가까이 작습니다.
짐작하지 말고 확인하기
위의 퍼센트는 전형적인 사진들의 평균이고, 내 이미지는 다르게 움직일 수 있습니다. 나뭇잎, 필름 그레인, 노이즈는 형식과 무관하게 압축이 안 됩니다. 확실한 방법은 같은 이미지를 두 설정으로 변환해 예상 용량을 비교하고, 100% 확대로 결과를 보는 것입니다. 내 작업물 중 대표 이미지 하나로 이걸 한 번 해보는 게 어떤 비교표보다 — 이 글의 표를 포함해서 — 값집니다.