PNG vs JPEG vs WebP: 어떤 이미지 형식을 써야 할까?

이미지 형식 선택은 대부분 두 가지 질문으로 정리됩니다. 이미지에 투명한 부분이 필요한가? 약간의 화질 손실이 눈에 보일까? 이 두 질문에 답하면 형식은 거의 저절로 정해집니다. 세 번째 질문, 즉 파일이 어디로 가는지는 새로운 형식을 아예 쓸 수 있는지를 결정합니다. 마켓플레이스와 많은 앱이 여전히 JPEG와 PNG만 받기 때문입니다.

이 가이드는 웹의 사진과 그래픽에서 가장 자주 만나는 네 가지 형식, JPEG, PNG, WebP, AVIF를 비교합니다. 마지막에는 사람들이 흔히 하는 작업별로 빠르게 고르는 법을 정리했습니다. 로고, 상품 사진, 일반 사진, 투명 배경 누끼입니다.

비교표

형식 정보는 MDN의 이미지 파일 형식 가이드에서 가져왔습니다. 브라우저에 대해서는 지원 행이 예전만큼 중요하지 않습니다. 현재 주요 브라우저는 모두 WebP를 표시하고, AVIF도 모든 브라우저의 최근 버전에서 지원됩니다. 여전히 중요한 곳은 그 밖의 모든 곳, 예를 들어 업로드 양식, 마켓플레이스, 이메일 프로그램, 오래된 데스크톱 소프트웨어입니다.

손실과 무손실, 쉽게 설명하면

무손실 압축은 픽셀 하나 바꾸지 않고 파일을 줄입니다. PNG를 디코딩하면 저장한 그대로가 돌아옵니다. 그래서 글자, 로고, 선화, 사용자 인터페이스, 스크린샷처럼 가장자리가 선명하고 색이 평평한 이미지에 이상적입니다. 이런 이미지에서는 작은 흐림이나 색 번짐도 쉽게 보입니다.

손실 압축은 눈이 알아차리기 어려운 디테일을 버립니다. 사진은 노이즈와 완만한 톤으로 가득해서 이를 잘 견딥니다. JPEG가 이 방식이며, 적절한 품질 설정이라면 눈에 보이는 변화 없이 사진을 PNG 크기의 일부로 줄일 수 있습니다.

여기서 실용적인 규칙 두 가지가 나옵니다.

• 손실 방식으로 저장할 때마다 조금씩 더 잃습니다. 무손실 원본(카메라 원본, PNG, 편집 프로그램 자체 파일)을 보관하고 거기서 손실 사본을 내보내세요. 같은 JPEG를 편집해서 다시 저장하지 마세요.
• 손실 압축은 선명한 가장자리에서 가장 나쁩니다. JPEG로 저장한 로고는 글자 주위에 지저분한 '모스키토 노이즈'가 생기고, 스크린샷은 글자가 흐려집니다.

투명도: 누끼를 결정하는 기능

JPEG에는 알파 채널이 없습니다. JPEG에는 '이 픽셀은 비쳐 보인다'는 정보를 저장할 방법이 없어서, 배경을 제거하고 JPEG로 저장하면 빈 영역이 단색, 보통 흰색이나 검은색으로 채워집니다. 누끼를 다른 콘텐츠 위에 올리고 싶다면 PNG, WebP, AVIF가 필요합니다.

PNG는 완전한 알파 채널을 저장합니다. 각 픽셀은 완전히 불투명한 것부터 완전히 투명한 것까지 어떤 값이든 가질 수 있고, 이것이 머리카락, 털, 그림자 같은 부드러운 가장자리를 자연스럽게 보이게 합니다. 팔레트의 한 색만 투명으로 표시하는 더 단순한 모드도 있는데, 평평한 그래픽에는 괜찮지만 사진에서는 가장자리가 들쭉날쭉해집니다. 자세한 내용은 알파 채널이란을 읽어 보세요.

WebP는 무손실과 손실 모드 모두에서 투명도를 지원합니다. Google의 WebP 문서에 따르면 무손실 WebP는 약 22%의 바이트만 더해 투명도를 추가하고, 투명도가 있는 손실 WebP는 같은 PNG보다 보통 약 3배 작습니다. 그래서 자체 웹사이트에 투명 상품 사진을 올릴 때 손실 WebP가 가장 효율적입니다.

파일 크기

같은 이미지라면 큰 것부터 대략 PNG, JPEG, WebP, AVIF 순입니다. 다만 큰 단서가 있습니다. PNG가 '큰' 것은 사진일 때뿐입니다. 색이 적은 평평한 그래픽이라면 PNG가 JPEG보다 작은 경우가 많고, 언제나 더 선명합니다.

Google이 공개한 WebP 수치는 좋은 기준이 됩니다.

• 무손실 WebP 파일은 PNG보다 26% 작습니다.
• 손실 WebP 파일은 같은 SSIM 품질 점수의 JPEG보다 25%에서 34% 작습니다.

웹의 래스터 이미지에 대한 MDN의 조언은 보통 PNG, JPEG, GIF보다 압축이 잘 되는 WebP나 AVIF를 우선하라는 것입니다. AVIF는 10비트와 12비트 색도 지원해서 부드러운 그라데이션에 도움이 됩니다. 약점은 브라우저 밖에서의 지원입니다. 많은 앱과 업로드 양식이 아직 받지 않습니다.

파일 크기가 가장 중요한 것은 많은 방문자에게 많은 이미지를 보낼 때입니다. 어차피 모든 이미지를 다시 압축하는 마켓플레이스에 한 장 올리는 경우라면, 아끼는 바이트보다 마켓플레이스가 받는 형식이 더 중요합니다.

형식별로 받아 주는 곳

브라우저는 쉬운 부분입니다. 형식이 거부되는 곳은 마켓플레이스와 앱입니다. 다음은 각 플랫폼의 자체 문서에 따른 지원 형식이며, 2026년 10월에 확인했습니다.

두 가지가 눈에 띕니다. 첫째, WebP와 AVIF는 Amazon, Walmart, Meta 카탈로그에서 받지 않으므로 마켓플레이스 업로드에는 JPEG나 PNG를 쓰세요. 둘째, Etsy는 투명 PNG를 지원하지 않으며 투명한 부분이 검게 보일 수 있다고 하므로, 업로드 전에 누끼를 색 위에 합치세요. 플랫폼별 정확한 픽셀 크기는 상품 사진 크기 정리를 참고하세요.

흔한 작업별 형식 선택

로고

벡터 원본이 있다면 SVG를 쓰세요. MDN은 로고와 아이콘에 SVG를 권장합니다. 래스터 파일이 필요하다면 투명 배경 PNG를, 자체 사이트라면 무손실 WebP를 쓰세요. JPEG는 절대 쓰지 마세요. 가장자리가 뿌옇게 되고 투명하게 만들 수도 없습니다.

상품 사진

마켓플레이스 메인 이미지에는 순백색 배경의 JPEG를 쓰세요. Amazon 판매자 블로그는 JPEG를 권장 형식이라고 하며, 위 표의 모든 마켓플레이스가 JPEG를 받습니다. 무손실 원본에서 높은 품질 설정(대부분의 도구에서 85에서 92 정도)으로 내보내세요.

자체 스토어에서는 고품질 JPEG나 PNG를 올리고 변환은 플랫폼에 맡기세요. 예를 들어 Shopify는 이미지 서비스가 각 방문자의 브라우저가 지원하는 가장 좋은 형식을 자동으로 제공한다고 말합니다.

일반 사진

공유와 업로드에는 JPEG가 무난한 기본값입니다. 직접 관리하는 웹사이트라면 JPEG를 대체 이미지로 둔 WebP나 AVIF로 같은 모습을 더 적은 바이트로 보여줄 수 있습니다. 휴대폰이 HEIC로 저장한다면 HEIC를 지원하지 않는 곳에 올리기 전에 JPEG로 변환하세요.

누끼와 투명 이미지

슬라이드, 문서, 디자인 도구, 대부분의 업로드 양식 등 어디서나 쓸 수 있어야 한다면 PNG를 쓰세요. 자체 웹페이지에 이미지를 올리면서 작게 만들고 싶다면 WebP를 쓰세요. JPEG는 마켓플레이스용 흰색처럼 의도적으로 배경을 단색으로 채운 경우에만 쓰세요.

스크린샷과 다이어그램

PNG 또는 무손실 WebP입니다. 손실 형식은 글자를 흐리게 합니다.

대체 이미지와 함께 최신 형식 제공하기

자체 사이트를 운영한다면 형식을 하나만 고를 필요가 없습니다. HTML의 picture 요소를 쓰면 브라우저가 이해하는 첫 번째 형식을 고릅니다.

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

AVIF를 지원하는 브라우저는 첫 번째 source를 쓰고, 다른 브라우저는 WebP로, 그보다 오래된 것은 PNG를 씁니다. 많은 호스팅 플랫폼과 이미지 CDN이 브라우저의 Accept 헤더를 보고 이 변환을 대신 해 주며, 모든 형식을 직접 만드는 것보다 간단한 경우가 많습니다.

예상 밖의 문제 없이 형식 변환하기

• PNG나 WebP에서 JPEG로: 투명한 부분이 합쳐집니다. 일부 도구는 기본값이 검은색이므로 도구에 맡기지 말고 채울 색(보통 흰색)을 직접 고르세요.
• JPEG에서 PNG로: 파일은 커지지만 더 좋아지지는 않습니다. JPEG에서 잃은 품질은 돌아오지 않습니다.
• 어떤 형식이든 WebP나 AVIF로: 투명도가 살아 있는지, 색이 제대로 보이는지 확인하세요. 웹에서 볼 이미지라면 먼저 sRGB 색상 프로필로 변환하세요.
• JPEG 다시 저장하기: 낮은 품질로 저장할 때마다 손실이 쌓입니다. 원본에서 한 번만 내보내세요.

누끼를 더 빠르게

배경을 대량으로 제거한다면, removebackground.dev는 누끼를 투명 PNG나 WebP, 또는 원하는 단색 배경의 JPG로 내보냅니다. 같은 업로드에서 마켓플레이스용 흰 배경 JPEG와 자체 사이트용 투명 PNG를 함께 만들 수 있습니다.