이미지 포맷 완벽 가이드 — PNG·WebP·AVIF·JPEG 언제 무엇을 써야 하나

웹사이트 성능을 가장 쉽게 올리는 방법 중 하나가 이미지 최적화입니다. 구글 PageSpeed Insights의 권장사항에서 "차세대 이미지 포맷 사용"이 자주 등장하는 이유가 있습니다. 이 글에서는 PNG, JPEG, WebP, AVIF 포맷의 차이점과 각각 언제 써야 하는지를 실용적인 관점에서 정리합니다.

4가지 이미지 포맷 핵심 비교

JPEG (Joint Photographic Experts Group)

출시 연도: 1992년. 가장 오래되고 범용적인 손실 압축 포맷입니다. 사진 이미지에 강하고 파일 크기가 작지만, 투명도를 지원하지 않으며 압축률을 높이면 품질이 눈에 띄게 저하됩니다. 텍스트나 선명한 경계선이 있는 이미지에는 부적합합니다.

적합한 사용 사례: 일반 사진, 배경 이미지, 소셜 미디어 썸네일

PNG (Portable Network Graphics)

출시 연도: 1996년. 무손실 압축 포맷으로 투명도(알파 채널)를 지원합니다. 텍스트, 로고, 아이콘처럼 선명한 경계선이 필요한 이미지에 최적화되어 있습니다. 단점은 JPEG 대비 파일 크기가 크다는 것입니다.

적합한 사용 사례: 로고, 아이콘, UI 요소, 배경 제거 이미지, 스크린샷

WebP

출시 연도: 2010년 (Google 개발). 손실 및 무손실 압축 모두 지원하며 투명도도 지원합니다. JPEG 대비 약 25~35%, PNG 대비 약 26% 더 작은 파일 크기로 동일한 품질을 제공합니다. 2023년 기준 글로벌 브라우저 지원율 97% 이상으로 현실적인 최선의 선택입니다.

적합한 사용 사례: 웹사이트의 모든 이미지 (특히 성능 최적화가 중요한 경우)

AVIF (AV1 Image File Format)

출시 연도: 2019년. 현존하는 이미지 포맷 중 압축 효율이 가장 높습니다. JPEG 대비 최대 50%, WebP 대비 최대 20% 더 작은 파일로 동일 품질을 구현합니다. 단점은 인코딩 시간이 길고, 구형 브라우저 지원이 아직 완전하지 않습니다.

적합한 사용 사례: 성능 최우선 사이트, Next.js Image 컴포넌트 (자동 AVIF 변환 지원)

파일 크기 실전 비교 (동일 이미지 기준)

동일한 사진 이미지를 각 포맷으로 저장했을 때의 파일 크기 차이입니다.

• JPEG (품질 85%): 100KB 기준
• PNG (무손실): 약 250KB (+150%)
• WebP (손실): 약 70KB (-30%)
• AVIF (손실): 약 50KB (-50%)

실제 웹사이트에서 JPEG를 WebP로 전환하면 평균 페이지 용량이 20~30% 줄어들고, 이는 LCP(Largest Contentful Paint) 점수를 직접적으로 개선합니다.

무료 이미지 포맷 변환 방법

웹 브라우저에서 바로 사용할 수 있는 무료 변환 도구들이 있습니다. MillionsCode의 이미지 변환 도구는 설치 없이 PNG, JPEG, WebP 간 변환이 가능합니다. 모든 처리는 브라우저 내에서 이루어지므로 이미지가 서버에 업로드되지 않아 보안상 안전합니다.

웹 개발에서의 실전 적용법

Next.js 프로젝트

Next.js의 Image 컴포넌트는 자동으로 AVIF, WebP 변환을 처리합니다. next/image를 사용하면 별도 설정 없이 브라우저 지원 여부에 따라 최적 포맷을 자동 제공합니다.

HTML에서 태그 활용

AVIF와 WebP를 지원하지 않는 구형 브라우저를 위한 폴백을 설정하려면 태그를 사용하세요. AVIF를 먼저 시도하고, 미지원 시 WebP, 최종적으로 JPEG를 제공하는 방식입니다.

Cloudflare Polish

Cloudflare 무료 플랜에서도 Polish 기능을 사용하면 WebP 자동 변환이 가능합니다. CDN 레벨에서 이미지를 최적화하므로 코드 수정 없이 전체 사이트의 이미지를 개선할 수 있습니다.

자주 묻는 질문

모든 이미지를 WebP로 바꿔야 하나요? 웹사이트용 이미지라면 WebP로 전환하는 것을 강력히 권장합니다. 브라우저 지원율이 97% 이상이므로 호환성 문제는 거의 없습니다.

AVIF가 WebP보다 좋다면 바로 AVIF를 써야 하나요? 성능이 최우선이라면 AVIF를 사용하되, 태그로 WebP 폴백을 반드시 설정하세요. 2026년 기준 Safari 구형 버전에서 AVIF를 지원하지 않는 경우가 있습니다.

이미지를 변환하면 품질이 떨어지나요? 무손실 변환(PNG→WebP 무손실)은 품질 손실이 없습니다. 손실 압축 시에도 품질 80~90% 설정이면 육안으로 차이를 구분하기 어렵습니다.