실험 기록 02
작은 글자와 UI는 PNG·JPG·WebP에서 어떻게 달라질까요?
12–16px 글자, 1px 선, 그림자와 단색 면이 있는 UI형 이미지를 세 형식으로 저장했습니다.
WebP는 18.3 KB로 PNG보다 75.5% 작았습니다. 다만 손실 형식은 작은 글자 주변 픽셀이 달라지므로 확대 결과도 함께 확인해야 합니다.
핵심 결과
PNG 원본74.8 KB픽셀 변화 없음
JPG 결과46.2 KB38.2% 작음
WebP 결과18.3 KB75.5% 작음
같은 원본으로 비교한 결과
브라우저가 화면 크기에 맞춰 이미지를 줄여 표시할 수 있습니다. 원본 크기는 아래 파일을 내려받아 확인할 수 있습니다.
측정값
| 형식 | 파일 크기 | PNG 대비 | 달라진 픽셀 | RGB 평균 오차 | PSNR |
|---|---|---|---|---|---|
| PNG | 74.8 KB | 기준 | 0% | 0 | 손실 없음 |
| JPG | 46.2 KB | 38.2% 작음 | 64.27% | 0.397 | 45.43 dB |
| WebP | 18.3 KB | 75.5% 작음 | 63.82% | 0.419 | 45.55 dB |
결과에서 확인한 점
- PNG는 작은 글자와 1px 선을 원본 그대로 보존했습니다.
- 이 이미지에서는 WebP가 가장 작았고 JPG보다 RGB 평균 오차도 비슷한 수준이었습니다.
- 달라진 픽셀 비율이 높아도 변화량이 작으면 눈에 잘 띄지 않을 수 있습니다. 중요한 UI 캡처는 확대해서 확인하세요.
어떻게 측정했나요?
측정 순서
- 고정된 Canvas 원본(1200×720px UI형 합성 이미지)을 만들었습니다.
- PNG 원본 · JPG 품질 0.92 · WebP 품질 0.86으로 저장했습니다.
- 저장된 결과를 다시 디코딩해 원본과 같은 좌표의 RGB·알파 값을 비교했습니다.
- RGB 평균 오차는 각 색상 채널의 절대 차이를 0–255 범위에서 평균한 값입니다.
전체 수치와 SHA-256 해시는 측정 결과 JSON에서 확인할 수 있습니다.