이미지 용량 줄이기·크기 조절

원본의 성격이 다르면 유리한 형식도 달라집니다

작은 글자가 많은 문서, 반투명 도형, 미세한 질감이 있는 차트를 비교해보세요. 모두 툴하루가 실습을 위해 만든 합성 이미지이며 실제 사용자 문서나 사진은 아닙니다. 각 샘플을 불러온 뒤 작업 영역의 세 형식 비교하기를 누르면 같은 픽셀 크기의 JPG·WebP·PNG와 측정 보고서를 받을 수 있습니다.

문서와 작은 글자

1,200 × 800px · 원본 92,378바이트. 표의 가는 선과 글자 주변 번짐을 비교합니다.

문서 원본

투명 배경과 반투명 도형

800 × 600px · 원본 5,696바이트. JPG의 흰색 배경과 PNG·WebP의 투명 경계를 확인합니다.

투명 원본

질감과 그라데이션

1,200 × 800px · 원본 437,649바이트. 부드러운 그라데이션과 미세한 질감의 변화를 확인합니다.

질감 원본

1. 샘플을 불러오면 해당 원본 크기로 바뀝니다. 비교용 화질을 80%로 맞춥니다.
2. 세 형식 비교를 실행합니다. 비교는 목표 용량을 무시해 픽셀 크기를 같게 유지합니다.
3. 결과 파일을 내려받아 실제 크기로 확인합니다. 작은 미리보기는 글자 번짐을 숨길 수 있습니다.
4. 보고서의 원본·결과 바이트와 화질·브라우저 정보를 보관합니다. 나중에 다른 환경에서 비교할 때 같은 조건인지 확인하세요.

표의 결과 숫자를 누르면 측정에 사용한 파일을 받을 수 있습니다. 재현 조건과 정확한 브라우저 정보는 문서 보고서 · 투명 도형 보고서 · 질감 차트 보고서에 기록했습니다. 브라우저의 인코더가 달라지면 결과도 달라질 수 있습니다.

이번 결과에서 선택할 수 있는 기준: 문서는 WebP가 가장 작았지만 작은 글자의 가독성을 원래 크기에서 확인해야 합니다. 투명 도형은 세 결과 모두 원본보다 커졌으므로 크기·형식을 바꿀 필요가 없다면 원본 PNG를 유지하는 편이 낫습니다. JPG는 바깥 영역과 반투명 도형이 흰 바탕에 합성되어 다른 배경에 올렸을 때 원본과 다르게 보입니다. 질감 차트는 WebP에서 용량 감소 폭이 컸습니다. 이는 이 세 합성 샘플의 관찰 결과이며 모든 사진에 적용되는 순위는 아닙니다.

PNG가 이미 작은 도형이라면 다시 저장한 파일이 더 커질 수 있습니다. 또한 투명도가 필요한 작업에서 JPG의 용량이 작다고 해서 더 적합한 것은 아닙니다. 파일 크기, 표시 품질, 배경 조건, 제출처가 받는 형식을 함께 비교하세요.

비교 기능과 합성 샘플 작성: 2026.10.10 · 툴하루. 브라우저 출력 형식·화질 동작 참고: MDN canvas.toBlob. 형식이 지원되지 않으면 다른 형식으로 저장된 파일을 잘못 표시하지 않고 실패를 안내합니다.

1. 크기를 고정하고 형식·화질을 바꾸기

가로 1,200, 세로 800으로 설정하고 목표 용량은 ‘지정 안 함’을 선택합니다. JPG 화질 90%, JPG 60%, WebP 80%, PNG를 차례로 실행하세요. 설정을 바꾸면 이전 결과가 초기화되므로 필요한 파일은 매번 다운로드합니다.

이 샘플에서는 JPG 60%와 WebP 80%가 비슷한 용량이었고, PNG는 감소 폭이 작았습니다. 용량이 비슷하다고 화질까지 같은 것은 아닙니다. 원본 이미지와 브라우저가 바뀌면 수치도 달라지므로 압축률의 보장값으로 사용하지 마세요.

JPG와 WebP의 화질 값은 같은 점수 체계가 아닙니다. ‘80%’는 원본 화질의 80%가 남는다는 뜻도 아닙니다. 각 결과를 원래 크기로 열어 가는 선 주변의 번짐, 글자 윤곽, 그라데이션의 띠가 보이는지 비교하세요. 작은 미리보기에서는 차이가 잘 보이지 않을 수 있습니다.

PNG를 다시 저장해도 질감이 많은 이미지에서는 용량이 충분히 줄지 않을 수 있습니다. JPG로 바꾸면 투명한 모서리가 흰색으로 채워집니다. 투명 배경이 꼭 필요하면 PNG 또는 WebP 결과를 확인하세요.

2. 100KB 제한에 맞추기

같은 원본에서 출력 JPG, 화질 80%, 가로 1,200, 세로 800, 목표 용량 100KB를 선택하고 실행합니다. 툴하루는 지정한 화질을 상한으로 낮은 화질부터 조건을 탐색하고, 그래도 용량을 넘으면 가로·세로 크기를 함께 줄입니다.

이번 샘플 실측에서는 JPG가 98,022바이트 · 1,200 × 800픽셀로 나왔습니다. 같은 100KB 목표를 PNG로 실행하면 91,165바이트 · 447 × 299픽셀로 작아졌습니다. 둘 다 용량 제한 안에 있지만 PNG 결과는 원본보다 픽셀 수가 크게 줄었습니다.

압축 후에는 결과 용량과 결과 픽셀 크기를 둘 다 확인하세요. 업로드 규격이 ‘1,200 × 800픽셀 고정’이라면 목표 용량에 맞추는 과정에서 크기가 작아진 결과는 사용할 수 없습니다. 이 경우 목표 용량을 해제하고 픽셀을 고정한 상태에서 화질이나 허용 형식을 바꿔 비교하세요.

이 도구의 100KB는 100 × 1,024 = 102,400바이트입니다. 제출처가 100,000바이트로 제한하면 조금 더 작게 만들어야 합니다. 결과 아래의 ‘정확한 용량’에서 바이트를 확인하고, 최종 판단은 제출처의 업로드 결과로 확인합니다.

사례 1. 100KB 이하 문서 이미지를 제출해야 할 때

제출처가 PNG·JPG를 받고 한도를 100,000바이트로 안내했다고 가정해봅시다. 이 합성 문서의 원본 PNG는 92,378바이트로 이미 한도 안입니다. JPG로 바꾸면 97,982바이트로 더 커집니다. 이 경우 형식을 바꿀 이유가 없다면 원본을 제출하는 편이 낫습니다.

1. 제출처의 형식부터 확인합니다. WebP가 더 작아도 PNG·JPG만 받는 곳에는 제출할 수 없습니다. 확장자만 바꿔도 파일 형식은 바뀌지 않습니다.
2. 원래 크기에서 글자를 읽습니다. 위 파일을 열어 표의 ‘ITEM-0001’, 작은 영문·숫자, 1px 가로선과 파란 수량 주변을 비교하세요. 이 페이지의 축소 미리보기만으로 선명도를 판단하지 마세요.
3. 한도가 더 작으면 다시 시험합니다. 예를 들어 50,000바이트 제한에는 여기의 세 파일 모두 초과합니다. 목표 용량을 설정해 압축한 뒤 실제 바이트와 픽셀 크기를 확인하고, 글자가 읽히는지도 다시 확인해야 합니다.

이 예제에는 사진이나 실제 영수증의 개인정보가 없습니다. 원본이 다른 문서라면 같은 화질 설정으로도 파일 크기와 글자 상태가 달라집니다.

사례 2. 어두운 배경에 올릴 투명 로고를 준비할 때

체커 무늬는 투명한 부분을 보여주기 위한 페이지 배경입니다. 같은 배경에 세 파일을 놓으면 JPG에서는 흰 사각형이 남고, 원본 PNG·WebP에서는 바깥 배경이 비칩니다. 반투명 파란 도형과 초록 원도 바탕색의 영향을 받습니다.

이 샘플에서는 원본 PNG를 유지합니다. 원본이 가장 작고 투명도도 유지합니다. JPG에서 생긴 흰색을 지우려면 투명 정보가 있는 원본에서 다시 작업해야 합니다. JPG 결과를 PNG로 재저장하는 것만으로 원래 투명도가 돌아오지는 않습니다.

용량만 줄이면 되는 사진과 달리, 로고는 실제로 놓일 배경에서도 확인해야 합니다. 투명 경계와 반투명 색을 확인하고, 받는 프로그램의 PNG·WebP 지원 여부를 확인한 뒤 선택하세요.