JPG vs PNG vs WebP vs AVIF — 상황별로 어떤 포맷을 써야 할까

이미지 포맷을 고르는 기준은 결국 세 가지입니다. 어떤 내용인가(사진인지, 글자·선이 많은 그래픽인지), 투명 배경이 필요한가, 받는 쪽이 그 포맷을 열 수 있는가. 이 글은 네 가지 대표 포맷의 구조적 차이를 먼저 설명하고, 마지막에 상황별 선택표를 정리합니다. 브라우저 지원 수치는 기준일(2026-09-23)에 Can I use 데이터로 확인한 값입니다.

한눈에 보는 비교표

지원 비율은 Can I use가 집계한 전 세계 브라우저 사용 점유율 기준입니다. 오래된 브라우저나 사내 전용 뷰어까지 고려해야 하는 환경이라면 JPG·PNG가 여전히 가장 안전합니다.

JPG — 사진에 최적화된 30년 표준

JPG는 이미지를 8×8 픽셀 블록으로 나눈 뒤 이산 코사인 변환(DCT) 으로 주파수 성분으로 바꾸고, 사람 눈이 덜 민감한 고주파 성분을 거칠게 양자화해서 버리는 방식입니다. 색 정보도 밝기보다 해상도를 낮춰 저장하는 경우가 많습니다(크로마 서브샘플링). 그래서 하늘·피부처럼 색이 부드럽게 변하는 사진에서는 품질 80 안팎으로도 차이를 알아보기 어렵지만, 글자·선·단색 경계가 많은 이미지에서는 경계 주변에 번지는 얼룩(링잉, 블록 노이즈)이 보입니다.

• 장점: 거의 모든 기기·프로그램·업로드 창이 받아 줍니다. 품질 값으로 용량을 넓은 범위에서 조절할 수 있습니다.
• 한계: 투명도가 없고, 저장할 때마다 다시 손실이 쌓입니다. 편집 중간 파일로는 적합하지 않습니다.

PNG — 글자·로고·스크린샷의 기본값

PNG는 픽셀 값을 그대로 보존하는 무손실 포맷입니다. 행마다 이웃 픽셀과의 차이를 계산하는 필터를 적용한 뒤 Deflate(zip과 같은 계열)로 압축합니다. 같은 색이 넓게 이어지는 화면 캡처·도표·로고에서는 JPG보다 작고 선명하지만, 픽셀마다 값이 조금씩 다른 사진에서는 압축이 잘 되지 않아 JPG의 몇 배가 되기도 합니다.

2025년 6월 W3C가 발표한 PNG 3판은 애니메이션 PNG(APNG), HDR 색 정보, EXIF 청크를 표준에 정식으로 포함했습니다. 기존 PNG 파일과의 호환성은 그대로 유지됩니다.

WebP — JPG와 PNG를 한 포맷으로

WebP는 하나의 포맷 안에 손실 모드(VP8 영상 코덱 기반)와 무손실 모드를 모두 갖고 있고, 두 모드 모두 투명도와 애니메이션을 지원합니다. Google은 같은 SSIM 화질 지표에서 손실 WebP가 JPG보다 25~34% 작고, 무손실 WebP가 PNG보다 26% 작다고 발표했습니다. 이 수치는 Google 자체 시험 결과이므로, 실제 절감 폭은 이미지 내용과 인코더 설정에 따라 달라집니다.

WebP는 2024년 11월 IETF RFC 9649로 명세와 미디어 타입(image/webp)이 정식 등록되었습니다. Safari는 14 버전부터(macOS는 Big Sur 이상) 지원을 시작했으므로, 2020년 이전 애플 기기를 쓰는 사용자가 많다면 대체 이미지를 함께 준비하는 편이 안전합니다.

AVIF — 가장 작지만 인코딩이 느린 최신 포맷

AVIF는 로열티 없는 영상 코덱 AV1로 압축한 이미지를 HEIF 계열 컨테이너에 담은 포맷으로, Alliance for Open Media(AOMedia)가 2019년 2월 1.0.0 명세를 발표했습니다. 채널당 10·12비트 색과 HDR을 담을 수 있고, 같은 화질에서 WebP보다 더 작게 나오는 경우가 많습니다. 반면 인코딩 연산량이 커서 큰 사진을 여러 장 변환하면 시간이 오래 걸리고, MDN에 따르면 점진적(progressive) 표시를 지원하지 않습니다.

주요 브라우저 지원 시작 버전은 Chrome 85, Firefox 93, Safari 16.4(부분 지원 16.1), Edge 121입니다. Edge가 가장 늦게(2024년 초) 합류했기 때문에, 회사 PC의 Edge가 오래된 버전으로 고정돼 있다면 표시되지 않을 수 있습니다.

화질이 떨어질 때 보이는 모습도 다르다

같은 "저품질"이라도 포맷마다 화질이 무너지는 모양이 다릅니다. 결과를 확인할 때 어디를 봐야 하는지 알아 두면 품질 값을 정하기 쉽습니다.

• JPG: 8×8 블록 경계가 격자처럼 보이고, 글자·선 주변에 물결 같은 번짐(링잉)이 생깁니다. 하늘처럼 완만한 부분에서 띠 모양 계단이 나타납니다.
• WebP(손실): 블록 자국은 JPG보다 덜하지만, 세부가 뭉개지고 색이 번져 보입니다. 가는 빨간·파란 선이 특히 흐려집니다.
• AVIF: 낮은 품질에서도 블록 자국은 거의 없지만, 피부 결·잔디·머리카락 같은 질감이 매끈하게 지워져 "수채화"처럼 보일 수 있습니다.
• PNG: 무손실이므로 화질 저하가 없습니다. 대신 색 수를 줄여 용량을 낮추면 그라데이션에 띠가 생깁니다.

결과를 볼 때는 전체 화면보다 얼굴·글자·하늘을 100% 이상 확대해서 원본과 비교하는 것이 좋습니다.

JPEG XL과 HEIC는 어디쯤 있나

• JPEG XL: 기존 JPG를 무손실로 더 작게 다시 담을 수 있는 등 장점이 많은 차세대 포맷이지만, 기준일 현재 Can I use 기준으로 Safari 17 이상만 부분 지원하고 Chrome·Firefox는 기본 설정에서 표시하지 않습니다. 웹에 바로 쓰기는 아직 이릅니다.
• HEIC: 아이폰 사진의 기본 형식이지만 웹 브라우저 중에서는 Safari 17 이상만 표시합니다. 제출·공유 전에 JPG로 바꾸는 것이 일반적입니다(HEIC 가이드).

상황별 선택 흐름

1. 제출처(관공서·학교·쇼핑몰)가 허용 포맷을 정해 두었나요? → 그 목록을 따릅니다. 대부분 JPG입니다.
2. 투명 배경이 필요한가요? → 웹용이면 WebP, 편집·인쇄용이면 PNG.
3. 사진인가요, 그래픽인가요? → 사진은 JPG(호환성) 또는 WebP·AVIF(용량), 글자·선·도표는 PNG 또는 무손실 WebP.
4. 웹사이트에 올려 속도를 높이고 싶나요? → AVIF 또는 WebP를 쓰고, 오래된 브라우저를 위한 JPG를 함께 둡니다.

변환할 때 알아 둘 점

• 손실 → 손실 변환은 손실이 누적됩니다. JPG를 WebP로 바꾸면 JPG가 이미 버린 정보 위에 WebP의 손실이 더해집니다. 원본이 있다면 원본에서 한 번만 변환하세요.
• 투명 → 불투명 변환(PNG·WebP → JPG)에서는 투명한 부분을 흰색 같은 배경색으로 채워야 합니다.
• 색 깊이·HDR은 JPG로 바꾸는 순간 8비트로 줄어듭니다.
• 포맷을 바꾸는 것만으로 용량이 줄지 않을 때는 해상도를 함께 줄이는 것이 가장 효과가 큽니다. 원리는 사진 용량 줄이는 원리에서 자세히 설명합니다.

포맷 사이 변환은 이미지 포맷 변환 도구에서 브라우저 안에서만 처리할 수 있고, 각 포맷의 세부 사양은 포맷 사전에 정리해 두었습니다.

자주 묻는 질문

기준일: 2026-09-23

출처

• MDN — Image file type and format guide
• Google for Developers — An image format for the Web (WebP)
• ITU-T Recommendation T.81 (09/92) — JPEG 명세
• W3C — PNG Specification (Third Edition)
• AOMedia — AV1 Image File Format (AVIF)
• Can I use — WebP image format
• Can I use — AVIF image format
• Can I use — HEIF/HEIC image format
• Can I use — JPEG XL image format