무료 이미지 리사이저

사용 방법

크기 조정은 Chrome, Firefox, Safari에 내장된 것과 같은 렌더링 엔진인 Canvas API를 사용해 전적으로 브라우저에서 이루어집니다. 이미지는 새 크기의 화면 밖 캔버스에 그려져 로컬에서 다시 인코딩되며, 아무것도 기기를 떠나지 않습니다.

1. 1
   브라우저가 이미지를 디코딩

   파일을 놓거나 선택하면 브라우저가 HTMLImageElement를 통해 이미지(JPEG, PNG, WebP, AVIF, GIF)를 원시 픽셀 데이터로 디코딩합니다. 원본 픽셀 크기를 읽어 너비와 높이 입력란을 미리 채웁니다.
2. 2
   새 크기로 캔버스를 다시 그림

   크기 조정을 클릭하면 화면 밖 HTMLCanvasElement를 선택한 너비와 높이로 설정하고 ctx.drawImage()를 호출해 모든 픽셀을 새 크기로 조정해 그립니다. JPEG 출력의 경우 투명한 영역이 검게 되지 않도록 먼저 흰색 배경을 채웁니다.
3. 3
   canvas.toBlob()이 출력을 인코딩

   브라우저 내장 canvas.toBlob() 메서드가 설정한 품질로 픽셀 데이터를 JPEG, PNG 또는 WebP로 인코딩합니다. 목표 파일 크기를 지정하면 7회 반복 이진 탐색이 출력이 그 크기 이하가 될 때까지 품질 매개변수를 자동 조정합니다.
4. 4
   결과를 로컬에서 미리보고 다운로드

   인코딩된 Blob은 미리보기 패널을 위한 객체 URL로 바뀌며 서버 왕복이 없습니다. 다운로드를 클릭하면 최종 픽셀 크기가 포함된 파일 이름으로 로컬에 저장됩니다.

관련 도구