JPG·PNG·WebP, 사진과 화면 캡처는 어떤 형식으로 저장할까
JPG, PNG, WebP는 압축하는 방식이 달라서 같은 그림도 형식에 따라 용량이 몇 배씩 차이 납니다. 휴대폰 사진 한 장과 화면 캡처 한 장을 세 형식으로 저장해 보고, 어떤 그림에 어떤 형식이 맞는지 정리했습니다.
세 형식의 차이
| 형식 | 압축 | 투명 배경 | 잘 맞는 그림 | 주의할 점 |
|---|---|---|---|---|
| JPG | 손실 | 없음 | 사진처럼 색이 부드럽게 변하는 그림 | 글자·선 둘레에 얼룩이 생기기 쉬움 |
| PNG | 무손실 | 있음 | 화면 캡처, 도표, 로고처럼 단색 면과 선이 많은 그림 | 사진을 담으면 매우 커짐 |
| WebP | 손실·무손실 둘 다 | 있음 | 사진과 캡처 모두 | 오래된 프로그램이나 일부 접수 사이트는 받지 않음 |
손실 압축은 사람 눈에 덜 띄는 정보를 버려 용량을 줄이는 방식이고, 무손실 압축은 화소 하나하나를 그대로 보존합니다. 무손실이 항상 좋은 것은 아닙니다. 사진처럼 화소마다 값이 조금씩 다른 그림은 무손실로 담으면 줄일 수 있는 것이 거의 없어 파일이 커집니다.
어떻게 쟀나
사진은 아이폰 16으로 찍은 4032×3024 화소 사진(위키미디어 공용 CC0, 원본 JPG 3,597KB)을 썼습니다. 화면 캡처는 이 사이트의 PDF 합치기 페이지를 1280×900 크기로 캡처한 PNG(89KB)입니다. 한글 글자, 가는 선, 단색 바탕이 섞인 전형적인 캡처입니다.
두 그림을 이 사이트의 이미지 형식 변환으로 JPG와 WebP는 화질 90·75·50으로, PNG는 화질 설정 없이 저장했습니다. 원본과의 차이는 PSNR(dB, 높을수록 원본에 가까움)로 비교했습니다. PSNR이 무엇인지는 JPG 화질값 비교에서 설명했습니다.
사진: PNG는 4.7배, WebP는 생각보다 작은 차이
| 저장 형식 | 용량 | 원본 대비 | PSNR |
|---|---|---|---|
| 원본 JPG | 3,597KB | 100% | - |
| JPG 90 | 2,220KB | 62% | 44.2 |
| JPG 75 | 1,345KB | 37% | 40.8 |
| JPG 50 | 860KB | 24% | 38.1 |
| PNG | 16,900KB | 470% | 원본과 같음 |
| WebP 90 | 1,586KB | 44% | 41.8 |
| WebP 75 | 734KB | 20% | 37.7 |
| WebP 50 | 522KB | 15% | 35.9 |
사진을 PNG로 바꾸면 16.5MB, 원본의 4.7배가 됩니다. 그런데 화질은 원본 JPG와 똑같습니다. JPG가 처음 저장될 때 이미 버린 정보는 PNG로 바꾼다고 돌아오지 않기 때문입니다. 사진을 PNG로 바꿔서 얻는 것은 용량뿐입니다.
WebP는 같은 '화질 75'에서 JPG의 절반 남짓(734KB 대 1,345KB)이라 훨씬 효율적으로 보입니다. 하지만 화질 숫자는 형식마다 의미가 다릅니다. PSNR을 기준으로 맞춰 보면 WebP 90(1,586KB, 41.8dB)은 JPG 80(1,587KB, 41.8dB)과 용량도 화질도 사실상 같았습니다. 화질을 더 낮춘 구간에서는 WebP 75(734KB, 37.7dB)가 비슷한 화질의 JPG 50(860KB, 38.1dB)보다 15%쯤 작았습니다. 이 사진에서 WebP가 주는 이득은 같은 화질 기준으로 0~15% 정도였습니다.
화면 캡처: JPG로 바꾸면 오히려 커집니다
| 저장 형식 | 용량 | 원본 대비 | PSNR |
|---|---|---|---|
| 원본 PNG(캡처) | 89KB | 100% | - |
| JPG 90 | 95KB | 107% | 44.7 |
| JPG 75 | 69KB | 78% | 38.6 |
| JPG 50 | 53KB | 60% | 35.2 |
| PNG(다시 저장) | 117KB | 132% | 원본과 같음 |
| WebP 90 | 49KB | 55% | 44.5 |
| WebP 75 | 36KB | 40% | 41.7 |
| WebP 50 | 31KB | 35% | 39.8 |
캡처에서는 결과가 반대입니다. JPG 90은 원본 PNG보다 커졌고, 용량을 줄이려고 화질을 75로 내리면 PSNR이 38.6dB까지 떨어졌습니다. 단색 바탕과 또렷한 글자 경계는 JPG가 가장 못 다루는 그림입니다. 크게 확대해 보면 글자 둘레에 희미한 얼룩이 번져 있습니다.
WebP는 같은 수준의 화질(PSNR 44.5dB)을 49KB, JPG의 절반 크기로 담았습니다. 화질 75로 낮춰도 41.7dB로, 같은 화질 75의 JPG(38.6dB)보다 원본에 가까우면서 용량은 절반(36KB 대 69KB)입니다. 글자가 많은 그림에서는 WebP의 이득이 사진보다 훨씬 큽니다.
PNG를 PNG로 다시 저장하면 89KB가 117KB로 커졌습니다. 캡처 프로그램이 브라우저보다 PNG를 더 세게 압축해 두었기 때문입니다. 이 사이트의 도구도 PNG를 다시 저장하기만 할 뿐 색 수를 줄이는 식의 추가 압축은 하지 않습니다. PNG 용량을 줄이려면 WebP로 바꾸는 편이 확실합니다.
그래서 무엇으로 저장할까
- 휴대폰이나 카메라로 찍은 사진은 JPG가 무난합니다. 어디에 올려도 받아 주고, 화질 80 안팎이면 원본의 절반 정도로 줄어듭니다. 받는 쪽이 WebP를 지원하고 용량이 더 중요하다면 WebP도 좋습니다.
- 화면 캡처, 표, 도표처럼 글자가 있는 그림은 원본 PNG를 그대로 쓰고, 줄여야 한다면 WebP로 바꿉니다. JPG로 바꾸는 것은 피합니다.
- 로고나 아이콘처럼 투명한 부분이 있는 그림은 PNG나 WebP로 저장합니다. JPG에는 투명 부분이 없어서 지정한 배경색(기본은 흰색)으로 채워집니다.
- 접수 사이트나 쇼핑몰이 형식을 정해 두었다면 그 형식을 따릅니다. WebP를 받지 않는 곳이 아직 꽤 있습니다.
이미지 용량 줄이기의 저장 형식을 '자동'으로 두면, 투명한 부분이 없는 PNG는 JPG로 바뀝니다. 사진을 PNG로 받았을 때는 이 방식이 맞지만, 화면 캡처라면 저장 형식을 WebP로 직접 고르는 편이 화질과 용량 모두 낫습니다.