JPG vs PNG vs WebP, 언제 뭘 써야 할까?

이미지를 웹에 올릴 때 "어떤 포맷으로 저장해야 하나"는 생각보다 자주 마주치는 질문입니다. JPG, PNG, WebP는 겉으로는 비슷해 보여도 압축 방식과 지원 기능이 서로 다르고, 잘못 고르면 화질이 필요 이상으로 깨지거나 용량이 불필요하게 커질 수 있습니다. 이 글에서는 세 포맷의 핵심 차이를 기술적으로 정리하고, 실제로 어떤 상황에 어떤 포맷을 골라야 하는지 기준을 제시합니다.

세 포맷의 근본적인 차이

JPG — 손실 압축, 사진에 최적화

JPG(JPEG)는 사람 눈이 색상 변화보다 밝기 변화에 더 민감하다는 특성을 이용해, 시각적으로 덜 중요한 정보를 버리고 파일 크기를 줄이는 손실 압축 방식입니다. 색이 자연스럽게 이어지는 사진류 이미지에서 특히 효율이 좋습니다. 다만 압축 품질을 낮출수록 경계선 주변에 블록 형태의 노이즈(압축 아티팩트)가 생기고, 투명 배경을 지원하지 않습니다.

PNG — 무손실 압축, 선명한 경계에 강함

PNG는 원본 픽셀 정보를 그대로 보존하는 무손실 압축 포맷입니다. 로고, 아이콘, 텍스트가 포함된 스크린샷처럼 선이 또렷해야 하는 이미지에 적합하고, 알파 채널을 지원해 투명 배경 처리가 가능합니다. 다만 무손실이라는 특성 때문에, 사진처럼 색상이 복잡한 이미지에서는 JPG나 WebP보다 파일 용량이 훨씬 커지는 경향이 있습니다.

WebP — 구글이 만든 차세대 포맷, 양쪽 다 지원

WebP는 손실·무손실 압축을 모두 지원하는 포맷으로, 같은 화질 기준에서 JPG보다 작은 용량으로 압축할 수 있고 PNG처럼 투명 배경(알파 채널)도 지원합니다. 즉 사진에는 손실 모드로, 로고나 아이콘에는 무손실 모드로 상황에 맞게 쓸 수 있는 다목적 포맷입니다. 최신 브라우저 대부분이 지원하지만, 아주 오래된 프로그램이나 일부 이미지 편집 툴에서는 여전히 호환성 문제가 있을 수 있습니다.

기준	JPG	PNG	WebP
압축 방식	손실	무손실	손실·무손실 모두
투명 배경	미지원	지원	지원
사진 압축 효율	좋음	낮음(용량 큼)	가장 좋음
로고·아이콘 적합도	낮음	높음	높음
호환성	거의 모든 환경	거의 모든 환경	대부분 최신 환경

상황별 선택 기준

• 사진(인물, 풍경, 제품 촬영컷) — 웹 게재용이라면 WebP를 우선 고려하고, 호환성이 걱정된다면 JPG로 변환하세요. 둘 다 손실 압축이라 용량 절감 폭이 큽니다.
• 로고·아이콘·투명 배경이 필요한 그래픽 — PNG가 기본 선택지입니다. 다만 용량이 부담된다면 무손실 WebP도 대안이 될 수 있습니다.
• 텍스트가 포함된 스크린샷 — JPG는 텍스트 경계에 노이즈가 생기기 쉬우므로, PNG나 무손실 WebP를 권장합니다.
• 오래된 시스템·프로그램과 호환이 중요한 경우 — 가장 보편적으로 열리는 JPG(사진)·PNG(그래픽) 조합이 안전합니다.

"무손실"이라는 표현에 대한 정확한 이해

PNG나 WebP의 무손실 모드는 원본 픽셀 정보를 그대로 보존한다는 뜻으로, 압축 전후 이미지가 데이터상 동일합니다. 반면 JPG나 WebP의 손실 모드는 품질(quality) 값을 조절해 압축하는 방식이라, 엄밀히는 원본과 100% 동일하지 않습니다. 다만 대부분의 사진에서는 75~85% 품질 구간이면 육안으로 차이를 느끼기 어려운 수준입니다. "무손실"이라는 단어를 사진 압축 결과물에 사용하는 건 기술적으로 정확하지 않으므로, 이 차이를 알고 포맷을 고르는 것이 좋습니다.

결론적으로 정답은 하나가 아니라 "이미지의 종류"에 달려 있습니다. 사진이라면 WebP나 JPG, 투명 배경이나 선명한 그래픽이 필요하다면 PNG나 무손실 WebP를 고르면 됩니다.