Deep Dive Series/Image Resizing
[JavaScript] 이미지 리사이징, 이미지 용량 줄이기 (2) (feat. 어떤 기준으로 리사이징해야할까?)
이전 포스트 '[JavaScript] 이미지 리사이징, 이미지 용량 줄이기 (1) (feat. HTML5 canvas)'를 읽고 오시면 좋습니다! Canvas의 리사이징 5575 x 3923, 2.37MB 이미지가 있다고 가정해보겠습니다. 한 번 다운로드 시에는 무리가 없는 이미지 용량으로 보이지만 수십 번 이미지를 다운로드하게 되면 더 많은 리소스가 요구됩니다. 해당 리소스를 줄이기 위하여 이미지 리사이징을 시도해보겠습니다. Canvas는 가로, 세로 px를 정하고 그 위에 이미지를 그리는 방식이기 때문에 px 기준으로 이미지가 리사이징됩니다. 보통 최대 px를 기준으로 비례하여 이미지를 리사이징합니다. 예를 들어, 위 이미지를 최대 px 400px기준으로 이미지를 리사이징한다고 가정하고 코드를 작성해..
