[Node.js] sharp를 이용한 이미지 리사이징

프로필 사진의 변경을 담당하는 API에서 이미지를 그대로 받아와 저장소에 저장하기에는 용량이 너무 크다는 무리가 있었고 가지각색의 용량을 가진 이미지들을 반환해주는데 속도를 보장할 수 없었다. 나는 프로필 이미지를 받으면 프로필 상에 작게 표시해주고 크게 보여줄 일은 없기 때문에 이미지를 압축해 저장소에 저장을 하는 방법을 생각해보았다.

 

sharp는 이를 도와주는 라이브러리이다.

나는 sharp로 이미지 크기를 줄인 후 multer로 저장소에 저장하는 방식으로 구현을 했다.

 

sharp를 설치해준다.

npm install sharp
// 혹은 (yarn을 사용한다면)
yarn add sharp

다음은 sharp를 import

const sharp = require("sharp")

 

형식은 아래와 같이 사용해주면 된다.

 

Callback

sharp(inputBuffer)
  .resize(320, 240)
  .toFile('output.webp', (err, info) => { ... });

Promise

sharp('input.jpg')
  .rotate()
  .resize(200)
  .jpeg({ mozjpeg: true })
  .toBuffer()
  .then( data => { ... })
  .catch( err => { ... });

Async/Await

const semiTransparentRedPng = await sharp({
  create: {
    width: 48,
    height: 48,
    channels: 4,
    background: { r: 255, g: 0, b: 0, alpha: 0.5 }
  }
})
  .png()
  .toBuffer();

 

결과적으로 나는 이렇게 사용했다.

withMetadata()의 경우 이미지 크기를 변경하면 exif 데이터가 손실되는데 이를 방지하기 위해 사용되었다. 이미지의 exif 데이터에는 이미지의 위치 정보, 방향 등의 데이터가 들어있다. 만약 손실된다면 이미지가 마음대로 돌아갈 가능성이 있다.

이후 writerFile()을 이용해 이미지를 덮어 씌어준다.

위 파일이 압축 전, 아래 파일이 압축 후이다. 결과를 보면 이미지의 크기가 매우 효과적으로 줄어든 것을 확인할 수 있다. 이렇게에 저장소의 자원도 지킬뿐더러 반환 속도도 올릴 수 있는 장점을 가지게 되었다.

 

sharp는 이미지 크기 조정뿐만 아니라 회전, 이진화, 포맷 변경 등 매우 다양한 기능을 제공해준다.

더욱 자세한 내용은 아래를 참조하자.

sharp