WebP와 JPG, 같은 사진으로 비교하면 — 20~37% 작고 화질은 같거나 낫다

웹에 사진을 올릴 때 WebP가 더 작다는 말을 흔히 듣는다. 얼마나 작은지, 대신 화질을 잃는지는 막연하다. 같은 사진으로 재 봤다.

같은 품질 숫자가 같은 화질은 아니다

JPG의 품질 80과 WebP의 품질 80은 서로 다른 인코더가 쓰는 숫자다. 같은 숫자라고 같은 화질을 보장하지 않는다. 그래서 용량만 비교하면 공정하지 않다. 원본과 얼마나 같은지를 나타내는 PSNR을 같이 쟀다. 높을수록 원본에 가깝다.

결과

휴대폰 사진 20장을 긴 쪽 1600픽셀로 줄인 뒤 두 형식으로 저장했다.

모든 구간에서 WebP가 작았다. 20~37%다. 그런데 PSNR도 WebP가 같거나 높았다. 작으면서 화질을 잃지 않았다는 뜻이다.

가장 깔끔한 비교는 품질 75다. JPG 260KB에 36.1dB, WebP 161KB에 36.3dB. 화질이 거의 같은데 WebP가 37% 작다(사진별 비율의 중앙값 0.63).

사진 한 장씩 보면

위 표는 20장의 중앙값이다. 사진별로 다시 봤다.

용량은 20장 모두 WebP가 작았다. 가장 많이 준 사진은 절반 아래(품질 75에서 0.41)까지 내려갔고, 가장 덜 준 사진은 10%(품질 90에서 0.90)만 줄었다. 화질은 사진마다 갈렸다. 0.05dB 안의 차이는 같다고 봤는데도, 품질 75에서는 7장이 JPG보다 PSNR이 낮았다. 중앙값으로는 같거나 높아도 모든 사진이 그런 건 아니다.

화질을 똑같이 맞추고 다시 재면

같은 품질 숫자끼리 비교하면 화질이 조금씩 어긋난다. 그래서 사진마다 JPG와 PSNR이 같아지는 가장 낮은 WebP 품질을 찾고, 그때의 용량을 비교했다.

화질을 맞추면 WebP가 29~36% 작았다. WebP 품질은 JPG 숫자보다 1~2 낮게 잡으면 중앙값 기준으로 같은 화질이 났다. 예외도 있었다. JPG 품질 90과 같은 화질을 내려면 한 장은 WebP 품질 97까지 올려야 했고, 그 사진은 WebP가 14% 더 컸다(1.14). 아주 높은 화질을 원할수록 WebP의 이점이 줄어든다.

사진이 클수록 차이가 컸다

품질 75로 긴 쪽만 바꿔 저장했다.

작은 사진에서도 WebP가 3분의 1쯤 작았고, 크기가 커질수록 차이가 벌어졌다.

글자와 단색 면이 많은 그림은

사진이 아닌 그림은 결과가 다르다. 단색 배경에 큰 글자와 도형을 올린 1600×900 그림 한 장을 스크립트로 그려 같은 방식으로 저장했다.

이런 그림은 PNG가 JPG 품질 90보다 작으면서 화질 손실도 없었다. WebP 무손실은 그보다 더 작았다. 사진은 반대다. 긴 쪽 1600 사진 20장을 PNG로 저장하면 중앙값이 2,371KB, WebP 무손실은 1,596KB였다. 사진별로 JPG 품질 84와 견주면 PNG는 7.1배, WebP 무손실은 4.9배 무거웠다(중앙값).

이미 JPG인 사진을 WebP로 바꾸면

원본은 없고 JPG 파일만 있는 경우가 많다. 긴 쪽 1600, 품질 84로 저장한 JPG(중앙 347KB, 37.8dB)를 다시 열어 WebP로 바꿨다. PSNR은 JPG로 저장하기 전의 사진과 비교한 값이다.

WebP 품질 90으로 바꾸면 용량은 그대로인데 PSNR은 37.8에서 36.9로 내려갔다. 사진에 따라서는 11% 커지기도 했다(1.11). 84로 바꾸면 247KB로 줄지만 PSNR은 36.1dB다. 원본에서 바로 WebP 84로 저장하면 거의 같은 248KB에 38.6dB가 나온다.

JPG를 WebP로 바꾸면 한 번 더 손실 압축을 거치는 셈이라 화질이 두 번 깎인다. 원본이 남아 있다면 원본에서 저장하고, JPG밖에 없다면 용량이 꼭 줄어야 할 때만 바꾼다.

투명 배경이 필요하면

로고처럼 배경이 비어 있어야 하는 그림은 형식부터 갈린다. 투명 배경을 가진 800×800 그림 한 장을 스크립트로 그려 저장했다. JPG는 투명 정보를 담지 못해 저장 자체가 되지 않았다. PNG는 10KB, WebP 무손실은 3KB, WebP 품질 90은 11KB였고, 셋 다 다시 열었을 때 투명한 부분이 그대로 남았다. 이런 단순한 그림에서는 WebP 손실 압축이 오히려 PNG보다 컸다.

무엇으로 저장할까

1. 받는 곳이 형식을 정했는지 먼저 본다. 정해져 있으면 그 형식을 따른다. 2. 사진이면 WebP 손실 압축. 품질은 JPG로 쓰던 숫자보다 1~2 낮게 잡아도 된다. 3. 글자·도형 위주 그림이면 WebP 무손실이나 PNG. JPG로 저장하면 더 무거운데 화질 손실까지 생긴다. 4. 투명 배경이 필요하면 PNG나 WebP. JPG는 투명한 부분을 담지 못한다. 5. 이미 JPG뿐이라면 WebP로 바꿔도 이득이 작다. 같은 용량이면 화질이 떨어진다. 6. 사람에게 파일을 직접 보낼 때는 JPG. 받는 쪽 프로그램을 알 수 없기 때문이다.

그래도 JPG를 써야 하는 곳

WebP가 작다고 아무 데나 올릴 수는 없다. 받는 쪽이 형식을 정해 둔 경우가 있다.

• 온라인 여권 재발급: JPG / JPEG만 받는다
• 유튜브 맞춤 썸네일: JPG, PNG를 받는다. WebP는 목록에 없다

이런 곳에는 JPG로 저장해야 한다. 블로그나 웹페이지처럼 형식 제한이 없는 곳이라면 WebP가 유리하다. 오래된 프로그램 가운데는 WebP를 못 여는 것도 있으니, 파일을 사람에게 보낼 때는 JPG가 무난하다.

이 측정의 한계

Pillow로 저장한 값이다. 브라우저나 다른 프로그램은 인코더 설정이 달라 숫자가 조금 다를 수 있다. 휴대폰 사진 기준이라, 글자나 단색 면이 많은 그래픽 이미지는 결과가 다를 수 있다. 방향은 같겠지만 차이의 폭은 사진마다 다르다.

그래픽 비교는 스크립트가 그린 그림 한 장이라, 실제 디자인에서는 숫자가 달라진다. 화질을 맞춘 비교는 PSNR 하나로 맞춘 것이다. 사람 눈에 같은 화질인지와는 다를 수 있다.

이어서 보기

• 이미지 용량 줄이기 도구 — 기본 형식이 WebP이고 JPG·PNG로 바꿀 수 있다
• 사진 용량, 품질보다 크기를 먼저 줄여야 하는 이유