WebP 변환에서 품질·투명도·실제 용량을 검증하는 법

PROBLEM

왜 이 구분이 필요한가

이미지 품질 숫자는 파일 크기 감소율이 아닙니다. 같은 quality 80이라도 사진의 노이즈, 색 변화, 브라우저 인코더에 따라 결과 바이트가 달라집니다. 또 PNG의 투명 배경을 JPEG로 바꾸면 투명도를 표현할 수 없어 흰색 배경으로 합성됩니다. 목표는 품질 숫자를 맞추는 것이 아니라 실제 표시 크기, 육안 품질, 결과 바이트를 함께 확인하는 것입니다.

PROCEDURE

실무 적용 순서

원본의 MIME, 픽셀 치수, 바이트를 먼저 기록합니다. 긴 변 기준 목표 치수를 정하고 비율 유지를 켭니다. WebP나 JPEG를 선택해 한 번 변환한 뒤 결과 픽셀과 실제 Blob 바이트를 기록합니다. 대표 이미지처럼 중요한 자산은 quality 70, 80, 90을 각각 만들어 글자 가장자리와 그라데이션을 비교합니다. 투명 자산은 PNG와 WebP 결과를 체크보드 배경에서 확인하고, 업로드 대상 서비스에서도 다시 엽니다.

BASIS

계산과 검증 근거

브라우저는 File을 createImageBitmap으로 해석하고 Canvas에 목표 치수로 그린 뒤 toBlob으로 선택 포맷을 인코딩합니다. 비율 유지 시 원본 가로·세로 비율로 반대 치수를 계산합니다. 따라서 4000×3000에서 가로 1200을 지정하면 세로는 900입니다. 표시되는 결과 용량은 추정치가 아니라 브라우저가 만든 Blob의 실제 byte 수입니다.

LIMITS

지원 범위와 한계

입력은 JPEG, PNG, WebP이며 파일은 최대 20 MiB, 결과의 최대 변은 8,192px입니다. GIF 애니메이션과 HEIC는 지원하지 않습니다. PNG에서 quality 값은 브라우저에 따라 용량에 거의 영향을 주지 않을 수 있습니다. 잘못된 치수는 일부 경우 원본 치수로 돌아가며 특정 결과 바이트를 사전에 보장하지 않습니다.

WORKED EXAMPLES

직접 재현할 예제