GYMMI 프로젝트를 진행하며 이미지관련 고려사항이 생겨 정리해보려 합니당.

이미지관련 고려사항

문제점

이미지는 s3PresignedUrl로 s3의 주소를 받아오고 있고 Image 컴포넌트의 loader를 통해 받아온 경로를 요청하여 이미지를 불러옴. 이미지의 경로만 캐싱되지(useQuery로 인해) 이미지 자체가 캐싱되지 않아 페이지 렌더링시 매번 대량의 이미지를 불러오는 요청이 날라감 → 요청횟수대로 s3 비용이 부과되기에 비용 문제 발생.

-> 캐싱을 적용,.,.

• 지미는 Next/Image 태그를 사용하더라도 위 처럼 loader를 사용하기 때문에 Next Image 태그의 최적화 이점을 가져갈 수 없다. loader를 사용하면 그렇다. 그래서 최적화를 위해 타 최적화 방법을 사용했다.

이미지 크기가 너무 크다. 로딩 시간이 너무 오래걸림. 이미지 최적화가 필요

이미지 크기 압축 → Browser Image Compression

• 이미지를 업로드 할 때 압축시키기
  1. 사진 커뮤니티에 사진 등록
  2. 운동인증 등록을 할 때 사진 등록
  

import imageCompression from 'browser-image-compression';

export const compressingImage = async (
  e: React.ChangeEvent<HTMLInputElement>,
) => {
  const reader = new FileReader();
  const file = e.target.files?.[0];
  if (!file) return;
  const compress = await imageCompression(file, {
    initialQuality: 0.3,
  });

  reader.readAsDataURL(compress);

  console.log('original', Math.ceil(file.size / 1000), 'KB');
  console.log(Math.ceil(compress.size / 1000), 'KB');

  return compress;
};

• 위 코드를 보면 initialQuanlity라고 어느정도로 퀄리티를 낮출지 인데 보는 것 처럼 0.3정도로 작성해줘도 파일 크기를 압도적으로 줄일 수 있고, 사용자가 느끼기에 이미지가 변경됐다고 느끼지 못한다 -> 완전 비슷 함.