PNG·WebP·JPG 용량 비교: 같은 이미지로 직접 재 본 결과

“WebP가 PNG보다 작다”, “256색으로 줄이면 가볍다”는 말은 많이 들어 보셨을 겁니다. 정말 그런지 배경을 지운 캐릭터 세 장을 네 가지 형식, 네 가지 크기로 저장해 용량을 직접 쟀습니다. 대부분은 예상대로였지만, 예상과 다른 결과도 하나 있었습니다.

2026년 10월 10일 · BGPeel

측정 방법

대상은 나노바나나로 만들고 BGPeel로 배경을 지운 2048×2048 투명 PNG 세 장입니다. 단순한 초록 슬라임, 세밀한 식물 몬스터, 빛 효과가 많은 금색 정령으로 성격이 서로 다릅니다. 각 이미지를 원본 크기, 1024, 512, 256, 128px로 줄이고 네 형식으로 저장했습니다.

• PNG: 손실 없는 기본 저장.
• PNG 256색: 색을 256개로 줄인 PNG(UPNG.js 사용, BGPeel의 ‘256색으로 용량 줄이기’).
• WebP: Chrome의 무손실 WebP(품질 1).
• JPG: 품질 0.92, 투명한 부분은 흰색으로 채움.

모든 파일은 Chrome에서 BGPeel의 저장 코드를 그대로 돌려 만들었습니다. 즉 BGPeel에서 같은 설정으로 받으면 같은 용량이 나옵니다. 다른 프로그램은 압축 방식이 달라서 숫자가 조금씩 다를 수 있습니다.

AVIF처럼 더 새로운 형식은 이번 비교에서 뺐습니다. BGPeel이 아직 AVIF로 저장하지 않고, 브라우저에서 AVIF로 저장할 수 있는지도 브라우저마다 다르기 때문입니다. 세 캐릭터를 고른 이유는 용량을 좌우하는 성격이 서로 달라서입니다. 슬라임은 넓은 단색 면과 넓은 투명 영역, 식물은 촘촘한 덩굴과 이빨, 정령은 수많은 중간색으로 된 빛 효과가 특징입니다.

원본 크기(2048px) 결과

괄호 안은 PNG 대비 증감입니다. 식물과 정령은 WebP가 PNG보다 36~38% 작았지만, 슬라임은 WebP가 오히려 38% 컸습니다. 넓은 단색 면과 투명 영역으로 이루어진 단순한 그림은 PNG의 압축 방식에 이미 잘 맞아서, 무손실 WebP가 더 줄일 여지가 없었던 것으로 보입니다. “WebP가 늘 작다”는 말은 이 실험에서는 맞지 않았습니다.

웹에 많이 쓰는 512px 결과

512px로 줄이면 슬라임도 WebP가 18% 작아졌습니다. 줄이는 과정에서 가장자리가 부드럽게 섞이며 색 수가 늘어나, PNG에 유리했던 조건이 약해졌기 때문입니다. 256px에서는 슬라임만 다시 WebP가 4% 컸고, 식물과 정령은 WebP가 16~26% 작았습니다.

형식보다 크기가 먼저다

표를 세로로 읽으면 더 큰 차이가 보입니다. 세 캐릭터 모두 가로세로를 절반으로 줄일 때마다 PNG 용량이 원래의 27~32%로 줄었습니다. 픽셀 수는 4분의 1이 되는데 용량은 그보다 조금 덜 줄어드는 셈입니다. 정령을 예로 들면 2048px PNG 3.41MB가 512px로 줄이기만 해도 305KB로 91% 줄었고, 여기에 256색까지 적용하면 64KB로 원본보다 98% 가벼워졌습니다. 형식을 바꿔서 얻는 30~40%보다 쓸 크기로 줄이는 효과가 훨씬 큽니다. 웹페이지에 200px로 보일 그림을 2048px로 올리고 있다면, 형식 고민보다 크기를 먼저 맞추세요. 화면 밀도가 높은 기기를 생각해도 보이는 크기의 2배면 충분합니다.

256색 PNG가 가장 효과가 컸다

모든 크기, 모든 캐릭터에서 가장 크게 줄어든 것은 256색 PNG였습니다. 원본 크기에서 64~81%, 512px에서 63~79%가 줄었고, 투명 배경도 그대로 유지됩니다. 화질은 어떨까요? 정령 이미지는 원래 서로 다른 색이 98,971개였는데, 이를 256개로 줄여도 보이는 픽셀의 평균 색 차이는 채널당 2.9단계(0~255 기준)에 그쳤습니다.

차이가 가장 큰 부분을 골라 확대해도 구분이 쉽지 않습니다. 도트 그림은 원래 쓰는 색이 적고 경계가 뚜렷해서 256색 변환에 아주 잘 맞습니다. 반대로 사진이나 부드러운 그라데이션이 넓은 그림은 줄무늬(밴딩)가 생길 수 있으니 확대해서 확인하세요.

JPG는 가장 작지만 투명을 잃는다

JPG는 단순한 슬라임에서는 모든 크기에서 가장 작았고, 식물과 정령도 원본 크기에서는 가장 작았습니다. 하지만 JPG는 투명을 저장할 수 없어서, 배경을 지운 부분이 흰색으로 채워집니다. 흰 배경 웹페이지에서는 티가 안 나지만, 어두운 배경이나 다른 그림 위에 올리면 흰 네모가 드러납니다.

그리고 세밀한 식물과 정령은 512px 이하에서 JPG가 256색 PNG보다 오히려 컸습니다. 512px 정령은 JPG가 81KB, 256색 PNG가 64KB였습니다. 투명이 필요 없더라도 도트 그림이라면 256색 PNG가 더 작고 깨끗할 수 있습니다.

덤: 배경을 지우면 용량이 줄어든다

같은 방식(Chrome PNG)으로 저장했을 때, 마젠타 배경이 있던 원본보다 배경을 지운 결과가 더 작았습니다. 슬라임은 4.51MB에서 1.17MB로 74%, 식물은 5.69MB에서 3.34MB로 41%, 정령은 5.44MB에서 3.41MB로 37% 줄었습니다. AI가 만든 ‘단색’ 배경에는 눈에 안 보이는 미세한 얼룩이 있어 압축이 잘 안 되는데, 투명해진 픽셀은 모두 똑같은 값이라 거의 공간을 차지하지 않기 때문입니다. 배경이 넓은 슬라임에서 효과가 가장 컸습니다.

어떤 형식을 고를까

BGPeel에서는 결과를 원본 해상도로 메모리에 두고, 크기와 형식은 받을 때 적용합니다. 그래서 ‘저장 형식’과 ‘256색’을 바꿔 가며 같은 이미지를 여러 번 받아 보고 카드에 표시된 용량을 비교할 수 있습니다. Safari처럼 WebP로 저장하지 못하는 브라우저에서는 WebP를 골라도 PNG로 받습니다. 크기 줄이는 방법은 이미지 크기 바꾸기에 정리했습니다.