실험 기록 03
투명 배경은 변환 뒤에도 그대로 남을까요?
완전 투명 영역, 반투명 그림자와 알파 그라데이션이 있는 원본을 JPG와 WebP로 저장했습니다.
PNG와 WebP는 알파 채널 평균 오차가 0으로 투명도를 유지했습니다. JPG는 투명도를 저장할 수 없어 흰색 배경과 합쳐 저장했습니다.
핵심 결과
PNG 알파 오차0투명도 그대로
WebP 알파 오차0투명도 그대로
JPG 배경#FFFFFF투명 영역을 흰색과 합성
같은 원본으로 비교한 결과
브라우저가 화면 크기에 맞춰 이미지를 줄여 표시할 수 있습니다. 원본 크기는 아래 파일을 내려받아 확인할 수 있습니다.
측정값
| 형식 | 파일 크기 | 투명도 | 알파 평균 오차 | 저장 방식 |
|---|---|---|---|---|
| PNG | 286.9 KB | 유지 | 0 | 무손실 |
| WebP | 32.3 KB | 유지 | 0 | 품질 0.86 |
| JPG | 20.4 KB | 지원하지 않음 | 해당 없음 | 흰 배경 + 품질 0.92 |
결과에서 확인한 점
- 투명 로고나 반투명 그림자는 PNG 또는 WebP로 저장해야 합니다.
- JPG가 필요하다면 투명 영역과 합칠 배경색을 먼저 정해야 예상하지 못한 테두리를 줄일 수 있습니다.
- 이 사이트의 PNG→JPG와 WebP→JPG 도구는 투명 영역을 흰색 배경과 합칩니다.
어떻게 측정했나요?
측정 순서
- 완전 투명 영역과 반투명 그림자가 있는 고정 Canvas 원본을 만들었습니다.
- PNG와 WebP는 투명 원본을 기준으로 RGB·알파 값을 비교했습니다.
- JPG는 투명 원본을 흰색과 합성한 뒤 저장하고, 같은 흰색 합성본을 기준으로 RGB만 비교했습니다.
- JPG는 알파 채널을 저장하지 않으므로 알파 오차를 계산하지 않았습니다.
전체 수치와 SHA-256 해시는 측정 결과 JSON에서 확인할 수 있습니다.