JPG vs PNG vs WebP: 어떤 포맷을 선택해야 할까?

세 가지 포맷. 세 가지 다른 강점. 그리고 프로젝트에 어떤 걸 써야 할지 모르겠다.

JPG는 1990년대부터 사진 표준이었습니다. PNG는 투명도와 무손실 품질을 처리합니다. WebP는 두 가지의 장점을 결합하면서 더 가볍습니다. 하지만 각각 적합한 상황이 있습니다.

이 가이드에서는 이미지의 실제 용도에 따라 어떤 포맷을 사용해야 하는지 정확히 알려드립니다.

JPG, PNG, WebP의 주요 차이점은?

빠른 비교표입니다:

특성	JPG	PNG	WebP
압축 유형	손실만	무손실만	손실 및 무손실
투명도	없음	있음	있음
애니메이션	없음	없음 (APNG가 있지만 드묾)	있음
색상 깊이	1670만 색	1670만 색 + 알파	1670만 색 + 알파
최적 용도	사진	그래픽, 스크린샷	웹 배포
파일 크기 (사진)	작음	매우 큼	가장 작음
파일 크기 (그래픽)	중간	작음~중간	가장 작음
브라우저 지원	100%	100%	97% 이상
이메일 지원	우수	우수	나쁨
인쇄 지원	우수	양호	나쁨

간단히 말하면: JPG는 사진 압축을 잘 하지만 투명도는 안 됩니다. PNG는 투명도와 무손실 품질을 제공하지만 사진에서는 파일이 커집니다. WebP는 모든 걸 하면서 가장 작은 파일을 만듭니다. 하지만 모든 곳에서 작동하지는 않습니다.

JPG는 언제 사용해야 할까?

어디서나 작동하는 사진이 필요할 때 JPG가 올바른 선택입니다.

이메일용 사진. 이메일로 이미지를 보내나요? JPG를 쓰세요. 모든 이메일 클라이언트가 JPG를 올바르게 표시합니다. WebP 지원은 불안정합니다. PNG는 작동하지만 파일이 너무 큽니다.

인쇄용 사진. 인쇄소는 JPG(또는 TIFF)를 기대합니다. WebP를 보내지 마세요. 열지 못할 수도 있습니다.

카메라 사진 저장. 당신의 폰은 JPG로 찍습니다. 카메라도 JPG로 찍습니다. 일반적인 사진 저장과 공유에는 JPG가 범용 포맷입니다.

소셜 미디어 게시물. Instagram이나 Facebook 같은 플랫폼은 여러 포맷을 받습니다. 하지만 JPG가 수년간 표준이었습니다. 결과가 예측 가능하고 일관적입니다.

파일 크기가 중요하고 투명도가 필요 없을 때. 85% 품질의 JPG는 멋진 사진을 PNG 파일 크기의 몇 분의 일로 제공합니다.

JPG를 피해야 할 경우: 로고, 아이콘, 텍스트가 많은 이미지, 스크린샷, 투명도가 필요한 모든 것, 반복 편집할 이미지 (저장할 때마다 품질이 떨어짐).

PNG는 언제 사용해야 할까?

품질과 투명도가 파일 크기보다 중요할 때 PNG가 올바른 선택입니다.

투명 배경 이미지. 제품 컷아웃, 로고, 아이콘, 스티커, 워터마크. 어떤 색상 위에든 떠 있어야 하는 이미지라면 PNG가 투명도를 완벽하게 처리합니다.

스크린샷. 스크린샷의 텍스트는 PNG에서 선명하게 유지됩니다. JPG는 텍스트를 흐리게 하고 글자 주변에 못생긴 번짐을 만듭니다. 튜토리얼, 문서, 버그 리포트에는 항상 PNG를 사용하세요.

로고와 아이콘. 날카로운 가장자리, 단색, 깔끔한 선. PNG는 이런 것에 뛰어납니다. PNG로 된 로고는 픽셀 단위로 완벽합니다. 같은 로고를 JPG로 만들면 가장자리가 흐릿하고 색이 번집니다.

텍스트가 있는 그래픽. 인포그래픽, 다이어그램, 차트, 읽을 수 있는 텍스트가 포함된 모든 이미지. PNG는 텍스트를 선명하게 유지합니다. JPG는 흐리게 만듭니다.

편집용 소스 파일. PNG는 무손실입니다. 100번 저장해도 아무것도 변하지 않습니다. 이미지를 편집할 때는 PNG를 작업 포맷으로 사용하세요. 완료되면 JPG나 WebP로 내보내세요.

파비콘과 앱 아이콘. 웹 파비콘과 모바일 앱 아이콘의 표준은 PNG입니다. 브라우저와 운영체제가 이를 기대합니다.

PNG를 피해야 할 경우: 웹사이트의 사진 (너무 큼), 대량의 웹 이미지, 다운로드 속도가 중요한 상황.

WebP는 언제 사용해야 할까?

WebP는 웹사이트의 거의 모든 이미지에 올바른 선택입니다.

모든 웹사이트 이미지. 사진, 그래픽, 아이콘, 배경. WebP는 모든 유형의 이미지를 처리하며 JPG와 PNG보다 작은 파일을 만듭니다.

웹용 투명 이미지. WebP는 PNG의 투명도를 30-70% 더 작은 파일 크기로 제공합니다. 투명 배경의 제품 사진이 완벽한 사용 사례입니다.

썸네일과 이미지 갤러리. 작은 이미지가 상대적으로 가장 큰 절약 효과를 봅니다. 50 KB JPG 썸네일이 WebP로 30 KB가 됩니다. 100개의 썸네일 갤러리에서 2 MB가 절약됩니다.

Progressive Web Apps. 오프라인에서 작동하는 앱은 작은 파일이 필요합니다. WebP는 캐시 크기를 관리 가능하게 유지합니다.

손실과 무손실 옵션이 모두 필요할 때. WebP는 두 가지 모드를 지원합니다. 사진에는 손실, 그래픽에는 무손실을 사용하세요. 하나의 포맷, 두 가지 모드.

WebP를 피해야 할 경우: 이메일 첨부파일, 인쇄물, 오래된 소프트웨어를 사용하는 사람과 공유하는 파일, 범용 호환성이 필수인 아카이브 저장.

파일 크기는 실제로 어떻게 비교될까?

같은 이미지를 각 포맷으로 저장한 실제 수치입니다:

이미지 내용	JPG (85%)	PNG	WebP (85%)
사진 4000x3000	1.5 MB	15 MB	1.0 MB
사진 1920x1080	500 KB	5 MB	340 KB
스크린샷 1920x1080	250 KB	400 KB	150 KB
로고 500x200	35 KB	25 KB	15 KB
아이콘 64x64	5 KB	3 KB	2 KB
인포그래픽 800x2000	200 KB	350 KB	130 KB

사진의 경우, PNG는 터무니없이 큽니다. JPG보다 10배, WebP보다 15배 큽니다. 웹에서 사진에 PNG를 절대 사용하지 마세요.

단색 그래픽 (로고, 아이콘)의 경우 PNG는 합리적입니다. 하지만 WebP가 여전히 30-40% 더 작습니다.

WebP가 모든 행에서 이깁니다. 모든 이미지 유형에서 가장 작은 포맷입니다. 유일한 단점은 호환성입니다. 웹사이트에 가장 좋은 포맷에 대한 전체 추천은 전용 가이드를 참조하세요.

하나의 웹사이트에서 세 가지 포맷을 모두 사용할 수 있을까?

네, 많은 사이트가 그렇게 합니다. 실용적인 방법은 다음과 같습니다:

WebP를 지원하는 브라우저에는 WebP를 제공하세요. 방문자의 97%입니다. 가장 작고 빠른 이미지를 받게 됩니다.

나머지 3%에게는 사진의 폴백으로 JPG를, 투명 이미지에는 PNG를 사용하세요. HTML에서 <picture> 요소를 사용하면 됩니다.

파비콘에는 PNG를 사용하세요. 브라우저가 PNG 포맷을 기대하는 특수 파일도 마찬가지입니다.

프로젝트 파일에는 원본을 JPG나 PNG로 유지하세요. 빌드 과정에서 WebP 버전을 생성하거나 자동 변환하는 CDN을 사용하세요.

더 나아가고 싶다면 AVIF를 추가해 보세요. AVIF 포맷 비교에서 WebP와의 차이를 확인할 수 있습니다.

어떤 포맷을 언제 사용해야 하는지 알고 싶다면 이미지 포맷 비교 가이드를 읽어보세요.

이 포맷들 사이에서 어떻게 변환할까?

ConvertIMG는 세 가지 포맷 모두와 그 이상을 처리합니다. 웹 배포를 위해 JPG를 WebP로 변환하세요. PNG를 WebP로 변환해서 더 작은 투명 이미지를 만드세요. 이메일 호환을 위해 WebP를 JPG로 변환하세요. 이미지를 압축해서 파일 크기를 더 줄일 수도 있습니다. 파일을 올리고, 포맷을 고르고, 다운로드하세요. 무료이고, 비공개이며, 모두 브라우저에서 작동합니다.