이미지 압축과 변환은 모든 모던 브라우저에 기본 탑재된 Canvas API를 사용합니다. Canvas는 주로 JavaScript로 그래픽을 그리는 데 쓰이지만, 이미지를 불러와서 다른 형식으로 내보내는 용도로도 활용할 수 있습니다.
동작 흐름은 이렇습니다. 선택한 이미지를 <img> 요소로 불러온 뒤 <canvas>에 그립니다. 리사이즈가 지정된 경우 그리기 전에 캔버스 크기를 새 크기로 설정하면 브라우저가 자동으로 스케일을 조정합니다. "비율 유지"가 활성화되면 너비에서 원본 비율을 계산해 높이를 자동으로 결정합니다.
그리기가 끝나면 canvas.toBlob(callback, 'image/webp', 0.8)처럼 호출하여 지정한 포맷과 품질로 인코딩된 이미지 데이터를 얻습니다. WebP나 AVIF는 JPEG에 비해 같은 화질에서 파일 크기가 작아지는 경향이 있습니다.
모든 처리는 브라우저 내에서 완결됩니다. 이미지가 서버로 전송되지 않으므로 개인 정보 측면에서도 안심하고 사용할 수 있습니다.