WebP vs AVIF vs JPG — 어떤 형식을 쓸까?

약어보다 먼저 용도부터

오래된 태블릿으로 메일 여는 부모에게 여행 사진을 보낼까요? JPG를 유지하세요. 정부 양식, 은행 업로드, JPEG만 받는 인쇄소 — 호환성을 걸 가치는 거의 없습니다.

내 사이트·블로그·상품 카탈로그에서 방문자가 최신 브라우저를 쓰나요? WebP는 JPG와 비슷한 느낌으로 파일 크기를 크게 줄이고, JPEG와 달리 투명도도 담을 수 있습니다.

트래픽 많은 페이지에서 `<picture>`로 여러 소스를 제공할 수 있나요? AVIF 테스트가 가치 있습니다 — 디코드 못 하는 클라이언트용 JPG·WebP 백업 없이 AVIF만 배포하지 마세요.

JPG: 여전히 모두가 아는 사진 형식

JPEG는 사진용 손실 압축 — 인물, 풍경, 행사 사진. 휴대폰, PC, CMS, SNS 앱이 모두 문제없이 엽니다.

투명 배경, 단색 로고, 글자가 선명해야 하는 UI 스크린샷에는 맞지 않습니다. PNG나 WebP가 적합합니다.

「JPG로 저장」을 반복할수록 세대가 쌓입니다. 가능한 가장 깨끗한 소스에서 한 번만 내보내세요.

WebP: 현대 웹의 일꾼

비슷한 화질의 사진에서 WebP는 보통 JPG보다 바이트가 적습니다 — 때로는 크게. JPEG에 없는 알파 채널도 지원합니다.

정적 호스트, CDN, 대부분의 사이트 프레임워크는 WebP 제공을 이미 지원합니다. 이메일 클라이언트가 예외로, 첨부를 plain JPEG로 보여 주는 경우가 많아 뉴스레터 그래픽은 JPG가 많습니다.

PNG 스크린샷이 부담스럽다면 WebP 변환이 PNG 재저장보다 보통 더 작습니다. 그래서 PNG 압축 흐름은 기본 WebP 출력입니다.

AVIF: 더 작지만 손이 더 감

복잡한 사진 장면에서 AVIF는 WebP를 또 이기는 경우가 많습니다 — 인코딩이 느리고 구형 기기·앱 내 WebView에서 빈틈이 있는 대가입니다.

운영에서는 `<picture>` 안에 AVIF를 우선 소스로 두고 WebP·JPG를 폴백으로 브라우저가 이해하는 최선의 형식을 고르게 합니다.

빌드 파이프라인이 AVIF 인코드 시간에 시달리거나 폴백이 아직 없다면, WebP를 먼저 제대로 쓰는 것만으로도 대부분의 이득을 적은 마찰로 얻을 수 있습니다.

치트 시트(경험칙)

통제 못 하는 모든 기기에서 동작해야 함 → JPG.

현대 사이트 히어로·목록 이미지(폴백 있음) → WebP, 또는 AVIF + WebP/JPG 백업.

웹 투명 → WebP 또는 PNG; 레거시 알파 호환이 넓은 건 PNG.

메일 본문 이미지 → 대부분 JPG.

고민되면 → WebP와 JPG를 나란히 내보내 이미지 압축에서 크기와 눈으로 허용하는 화질을 비교.

형식은 절반 — 크기와 품질도 중요

4000px 너비 사진을 WebP로 저장해도 리사이즈 안 하면 여전히 큽니다. 표시 너비로 축소한 뒤 형식을 고르세요.

형식과 크기가 맞으면 압축으로 마지막 몇 %를 줄일 수 있습니다. 손실 출력 작업 시 원본 마스터를 남겨 세대를 쌓지 마세요.