[JS] 자바스크립트 이미지 압축 라이브러리

 

brower-image-compression

---

자바스크립트를 사용한 이미지 압축 라이브러리로 brower-image-compression을 사용하면 손쉽게 이미지의 파일 사이즈를 효과적으로 압축할 수 있다. 요즘은 스마트폰 카메라 성능이 날이 갈수록 좋아져 사진 한 장을 찍어도 10MB가 넘어버린다. 사진을 서버로 전송할 때, 서버의 부담을 줄이기 위해서 클라이언트 단에서 사진을 압축해 전송하면 서버의 부담을 크게 줄일 수 있다.

 

browser-image-compression

 

Install

---

 

NPM

> npm i browser-image-compression

 

CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.15/dist/browser-image-compression.js"></script>

 

 

Usage

---

// you should provide one of maxSizeMB, maxWidthOrHeight in the options
const options = { 
  maxSizeMB: number,          // (default: Number.POSITIVE_INFINITY)
  maxWidthOrHeight: number,   // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
                              // but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser.
                              // Please check the Caveat part for details.
  onProgress: Function,       // optional, a function takes one progress argument (percentage from 0 to 100) 
  useWebWorker: boolean,      // optional, use multi-thread web worker, fallback to run in main-thread (default: true)

  // following options are for advanced users
  maxIteration: number,       // optional, max number of iteration to compress the image (default: 10)
  exifOrientation: number,    // optional, see https://stackoverflow.com/a/32490603/10395024
  fileType: string,           // optional, fileType override
  initialQuality: number      // optional, initial quality value between 0 and 1 (default: 1)
}

imageCompression(file: File, options): Promise<File>

 

• maxSizeMB : 지정한 크기만큼 이미지 크기가 초과되지 않는다. (지정한 퀄리티로 알아서 압축하고 싶다면 maxSize: 1로 설정)
• onProgress : 0~100 사이의 숫자로 진행 상황을 넘겨받음 
• initialQuality : 디폴트 값은 1이고 0.5~0.7이 무난

 

Browsers support

---

 

 

Sample

---

좌측 원본 이미지(258KB) / 우측 압축 후 이미지(90KB) Quality : 0.7

 

대략 1년 전에 티스토리 에드센스 블로그를 한창 운영했을 당시 SEO에 신경을 많이 썼는데요. 글을 올릴 때마다 이미지를 첨부할 때마다 이미지를 압축해주는 웹사이트에서 압축 후 업로드했습니다.

 

보통 이런 사이트들은 서버에서 이미지를 업로드받아 압축 후 다시 클라이언트로 전달하는데, 프라이버시에 민감한 이미지일 경우 사용하기 꺼려지기 마련이고 그래서 브라우저 단에서 이미지를 쉽게 압축하고 압축 품질도 좋아 개인적으로 사용하기 위해서 해당 라이브러리를 사용해 직접 리액트로 구현해 보았습니다.

 

 

Tiny Image