이 글은 img-compressor의 Canvas 리사이즈 흐름과 벤치마크 기록을 바탕으로 작성했습니다. 이미지 최적화에서는 품질 숫자 하나보다 크기, 포맷, 처리 시간의 균형이 더 중요합니다.
문제: 품질값만 낮추면 해결되는 것처럼 보인다
이미지 용량을 줄일 때 가장 먼저 떠올리는 방법은 품질값을 낮추는 것입니다. 하지만 원본 해상도가 지나치게 크다면 품질값만 낮추는 것보다 먼저 가로·세로를 줄이는 편이 더 자연스럽습니다. 사용자가 웹에 올릴 이미지는 원본 카메라 해상도를 그대로 유지할 필요가 없는 경우가 많습니다.
img-compressor는 최대 너비와 높이를 기준으로 비율을 유지해 크기를 줄인 뒤, 필요하면 추가 압축을 수행합니다. 이 흐름은 “화질을 무조건 낮추기”보다 “필요 이상으로 큰 픽셀 수를 먼저 줄이기”에 가깝습니다.
리사이즈 비율은 작은 쪽을 기준으로 한다
가로와 세로가 모두 제한 안에 들어오도록 하려면 두 비율 중 더 작은 값을 선택해야 합니다. 그리고 원본보다 크게 키우지 않도록 최대값을 1로 제한합니다. 이 조건은 작은 이미지를 불필요하게 확대하지 않기 위한 기본 방어입니다.
const scale = Math.min(
1,
maxWidth / image.width,
maxHeight / image.height
);처리 시간도 사용자 경험이다
용량을 조금 더 줄이기 위해 너무 오래 처리하면 도구 사용성이 떨어집니다. 특히 여러 파일을 순서대로 처리할 때는 한 장의 처리 시간이 전체 작업 시간을 결정합니다. 그래서 품질값, 최대 크기, Worker 옵션, 진행 상태 표시를 함께 봐야 합니다.
현재 사이트의 벤치마크는 주로 출력 바이트를 기록합니다. 다음 단계에서는 같은 자산으로 처리 시간도 함께 남기는 것이 좋습니다. 그래야 품질 60과 80 사이의 차이를 용량뿐 아니라 기다리는 시간까지 포함해서 판단할 수 있습니다.
판단 체크리스트
- 출력 이미지가 실제 사용 위치보다 지나치게 큰 해상도로 남아 있지 않은지 확인합니다.
- 품질값을 낮추기 전에 리사이즈가 충분히 적용되는지 확인합니다.
- 품질값 변화에 따른 용량 차이와 화면 품질 차이를 함께 봅니다.
- 여러 파일 처리 시 총 작업 시간이 사용 가능한 수준인지 확인합니다.
- 처리 시간이 길어질 때 진행 상태가 충분히 설명되는지 확인합니다.
결론
Canvas 리사이즈는 단순히 이미지를 작게 그리는 코드가 아닙니다. 어떤 크기까지 줄일지, 어떤 품질로 다시 저장할지, 사용자가 얼마나 기다려야 하는지를 함께 결정하는 지점입니다. 그래서 이미지 도구의 옵션은 숫자를 많이 제공하는 것보다 안전한 기본값과 확인 가능한 결과를 제공하는 데 초점을 맞추는 것이 좋습니다.
