Browser-image-compression

이미지 압축을 위한 라이브러리 입니다.
이 라이브러리를 사용하면 서버에 이미지를 업로드하기 전 해상도나 저장 용량을 줄여 서버에 부담을 줄일 수 있습니다.

사용하기

설치

npm install browser-image-compression

전체적인 옵션

const options: Options = { 
  maxSizeMB: number,
  maxWidthOrHeight: number,
  
  onProgress: Function, // 선택사항
  useWebWorker: boolean, // 선택사항
  libURL: string, // 선택사항
  preserveExif: boolean, // 선택사항

  signal: AbortSignal, // 선택사항

  // following options are for advanced users
  maxIteration: number, // 선택사항
  exifOrientation: number, // 선택사항
  fileType: string, // 선택사항
  initialQuality: number, // 선택사항
  alwaysKeepResolution: boolean // 선택사항
}

• maxSizeMB - 저장할 이미지 최대 허용 용량을 정해줍니다.
• maxWidthOrHeight - 옵션을 설정하면 이미지의 최대 너비 또는 높이를 지정할 수 있습니다. 예를 들어, maxWidthOrHeight: 800으로 설정하면 이미지의 너비 또는 높이 중 작은 쪽이 800 픽셀로 조정됩니다.

그 외 세부 옵션들

사용

import imageCompression from "browser-image-compression";

const options = {
  maxSizeMB: 0.5,
  maxWidthOrHeight: 1024
}

const uploadFile = async (event) => {
  const files = e.target.files;
  
  const options = {
    maxSizeMB: 0.5, // 허용하는 최대 사이즈 지정
    maxWidthOrHeight: 1024, // 허용하는 최대 width, height 값 지정
    useWebWorker: true // webworker 사용 여부
  }
  try {
    const compressionFiles = await imageCompression(files, options);
    ....
}

MB 기준이므로 0.5 이면 500KB 정도 됩니다.

웹 워커(Web Worker)
웹 개발에서 사용되는 기술 중 하나로, 브라우저에서 동작하는 JavaScript 코드를 멀티 스레드로 실행할 수 있게 해줍니다. 기본적으로 웹 개발에서는 JavaScript 코드가 한 번에 하나씩 실행되지만, 웹 워커를 사용하면 여러 개의 코드 조각이 동시에 실행될 수 있습니다.
웹 워커를 사용하면 복잡한 작업이나 계산이 많이 필요한 작업을 효율적으로 처리할 수 있습니다. 예를 들어, 큰 데이터를 처리하거나 복잡한 계산을 수행할 때 웹 워커를 사용하면
작업을 분산시켜 성능을 향상시킬 수 있습니다.
이러한 웹 워커는 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데
도움이 됩니다.