속도저하 성능개선하기! [이미지 리사이징]

현재 만들고 있는 사이트의 모습입니다. 사이트 특성상 사진 업로드가 많습니다. 

사진을 대용량으로 많이 받아오다보니 속도가 저하되는 이슈가 발생하였습니다.

 

 

 

const onChangeImage = async e => {
		const imageFile = e.target.files[0];
		const options = {
			maxSizeMB: 1,
			maxWidthOrHeight: 1920, 
			useWebWorker: true, 
		};
		try {
			const compressedFile = await imageCompression(imageFile, options);
			setcommunityImage(compressedFile);
		} catch (error) {
			console.log(error);
		}

		let reader = new FileReader();
		if (imageFile) {
			reader.readAsDataURL(imageFile);
		}
		reader.onloadend = () => {
			const previewImgUrl = reader.result;
			if (previewImgUrl) {
				setImageSrc(previewImgUrl);
			}
		};
	};

imageCompression을 활용해 용량을 줄여 1mb이하로 줄여 받을수있게 이미지를 리사이징하였습니다.

 

▶️ imageCompression 활용법 공식문서 참조

https://www.npmjs.com/package/browser-image-compression

browser-image-compression

 

 

 

기존의 4.4MB사진에서 930KB로 파일크기가 줄어들었으며

 

서버에 저장시에도  2MB ⇒ 604.8KB로 줄어들어 저장이되어 서버의 부담을 줄일 수 있었습니다.