사진·한글 문서·투명 로고: 실제 출력 비교와 재현
사진·한글 문서·투명 로고를 조건별로 변환했습니다. 원본·설정·실제 출력 파일을 비교하고 같은 실험을 내 브라우저에서 다시 실행하세요.
사진·한글 문서·투명 로고, 같은 설정의 다른 결과
파일 크기를 줄여도 필요한 정보가 남아야 합니다. 원본을 바꾸지 않고 조건을 하나씩 바꿔 비교했습니다. 이 결과는 아래 예제와 측정 환경에 한정됩니다.
실제 사진
찻잔의 매끈한 면과 나무 결을 함께 비교합니다. Rachel Michetti의 CC0 사진이며 직접 촬영한 사진은 아닙니다.
600×400px · 466,706 B
한글 문서
직접 만든 시험 문서입니다. 16~36px 글자와 1px 선을 넣어 품질 손실과 해상도 손실을 구분합니다.
1200×900px · 47,221 B
투명 로고
직접 만든 투명 이미지입니다. 모서리의 투명도와 글자·도형 가장자리를 확인합니다.
960×600px · 9,217 B| 조건·출력 파일 | 용량 | 크기 | 결과 품질 | 확인 |
|---|---|---|---|---|
| 사진 · JPG 품질85 | 56,629 B | 600×400 | 85 | 크기·형식 확인 |
| 사진 · WebP 품질85 | 48,084 B | 600×400 | 85 | 크기·형식 확인 |
| 사진 · JPG 500KB 이하 | 56,629 B | 600×400 | 85 | 목표 달성 |
| 사진 · JPG 10KB · 크기 유지 | 18,895 B | 600×400 | 30 | 목표 초과 |
| 사진 · JPG 10KB · 축소 허용 | 9,960 B | 401×267 | 31 | 목표 달성 |
| 문서 · JPG 품질85 | 77,664 B | 1200×900 | 85 | 크기·형식 확인 |
| 문서 · WebP 품질85 | 28,826 B | 1200×900 | 85 | 크기·형식 확인 |
| 문서 · JPG 품질30 | 41,929 B | 1200×900 | 30 | 크기·형식 확인 |
| 문서 · JPG 가로400px | 15,487 B | 400×300 | 85 | 크기·형식 확인 |
| 투명 로고 · JPG 품질85 | 16,755 B | 960×600 | 85 | 흰 배경 |
| 투명 로고 · WebP 품질85 | 6,376 B | 960×600 | 85 | 투명 유지 |
측정: 2026-10-29T15:48:47.008Z · Browser Canvas.toBlob · Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/155.0.0.0 Safari/537.36. 출력 파일을 다시 열어 형식·픽셀 크기를 확인했습니다. 모바일 실기기·다른 브라우저 결과는 별도 검증이 필요합니다. 설정·바이트·해시 기록(JSON)
작은 글씨는 용량보다 먼저 확인하세요
이 문서는 PNG 원본 47,221B보다 JPG 품질85 결과(77,664B)가 더 컸습니다. JPG로 바꾸면 항상 작아지는 것은 아닙니다. WebP 품질85 결과는 28,826B였지만, 용량만으로 글자가 더 선명하다고 단정할 수 없습니다.
문서 원본은 1,200px입니다. 400px 결과의 글자는 원본의 1/3 크기로 줄어듭니다. 품질을 높여도 줄어든 글자 픽셀을 되돌릴 수 없습니다. 아래 파일을 원본 크기로 열어 04·05번 줄과 아래쪽 얇은 선을 비교하세요.
500KB를 통과해도, 다시 압축해야 할까요?
사진 원본은 466,706B로 이미 500KB 이하입니다. 제출처가 PNG를 허용하면 용량만을 위해 다시 압축할 필요는 없습니다. JPG 지정이 있을 때만 형식을 바꾸세요. 10KB 조건은 작은 용량을 강요했을 때 품질과 크기가 어떻게 달라지는지 보는 별도 실험입니다.
이 사진은 600×400px를 유지하면 품질30에서도 18,895B로 10KB를 초과했습니다. 축소를 허용했을 때 401×267px·9,960B가 됐습니다. ‘목표 초과’는 오류가 아니라 지정한 품질 하한·해상도에서 조건을 만족하지 못했다는 뜻입니다. 무조건 글자를 희생하기보다 제출 조건을 확인하고 필요한 영역을 자르거나 제한을 다시 확인하세요.
10KB · 축소 허용 조건으로 직접 실행 →투명도는 파일 크기로 판단할 수 없습니다
같은 이미지를 어두운 바탕에 놓았습니다. 이 도구는 JPG 저장 시 흰 배경을 채웁니다. WebP는 투명도를 유지하지만 올리는 곳의 형식 지원도 확인해야 합니다.
같은 실험을 내 브라우저에서 다시 실행
위 세 원본으로 비교 파일 11개와 일괄 파일 10개를 만듭니다. 개인 파일은 사용하지 않습니다. 아래 기록은 이번 실행에서 측정한 결과이며 서버로 전송하지 않습니다.
버튼을 누르면 예제만 내려받아 브라우저 안에서 변환합니다.
사진 출처: scikit-image coffee · Rachel Michetti · CC0 (출처·사용 조건 확인 2026-10-30). 문서·로고·실험 설계는 ISSUE FORGE 제작. 실제 고객 후기나 특정 기기 성능 평가가 아닙니다.
10개 입력 → 10개 WebP → ZIP
사진·문서·로고 세 원본에서 크기를 달리해 만든 10개 입력입니다. 서로 다른 사진 10장을 촬영한 사례가 아닙니다. WebP 품질85·원본 크기 유지·파일명 example로 같은 배치를 재현할 수 있습니다.
- 예제 10개를 도구에 불러오세요. 자동으로 변환하지 않으므로 목록과 설정을 확인할 수 있습니다.
- 변환 결과 만들기를 누르고 10개 모두 성공했는지 확인하세요.
- 선택 결과 ZIP 만들기 → 준비된 ZIP 저장 순서로 저장하세요.
- ZIP을 열어 example-01.webp부터 example-10.webp까지 개수·이름·이미지 내용을 확인하세요.
브라우저에서 생성한 출력 파일: 10개 · ZIP 209,878B. 검증한 10개 결과 ZIP 내려받기
개별 입력·출력 파일과 용량
| 순번 | 입력 | 출력 | 크기 |
|---|---|---|---|
| 1 | 449,225 B | example-01.webp · 48,084 B | 600×400 |
| 2 | 77,424 B | example-02.webp · 21,420 B | 900×675 |
| 3 | 19,230 B | example-03.webp · 7,066 B | 720×450 |
| 4 | 287,764 B | example-04.webp · 32,056 B | 480×320 |
| 5 | 60,886 B | example-05.webp · 16,404 B | 720×540 |
| 6 | 15,438 B | example-06.webp · 5,792 B | 576×360 |
| 7 | 165,058 B | example-07.webp · 20,206 B | 360×240 |
| 8 | 47,994 B | example-08.webp · 13,418 B | 600×450 |
| 9 | 12,736 B | example-09.webp · 4,922 B | 480×300 |
| 10 | 361,608 B | example-10.webp · 39,428 B | 540×360 |
공개 ZIP은 브라우저에서 내려받은 10개 결과를 도구와 같은 ZIP 라이브러리로 묶었습니다. 압축을 다시 풀어 개수·이름·각 파일의 SHA-256을 대조했습니다.
실패 파일은 ZIP에서 빠질 수 있습니다. ‘변환 성공 개수’, 선택한 결과, 압축을 푼 파일 개수를 함께 확인하세요. 같은 설정이어도 내용에 따라 용량이 늘어날 수 있습니다.
이전 도형 예제 · 네이티브 인코더 결과
같은 원본의 PNG·JPG·WebP 결과
직접 만든 도형·작은 글자 예제입니다. 실제 인물이나 고객 사진이 아닙니다. 투명 여백과 얇은 선을 넣어 형식 차이를 확인할 수 있게 했습니다.
58,065 B · 960 × 600px
35,566 B · 960 × 600px
15,260 B · 960 × 600px
JPG·WebP 품질85, 크기960×600 유지. 이 수치는 @napi-rs/canvas 1.0.11 / native encoder로 만든 파일을 다시 열어 크기·투명도를 검사한 결과입니다. 브라우저 도구의 인코더와 다르므로 동일한 바이트 수나 절감률을 보장하지 않습니다.
직접 확인할 순서
- source.png를 내려받아 사진 작업실에서 선택하세요.
- JPG 품질85로 저장한 뒤 가장자리의 흰 배경과 얇은 선을 확인하세요.
- 같은 원본을 WebP로 저장해 투명도·용량·가독성을 비교하세요.
용량이 작다는 이유만으로 글자가 흐린 결과를 선택하지 마세요. 공개된 수치는 이 예제에만 해당하며 사진·기기마다 결과가 달라집니다.
사진 작업실에서 직접 비교 →기능 안내 반영: 2026-10-30 · 이미지 인코딩의 형식·품질 안내는 MDN Canvas 문서를 참고합니다.