WebP vs PNG vs JPEG: 어떤 이미지 형식을 써야 할까
이미지 형식 선택은 사소한 결정처럼 보이지만, 방치하면 페이지 속도·화질·호환성을 조용히 갉아먹습니다. 웹을 지배하는 세 가지 형식을 실무 관점에서 정리하고, 각 형식이 정답이 되는 순간을 짚어 봅니다.
30초 요약
- 사진과 복잡한 그라데이션 → JPEG. 독자가 최신 브라우저 사용자라면 WebP.
- 아이콘, 로고, 스크린샷, 선명한 글자 → PNG.
- 같은 화질로 가장 작은 파일 → WebP.
- 극한의 절약과 느린 인코딩을 감수 → AVIF(WebP의 새로운 경쟁자).
JPEG: 만능의 원로
JPEG는 1992년부터 존재해 왔고 지구상의 모든 기기, 브라우저, 편집기, CMS가 표시할 수 있습니다. 인간의 시각 작용에 맞춘 손실 압축을 사용해, 우리가 잘 느끼지 못하는 디테일 — 특히 색이 복잡한 영역의 그것 — 을 버립니다.
장점:
- 수십 년 된 소프트웨어까지 아우르는 만능 호환성
- 사진에 대한 탁월한 압축 효율
- 품질 파라미터로 용량을 직접 제어
단점:
- 투명 미지원 — 투명 영역이 흰색이나 검정으로 채워짐
- 선명한 윤곽과 글자 주변에 “모기 소음” 아티팩트 발생
- 반복 편집·저장 시 품질이 빠르게 열화(세대 손실)
웹 사진의 스위트 스팟은 품질 75~85입니다. 60 아래로 내려가면 블록 아티팩트가 눈에 띄기 시작하고, 90 위로 올리면 눈에 보이지 않는 개선을 위해 용량이 급증합니다.
PNG: 정밀함과 투명
PNG는 무손실 형식입니다. 모든 픽셀이 그대로 보존됩니다. 그래서 스크린샷, UI 요소, 픽셀 아트, 다이어그램, 글자가 완벽하게 선명해야 하는 모든 이미지에 유일하게 합리적인 선택입니다.
장점:
- 완벽한 충실도 — 아티팩트가 영원히 없음
- 매끄러운 가장자리의 완전한 알파 투명
- 단색 위주 그래픽은 압축 효율이 극도로 좋음
단점:
- 사진에서는 거대해짐 — 같은 화질 JPEG의 5~10배가 흔함
- 품질 조절이 불가. 무손실이거나 형식을 바꾸거나 둘 중 하나
색 수가 적은 이미지를 8비트 “PNG-8”로 내보내면 극적으로 작아지는 고전적인 요령이 있지만, 이는 색이 몇 개 안 되는 이미지에서만 통합니다.
WebP: 현대의 기본값
구글이 개발한 WebP는 손실·무손실 압축을 모두 지원하고 알파 채널도 갖춥니다. 사진에서 같은 화질의 JPEG보다 보통 25~35% 작고, 투명과 고효율 압축을 결합할 수 있습니다 — JPEG는 절대 불가능한 조합입니다.
장점:
- 사진은 JPEG 대비 25~35% 작고, 그래픽도 PNG보다 작음
- 손실·무손실 양쪽 모드에서 투명 지원
- 현행 브라우저 전부가 지원 (Chrome, Firefox, Edge, Safari 14+)
단점:
- 일부 구형 데스크톱 앱과 CMS 파이프라인은 여전히 곤란해함
- 인코딩에 라이브러리나 도구 필요 (브라우저는 네이티브로 WebP를 만들 수 없고, Safari는 아예 인코딩이 불가능 — 그래서 브라우저 기반 변환기는 WebAssembly 인코더로 폴백하는 것)
AVIF: 새로운 개척지
AVIF는 비슷한 화질에서 WebP보다 20~30% 작고 지원도 빠르게 넓어지고 있습니다. 걸림돌은 인코딩 비용입니다. AVIF 생성은 계산량이 매우 커서 빠른 기기에서도 이미지 한 장에 수 초가 걸릴 수 있습니다. 대역폭 절감이 기다림의 가치가 있는 곳 — 히어로 이미지, 고트래픽 페이지 — 에 쓰고 WebP나 JPEG 폴백을 두세요.
간단한 결정표
| 콘텐츠 유형 | 최선 | 차선 |
|---|---|---|
| 웹용 사진 | WebP(품질 ~80) | JPEG(품질 ~80) |
| 글자 있는 스크린샷 | PNG | WebP 무손실 |
| 투명 로고 | PNG | 알파 포함 WebP |
| 아이콘 세트 | PNG 또는 SVG | WebP |
| 이메일 첨부 | JPEG | PNG |
| 최대 절약, 최신 독자 | AVIF | WebP |
형식 변환에 대하여
형식을 한 번 바꾸는 것은 저렴하지만 두 번 바꾸면 그렇지 않습니다. 항상 가장 좋은 원본에서 변환하세요 — 손실 재저장은 손상을 누적시킵니다. 지금 바로 일괄 변환이 필요하다면 우리의 이미지 형식 변환기를 이용하세요. PNG, JPEG, WebP, AVIF 입출력이 전부 브라우저 안에서 완결되고 파일은 어떤 서버로도 전송되지 않습니다.