사진을 널리 주고받으려면 JPG, 투명 배경이나 작은 글자를 보존하려면 PNG, 웹 게시용 용량을 줄이려면 WebP를 먼저 비교한다. WebP도 손실·무손실을 선택할 수 있으므로 확장자만으로 화질을 판단하면 안 된다.
| 형식 | 투명 배경 | 먼저 검토할 용도 |
|---|---|---|
| JPG | 일반 JPEG는 지원하지 않음 | 사진 공유·호환성 우선 |
| PNG | 지원 | 투명 로고·글자 많은 캡처 |
| WebP | 손실·무손실 모두 지원 | 지원 환경이 확인된 웹 이미지 |
용량은 같은 픽셀 크기와 비슷한 품질로 내보낸 파일끼리 비교한다. WebP가 항상 가장 작은 것은 아니다. 배경화면이나 외부 프로그램에 쓸 파일이라면 해당 환경의 형식 지원부터 확인하고, 확장자 이름만 JPG로 바꾸지 말고 실제 변환한다.
같은 원본을 직접 변환해 보니
글자·선·그라데이션을 넣은 화면과 반투명 카드, 두 가지 이미지를 직접 만들고 각각 JPG·PNG·WebP로 변환했다. 글자 화면에서는 PNG 83,491바이트, 무손실 WebP 34,838바이트였다. 두 파일을 다시 열어 비교한 픽셀은 원본과 모두 같았다. 이 예시에서는 글자와 선의 픽셀을 바꾸지 않고도 WebP로 용량을 줄일 수 있었다.
아래 수치는 2026년 9월 14일 같은 1200×800픽셀 원본으로 측정했다. 촬영 사진이 아닌 합성 예시 두 장이므로 모든 사진·로고에 적용되는 절감률은 아니다. JPG와 손실 WebP의 품질 85도 같은 체감 화질을 뜻하지 않는다.
| 저장 형식 | 글자·그라데이션 | 반투명 카드 | 카드의 배경 |
|---|---|---|---|
| PNG | 83,491바이트 | 232,197바이트 | 투명 유지 |
| JPG · 품질 85 | 82,880바이트 | 34,757바이트 | 흰 배경으로 합성 |
| WebP · 손실 품질 85 | 27,666바이트 | 22,954바이트 | 투명 유지 |
| WebP · 무손실 | 34,838바이트 | 86,064바이트 | 투명 유지 |
반투명 카드의 JPG는 흰 배경에 합성해서 저장했다. 파일이 작더라도 투명이 필요한 작업에서는 같은 결과물이 아니다. PNG와 무손실 WebP는 두 예시 모두 원본의 RGBA 픽셀이 일치했고, 손실 WebP는 투명도를 유지했지만 원본 픽셀과는 차이가 있었다.
변환 조건과 직접 확인하는 방법
Pillow 11.3.0, libwebp 1.5.0을 사용했다. PNG는 optimize=True, JPG는 quality=85·subsampling=0·optimize=True, 손실 WebP는 quality=85·method=6, 무손실 WebP는 lossless=True·method=6·exact=True로 저장했다. JPG는 흰 배경 합성 후 RGB로 저장했다. 파일 용량은 저장된 파일의 실제 바이트 수다.
원본 PNG와 결과 파일을 같은 프로그램에서 100% 크기로 열어 글자와 얇은 선을 비교한다. 투명 카드 파일은 밝은 배경과 어두운 배경 위에 올려 본다. 압축 시간과 모든 프로그램의 호환성은 이번 시험에서 측정하지 않았다. 원본 PNG를 기준으로 재현할 수 있으며, 포함한 HTML을 다시 렌더링하면 운영체제 폰트에 따라 픽셀이 달라질 수 있다. 옵션 의미는 Pillow 형식별 저장 안내에서 확인할 수 있다.
이미지 형식은 확장자만 보고 고르기 어렵다. 사진인지, 글자와 선이 많은 화면 캡처인지, 투명 배경이 필요한지에 따라 압축 효율과 보존해야 할 정보가 달라진다.
여러 환경에서 일반 사진을 공유할 때는 JPG가 무난하다. 글자·도형의 경계나 투명 배경을 보존해야 하면 PNG가 적합하고, 웹 전송량을 줄이면서 사진과 투명 이미지를 처리하려면 WebP를 검토할 수 있다. 다만 WebP가 언제나 가장 작거나 PNG가 늘 가장 선명한 것은 아니다. 인코더와 품질 설정, 이미지 내용, 재편집 여부, 받는 쪽의 프로그램까지 함께 따져야 한다.
JPG·PNG·WebP의 핵심 차이
JPG와 JPEG는 서로 다른 이미지 형식이 아니다. 둘 다 JPEG 계열 이미지를 가리키는 파일 확장자이며, 웹에서는 주로 image/jpeg 미디어 유형으로 처리한다. MDN 이미지 형식 안내도 .jpg와 .jpeg를 같은 JPEG 항목에 둔다. 세 글자인 JPG는 과거 일부 운영체제의 파일명 제한으로 널리 쓰였지만, 확장자 길이가 이미지 품질을 바꾸지는 않는다.
JPEG는 손실 압축 형식이다. 사람이 비교적 덜 민감하게 느끼는 색과 밝기 정보를 줄여 파일을 작게 만들므로, 색조가 연속적으로 변하는 사진에 효율적이다. 반면 글자 테두리, 아이콘, 얇은 선, 단색 경계처럼 변화가 급격한 부분에는 번짐이나 블록 형태의 압축 흔적이 나타나기 쉽다. 디코딩한 JPEG를 다시 JPEG로 저장하는 일을 반복하면 손실이 누적될 수 있다. 일반적인 JPEG는 알파 채널을 지원하지 않아, 투명 로고나 누끼 이미지의 투명 영역은 특정 배경색과 합쳐진다.
PNG는 압축 뒤에도 원래 이미지 표본을 정확히 복원할 수 있는 무손실 형식이다. W3C PNG 제3판 사양은 PNG를 정적·애니메이션 래스터 이미지의 무손실 저장 형식으로 정의하고, 그레이스케일·트루컬러·인덱스 색상과 선택적 알파 채널을 규정한다. 이 문서는 2025년 6월 24일 W3C Recommendation으로 공개됐다.
PNG의 알파 정보는 완전한 투명뿐 아니라 단계별 불투명도도 표현한다. 반투명 그림자와 부드러운 가장자리를 합성할 때 유용한 이유다. 같은 색이 반복되고 경계가 뚜렷한 화면 캡처, 도표, UI 부품에도 잘 맞는다. 다만 수많은 색과 미세한 질감이 섞인 사진은 PNG로 저장할 때 손실 JPG보다 파일이 크게 늘 수 있다. 무손실은 품질이 더 낫다는 뜻이 아니라, 압축한 데이터를 원래대로 복원할 수 있다는 뜻이다.
WebP는 손실·무손실 압축을 모두 지원하며 투명도와 애니메이션도 담을 수 있다. Google의 WebP 개요에 따르면 손실 WebP는 이웃 블록을 바탕으로 값을 예측하고 차이를 부호화한다. 무손실 WebP는 앞서 나타난 이미지 조각과 로컬 팔레트 등을 이용해 픽셀을 정확히 복원한다. 손실 모드에서도 알파 투명도를 함께 쓸 수 있다.
Google은 자사 비교 연구에서 무손실 WebP가 PNG보다 평균 26%, 손실 WebP가 비슷한 SSIM 품질의 JPEG보다 평균 25~34% 작았다고 설명한다. 이 수치는 모든 파일에 적용되는 보장이 아니다. 특정 데이터 세트와 인코더, 품질 지표를 쓴 평균 결과이므로, 실제 작업에서는 같은 픽셀 크기로 내보낸 뒤 용량과 육안 품질을 함께 비교해야 한다.
사진·로고·스크린샷에 맞는 형식
인물·풍경·음식 사진은 JPG 또는 손실 WebP
휴대전화 사진, 여행 풍경, 음식 사진처럼 색과 명암이 연속적으로 바뀌는 이미지는 JPG와 손실 WebP에 잘 맞는다. 메신저 첨부, 문서 삽입, 인쇄 업체 전달처럼 수신 환경을 정확히 알 수 없다면 JPG가 안전한 선택이다. 주요 브라우저뿐 아니라 오래된 편집 프로그램과 여러 업무 시스템에서 다뤄 온 기간이 길기 때문이다.
직접 관리하는 웹사이트에 올릴 사진이라면 손실 WebP를 시험해 볼 만하다. 같은 픽셀 크기에서 육안 품질을 비슷하게 맞추면 JPG보다 전송량을 줄일 가능성이 있다. 확장자만 바꿔서는 안 된다. photo.jpg의 이름을 photo.webp로 고쳐도 내부 데이터는 JPEG로 남으므로, 변환 도구나 인코더로 실제 변환해야 한다.
보관 원본과 웹 게시본은 분리하는 편이 좋다. 카메라 원본이나 고품질 편집본을 남기고, 웹에는 표시 영역에 맞게 축소한 JPG 또는 WebP 사본을 올린다. 이미 강하게 압축한 JPG를 무손실 WebP로 옮겨도 사라진 디테일은 돌아오지 않는다. WebP 공식 FAQ도 손실 원본을 무손실 WebP로 변환하면 원본의 손실 특성까지 보존하느라 결과 파일이 더 커질 수 있다고 설명한다.
투명 로고·아이콘·화면 캡처는 PNG 또는 무손실 WebP
투명한 회사 로고, 배경을 제거한 상품, 버튼과 아이콘처럼 다른 배경 위에 겹칠 이미지는 일반 JPEG를 피하는 편이 좋다. PNG와 WebP는 픽셀별 투명도를 담을 수 있어 곡선 가장자리와 반투명 그림자를 자연스럽게 합성한다. 여러 사람과 원본을 주고받거나 다양한 편집 프로그램에서 다시 작업할 파일이라면 PNG가 편리하다. 웹에 표시할 최종 사본이라면 PNG와 무손실 WebP를 모두 만들어 실제 용량을 비교할 수 있다.
문서나 프로그램 화면을 캡처한 이미지도 대체로 PNG가 안전하다. 작은 글자와 얇은 선 주변에 손실 압축 흔적이 생기면 용량을 줄인 대가로 가독성을 잃을 수 있다. 게임 화면이나 영상 장면처럼 사진에 가까운 복잡한 캡처는 PNG 용량이 크게 늘 수 있다. 이때는 충분한 품질의 손실 WebP를 고려하고, 외부 프로그램 호환성이 더 중요하면 품질을 높인 JPG를 쓸 수 있다.
단순한 도형과 제한된 색으로 이뤄진 로고는 PNG나 WebP보다 SVG 같은 벡터 형식이 더 적절할 때도 있다. 벡터 원본이 없다면 PNG 또는 무손실 WebP를 사용하되, 작은 JPG 로고를 PNG로 바꾼다고 흐린 테두리가 원래대로 복구되지는 않는다. 형식 변환은 남아 있는 픽셀을 새 형식에 기록하는 작업이지, 잃어버린 정보를 되살리는 작업은 아니다.
웹사이트에서 WebP를 사용할 때 확인할 점
WebP는 Chrome, Safari, Firefox, Edge, Opera 등 주요 브라우저에서 기본 지원돼 일반적인 공개 웹사이트에서 실용적으로 쓸 수 있다. 그러나 브라우저 지원과 파일 작업 호환성은 별개다. 방문자가 이미지를 내려받아 오래된 사내 프로그램, 인쇄 시스템, 편집 도구에 넣어야 한다면 JPG나 PNG가 더 편할 수 있다. 외부 쇼핑몰이나 이미지 업로드 서비스가 WebP를 받는지도 별도로 확인해야 한다.
페이지 속도를 개선하려면 형식을 바꾸기 전에 픽셀 크기부터 맞춰야 한다. 본문에서 가로 800픽셀로 보이는 사진에 4000픽셀 원본을 그대로 쓰면 WebP로 변환해도 불필요한 데이터가 남는다. 최대 표시 크기와 고밀도 화면 대응 범위를 먼저 정하고 그에 맞춰 리사이즈한 뒤, JPG와 WebP의 용량 및 화질을 비교하는 순서가 합리적이다.
프로그램에 표시되는 품질 숫자도 형식 사이에서 직접 대응하지 않는다. JPG 품질 80과 WebP 품질 80이 같은 알고리즘이나 수학적으로 동일한 화질을 뜻하지는 않는다. 실제 표시 크기에서 피부, 머리카락, 글자 테두리, 색상 그라데이션처럼 손상이 눈에 띄기 쉬운 부분을 직접 비교해야 한다.
호환 범위를 세밀하게 관리하려면 HTML의 <picture> 요소로 WebP와 대체 이미지를 함께 제공할 수 있다. MDN의 picture 요소 안내는 브라우저가 지원 가능한 이미지 형식을 선택하도록 하는 용도를 설명한다.
<picture>
<source srcset="product.webp" type="image/webp">
<img src="product.jpg" alt="흰 배경 위의 제품 정면 사진" width="800" height="600">
</picture>최신 브라우저 사용자가 대부분인 사이트라면 모든 이미지에 대체 파일이 필요하지 않을 수 있다. 반대로 다운로드용 원본을 제공하는 페이지라면, 화면 표시본을 WebP로 최적화하더라도 JPG 또는 PNG 다운로드 파일을 별도로 두는 편이 이용자에게 편리하다.
변환과 최종 점검에서 놓치기 쉬운 부분
손실 형식으로의 변환은 가능한 한 원본에서 한 번만 하는 편이 좋다. 편집 중간 파일을 계속 JPG로 저장하면 재인코딩 때마다 손실이 더해질 수 있다. PNG, TIFF, 편집 프로그램의 프로젝트 파일 또는 카메라 원본처럼 배포본과 분리된 작업 원본을 보관하고, 마지막 단계에서 JPG나 손실 WebP를 만든다. 이미 받은 JPG를 잘라 다시 저장해야 한다면 재저장 횟수를 줄이고 결과를 실제 크기에서 확인한다.
투명 이미지를 WebP로 변환할 때는 파일 형식 이름뿐 아니라 알파 채널 유지 설정도 점검해야 한다. WebP 컨테이너 사양에 따르면 손실 VP8 이미지와 별도의 알파 비트스트림을 함께 담을 수 있으며, 알파 데이터는 WebP 무손실 방식으로 압축할 수 있다. 무손실 VP8L 이미지에서는 투명도가 이미지 데이터 자체에 포함된다. 변환 도구에서 알파 제거 또는 배경 합성을 선택하면 결과는 불투명해진다.
변환 뒤에는 편집기의 체크무늬 배경만 보지 말고 밝은 배경과 어두운 배경 위에도 이미지를 올려 보는 편이 좋다. 누끼 가장자리에 흰 테두리나 어두운 번짐이 생기지 않았는지, 반투명 그림자가 끊기지 않았는지 확인한다. 완전히 투명한 픽셀의 RGB 값을 그대로 보존해야 하는 특수 작업이라면 도구의 exact 옵션도 살펴야 한다. 일반 표시에서는 보이지 않아도 후속 편집이나 일부 처리 과정에서는 차이가 생길 수 있다.
색상이 중요한 상품 사진은 색 프로필과 메타데이터 처리도 확인해야 한다. WebP 컨테이너는 ICC 프로필, EXIF, XMP를 담을 수 있지만 모든 변환 도구가 이를 자동으로 복사하는 것은 아니다. Google의 cwebp 공식 설명서에서 -metadata 옵션은 ICC·EXIF·XMP 복사를 지정하며 기본값은 none이다. 따라서 cwebp 기본 설정으로 변환하면 입력 파일의 해당 메타데이터를 복사하지 않는다.
위치 정보처럼 공개하고 싶지 않은 EXIF를 제거하면 개인정보 보호에 도움이 될 수 있다. 반면 정확한 색 표시를 위한 ICC 프로필이나 업무상 필요한 촬영 정보가 있다면 내보내기 설정을 따로 관리해야 한다. 형식 자체가 메타데이터를 지원하는지와 사용한 변환기가 실제로 이를 보존하는지는 구분해야 한다.
자연스러운 사진을 폭넓게 공유하려면 JPG, 웹 전용 사진의 용량을 줄이려면 손실 WebP, 투명 배경이나 글자·선의 정확성이 중요하면 PNG 또는 무손실 WebP가 출발점이 된다. 형식을 고른 뒤에는 픽셀 크기, 파일 용량, 실제 표시 크기의 화질, 투명 가장자리, 색상, 대상 프로그램에서 열리는지를 차례로 확인한다.
판단이 어렵다면 같은 이미지를 JPG, PNG, WebP로 같은 픽셀 크기에 맞춰 각각 내보내고 실제 사용 화면에서 비교한다. 사진인지 그래픽인지, 투명이 필요한지, 웹 표시용인지 재편집용인지, 누가 어떤 프로그램에서 열 것인지라는 네 가지 질문이 확장자만 보고 고르는 것보다 정확한 결론을 준다.