🖼️ 이미지 리사이징으로 성능 최적화 해보기

👩‍💻 사용 배경

사용자가 이미지를 등록하는 과정에서 이미지 크기를 압축할 수 있다면, 성능을 최적화 시키는 과정 중 하나가 되지 않을까? 하는 생각에 사용하게 되었다.

✅ 라이브러리 선택 : browser-image-compression

broser-image-compression은 이미지 압축을 위해 웹 브라우저에서 실행되는 javascript 모듈이다. 이미지 리사이징 라이브러리 중 사용자가 가장 많았고, 정보가 많았기 때문에 사용하게 되었다.

⭐ 사용해보기

사용법은 어렵지 않다. 우선, 공식 사이트에 있는 코드를 따라가보자!

// 사용자가 이미지를 등록하는 input 컴포넌트 
<input type="file" accept="image/*" onchange="handleImageUpload(event);">

// input 컴포넌트의 onChange에 등록된 함수 만들기 ⭐
async function handleImageUpload(event) {

  const imageFile = event.target.files[0]; 
  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true // blob 파일인지 확인 
  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`); // 이미지 파일의 크기를 메가바이트 단위로 로그에 출력 

// 옵션 설정 
  const options = {
    maxSizeMB: 1, // 압축 후의 최대 파일 크기 
    maxWidthOrHeight: 1920, // 이미지의 최대 너비 또는 높이
    useWebWorker: true, // 웹 워커를 사용해 이미지 압축을 비동기로 처리 (true일 경우)
  }
  try {
    const compressedFile = await imageCompression(imageFile, options); 
    // imageCompression을 호출해 이미 압축, 압축된 이미지 파일 반환 -> compressedFile에 넣어줌 
    console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

    await uploadToServer(compressedFile); // uploadToServer는 각 사용자들이 업로드 하는 함수 로직이다. 
  } catch (error) {
    console.log(error);
  }

}

😎 이제, 내 코드에 적용해보자 !

const onChangeImage = async e => {
		const files = e.target.files;

		const updatedImages = [...imageArr];
		const updatedDBImages = [...imageDBArr];

		const options = {
			maxSizeMB: 1,
			maxWidthOrHeight: 1920,
			useWebWorker: true,
		};

		for (let i = 0; i < files.length; i++) {
			const file = files[i];
			try {
				const compressedFile = await imageCompression(file, options);
                // 공식 문서로 치면, uploadToServer와 같은 역할을 하는 
				await updatedImages.push(URL.createObjectURL(compressedFile)); // 미리보기
				await updatedDBImages.push(compressedFile); // DB용
				console.log(compressedFile);
			} catch (error) {
				console.log(error);
			}
		}

		setImageArr(updatedImages.slice(0, 5));
		setImageDBArr(updatedDBImages.slice(0, 5));
	};

실제로 이미지 사이즈가 줄어들게 된 것을 확인할 수 있었다.

이미지 업로드 용량을 제한하고 있는 곳에서 사용하면 더 좋은 효과를 볼 것이라 생각한다.✨