JPG, PNG, WebP: 어떤 형식을 써야 할까요?

한 줄로 정리하면 사진은 JPG나 WebP, 그래픽과 투명도는 PNG나 WebP입니다. WebP로 바꾸기 전에 업로드할 곳이 WebP를 받는지 확인하세요.

JPG(JPEG라고도 씁니다)는 눈이 거의 알아채지 못하는 미세한 디테일을 버려서 사진을 작게 저장합니다. 거의 모든 웹사이트, 앱, 이메일 서비스, 마켓플레이스가 JPG를 받기 때문에 확신이 서지 않을 때 가장 안전한 선택입니다.

약점은 선명한 가장자리와 단색 영역입니다. 텍스트, 선화, 스크린샷에는 가장자리에 뿌연 번짐이 생기고, JPG는 투명도를 지원하지 않습니다. JPG는 편집해서 다시 저장할 때마다 조금씩 더 손상되므로, 원본을 보관해 두고 원본에서 내보내세요.

형식을 바꾸지 않고 JPG를 더 작게 만들려면 이미지 압축 도구를, WebP를 시험해 보려면 JPG를 WebP로를 이용하세요.

PNG는 무손실 형식이라 모든 픽셀을 원래 그대로 보존합니다. 그래서 로고, 아이콘, 인터페이스 스크린샷, 텍스트가 들어간 이미지에 알맞고, 부드러운 가장자리와 그림자까지 포함한 완전한 투명도를 지원합니다.

대신 용량이 큽니다. 사진을 PNG로 저장하면 보통 잘 만든 JPG보다 몇 배 커집니다. HTTP Archive의 2024 Web Almanac에 따르면 웹에 있는 PNG의 중앙값은 픽셀당 3.8비트로, JPG는 2.0비트, WebP는 1.3비트였습니다.

PNG에 담긴 것이 사진이라면 형식을 바꾸세요. 그래픽이라면 PNG 그대로 압축하거나, 투명도가 유지되는 PNG를 WebP로를 시험해 보세요.

WebP는 Google이 웹을 위해 만든 형식으로, 두 가지 방식을 모두 지원합니다. JPG처럼 손실 압축할 수도, PNG처럼 무손실 압축할 수도 있고, 어느 쪽이든 투명도를 쓸 수 있습니다. Google에 따르면 무손실 WebP 파일은 PNG보다 26% 작고, 손실 WebP 파일은 비슷한 품질의 JPG보다 25–34% 작습니다.

현재 주요 브라우저는 모두 WebP를 표시합니다. 사용 중인 브라우저의 약 97%에 해당하며, Safari도 14 버전부터 지원합니다. 문제는 브라우저 밖에 있습니다. 일부 플랫폼은 아직 WebP 업로드를 받지 않습니다. 예를 들어 Amazon, Etsy, Mailchimp는 JPG와 PNG만 안내하고 WebP는 목록에 없습니다.

변환한다고 늘 이득인 것도 아닙니다. 단순한 로고나 색이 적은 스크린샷은 PNG가 더 작을 수 있습니다. 변환한 뒤 두 파일을 비교해 더 작은 쪽을 쓰세요.

1. 01이미지에 투명도가 필요한가요? PNG를 쓰거나, 받아 주는 곳이라면 WebP를 쓰세요.
2. 02사진이나 사실적인 그림인가요? JPG를 쓰거나, 내 웹사이트라면 WebP를 쓰세요.
3. 03스크린샷, 차트, 로고, 텍스트인가요? PNG를 쓰고, WebP도 시험해 본 뒤 두 파일을 비교하세요.
4. 04어디에 업로드하나요? 플랫폼이 그 형식을 받는지 확인하고, 받지 않으면 JPG나 PNG를 그대로 쓰세요.
5. 05형식이 무엇이든 최종 파일은 압축하세요.

플랫폼별 크기와 제한은 이메일과 온라인 쇼핑몰의 이미지 크기 요구 사항을 참고하세요.

AVIF는 더 새로운 형식으로 파일을 더 작게 만들 수 있지만, 만드는 데 시간이 더 걸리고 지원하는 도구와 플랫폼도 적습니다. 웹에서는 아직 드뭅니다. 2025 Web Almanac에서 LCP 이미지 가운데 AVIF는 0.7%에 그쳤고, WebP는 11%, PNG는 26%, JPG는 57%였습니다. 오늘날 대부분의 사이트에서는 JPG, PNG, WebP로 충분합니다.

• 화질을 위해 사진을 PNG로 저장하기. PNG는 이미 있는 디테일을 지킬 뿐 새로 더해 주지는 못하고, 파일만 몇 배로 커집니다.
• 흐릿한 가장자리를 고치려고 JPG를 PNG로 변환하기. 손상은 이미 JPG에 생겼으니, 대신 원본으로 돌아가세요.
• 확인하지 않고 모두 WebP로 바꾸기. 내 웹사이트에서는 문제없어도 쇼핑몰 플랫폼이나 이메일 도구에서는 거부될 수 있습니다.
• 형식만 정하고 끝내기. 형식은 출발점일 뿐이고, 나머지는 최종 파일을 압축해야 완성됩니다.

다음 글: 웹사이트 이미지 압축 방법을 단계별로 알아보세요.