browser-image-compression 란?
browser-image-compression 은 이미지 압축을 위한 자바스크립트 모듈이다.
이 모듈을 사용하면 프로그램 서버에 업로드하기 전 해상도나 저장 용량을 줄여 대역폭을 절약할 수 있다.
Firebase을 사용하는데, 서버에 전송하기 위한 데이터를 최적화하기 위해 해당 라이브러리를 사용하였다.
해당 라이브러리의 특징은 다음과 같이 정리할 수 있다.
파일의 크기를 줄이기 위해 이미지의 품질을 조정할 수 있다. (사용자가 원하는 크기로)
다양한 이미지 형식을 지원한다. JPEG, PNG, GIF 등의 형식을 지원
브라우저에서 직접 이미지를 압축하므로, 서버 측에서 이미지를 압축하는 것에 비해 데이터 사용량을 줄일 수 있다.
먼저 browser-image-compression을 설치해준다.
npm install browser-image-compression
그 다음, 이미지를 압축하고 업로드하는 코드를
onFileChange 함수에 추가한다.import imageCompression from 'browser-image-compression'; const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { const { files } = e.target; if (files && files[0].size > maxSize) { alert("업로드 이미지 최대 크기는 2MB입니다"); return; } if (files && files.length === 1) { try { const options = { maxSizeMB: 1, // (옵션) 최대 파일 크기 (MB 단위) maxWidthOrHeight: 1920, // (옵션) 이미지의 최대 너비 또는 높이 useWebWorker: true, // (옵션) Web Worker를 사용할 것인지 여부 }; const compressedFile = await imageCompression(files[0], options); // 이미지 압축 setFile(compressedFile); // 압축된 파일을 상태에 저장 } catch (error) { console.error(error); } } };
해당 파일을
browser-image-compression 라이브러리를 사용하여 압축. 압축 옵션은 필요에 따라 조정할 수 있음, 여기서 최대 파일 크기를 1MB, 이미지의 최대 너비 또는 높이를 1920px로 설정.
useWebWorker 옵션을 true로 설정하여 이미지 압축 작업을 Web Worker에서 수행하도록 하여 메인 스레드의 성능에 영향을 덜 주도록 함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 : 압축 파일은 너비 또는 높이가 해당 옵션보다 작은 지점까지 비율로 축소된다.
➡️ 옵션에서 maxSizeMB 또는 maxWidthOrHeight 중 하나를 제공해야한다.
각 브라우저에서 지원하는 최대 캔버스 크기보다 작게 자동으로 크기를 줄인다.
- onProgress : (선택사항) 하나의 진행률 인수를 사용한다.(0~100까지 백분율)
- useWebWorker : (선택사항) 다중 스레드 웹 작업자 사용, 기본 스레드에서 실행하도록 폴백(기본값 : true)
- libURL : (선택사항) Web Worker에서 스크립트를 가져오기 위한 이 라이브러리의 libURL
- signal : (선택사항) 압축을 중단/취소 하기 위함
다음은 고급 사용자를 위한 옵션
- maxIteration : (선택사항) 이미지를 압축하기 위한 최대 반복 횟수(기본값: 10)
- fileType : (선택사항) fileType 재정의(예, image/jpeg', 'image/png'(기본값: file.type))
- initialQuality : (선택사항) 0과 1 사이의 초기 품질 값(기본값: 1)
- alwaysKeepResolution : (선택사항) 품질만 낮추고 너비와 높이는 항상 유지(기본값: false)