20230324 TIL - 사진 리사이징

사진을 리사이징하려면 sharp라이브러리를 사용해서 파일을 리사이징 하자

 

리사이징할 때 주의해야한다

사진의 종횡비를 유지하면서 리사이징 해야한다

원본 보다 작은 사이즈로 리사이징 해야한다

이미지 크기를 줄일 때 파일 사이즈도 줄일 수 있다

파일 사이즈가 크면 웹사이트 로딩 속도에 영향을 준다 적절한 크기로 조정한다

리사이징을 적용해보자

필요한 패키지를 설치하자

// 패키지를 설치해야한다
npm install sharp --save

npm install @types/sharp --save-dev

async putObject(image: any) {
    const sharpImage = sharp(image.path);
    let {width, height} = await sharpImage.metadata();

    if (_.isUndefined(width)) {
      width = 1;
    }
    if (_.isUndefined(height)) {
      height = 1;
    }
    const maxWidth = 800;
    const maxHeight = 600;
    const ratio = Math.min(maxWidth / width, maxHeight / height);
    
    await this.client.send(
      new PutObjectCommand({
        Bucket: this.bucket,
        Key: image.filename,
        Body: await sharpImage.resize(Math.round(width * ratio), Math.round(height * ratio)).toBuffer(),
        ContentType: image.mimetype,
      })
    );

 

리사이징 전

리사이징 후

리사이징을 적용하면 size가 반토막이 난다