[react] 이미지 최적화하기

진행중인 프로젝트는 반려동물의 기록과 사진 공유가 주된 기능인 만큼, 이미지 최적화 작업이 중요하다고 생각했다.

번들사이즈를 열심히 줄여도 KB단위지만.. 이미지는 단위부터 MB이므로, 이미지 최적화는 필수이다.

 

Next.js의 이미지 최적화

Next.js는 next/image를 통해 기본적으로 다음과 같은 이미지 최적화 작업을 수행해준다.

But, 리액트는 이와 같은 이미지 최적화를 자동으로 처리해주지 않으므로, 직접 최적화 작업을 수행해야한다...!🫣

 

 

• 자동 resizing
• Webp 같은 최신 이미지 포맷 지원
• Lazy Loading로 페이지 로딩 속도 향상
• CDN 지원

이미지 최적화를 위한 여러가지 방법들을 공부해면서, 적용해보았다.

 

 

1. browser-image-compression 활용한 이미지 폭, 타입 정의

페이지에 사용하는 이미지는 데스크탑 버전이여도, 보통 1000px이 넘지 않는다. 특히 모바일(14 Promax 기준) 버전에서 post의 이미지가 400px로도 충분하다.

하지만, 핸드폰으로 찍은 사진이 가로폭이 거의 3000px인것을 확인할 수 있다.

 

 

4032x3024 : 2.7MB 👉🏻 800x600: 133KB

이미지 크기만 줄여도, 이와 같이 20배 정도의 용량이 감소할 수 있다.

 

 

 

최적화된 이미지 포맷

webp는 구글이 개발한 이미지 포맷으로, 압축 효율이 높아 lighthouse도 webp 포맷을 추천하고 있다.

 

👉🏻 browser-image-compression 라이브러리를 활용해, 이미지 압축, 폭, 파일 타입을 정의할 수 있다.

 

const options = {
        maxSizeMB: 1,
        maxWidthOrHeight: 1920,
        useWebWorker: true,
        fileType: "image/webp",
      };

 

 if (refPath === "users") {
          const compressedImage = await compressImage(image, options);
          const imageRef = ref(storage, `${refPath}/${userId}`);
          return await uploadImage(imageRef, compressedImage);
 } else if (refPath === "posts") {
           const largeImageOptions = { ...options, maxWidthOrHeight: 1080 };
          const smallImageOptions = { ...options, maxWidthOrHeight: 480 };

 

user profile 이미지의 경우, maxWidthOrHeight 300px값으로 정의하고, 모바일과 데스크탑에서 사용할 용도로 두가지 사이즈 버전으로 이미지를 480, 1080 사이즈로 지정해주었다.

 

 

 

1.8MB의 png파일 이미지를 업로드해보았다.

 

 

1.8MB 👉🏻 255kB로 85% 감소된것을 확인할 수 있다.

 

 

2. width, height 값 지정으로, Reflow를 방지

고정된 사이즈의 이미지의 경우엔 width, height를 정의하고, 상위 요소에 따라 유동적으로 크기를 변화하는 반응형 이미지는 aspect-ratio(가로,세로 비율)를 지정하였다.

이렇게 지정해두면, 브라우저가 처음에 크기를 결정할 수 있어 이미지 공간 할당을 미리 예약하는것이 가능해지기 때문에, 이미지 로딩완료 후, 텍스트가 밀리는 Reflow같은 현상을 방지할 수 있다.

  {post.images && post.images.length > 0 && (
          <div className="flex items-center justify-center aspect-w-1 aspect-h-1">
            <div className="w-full h-full overflow-hidden">
              <ImageSwiper images={post.images} />
            </div>
          </div>
        )}

 

 

3. 여러 버전(type, size)의 이미지 제공

1) File Type

 

<picture> 요소 안에 를 통해 이미지의 다른 형식과 우선순위를 지정하는 방법

👉🏻 사용자가 업로드하는 profile, post 이미지를 클라이언트 측에서 webp 형식으로 변환해 저장하고 Firebase Storage에 업로드후, 제공하고 있기 때문에, picture는 적용하지 않았다.

 

2) File Size

srcset과 sizes 속성을 사용해 반응형 이미지를 제공할 수 있다.

 

브라우저가 화면 크기와 해상도에 따라 적합한 이미지를 선택할 수 있기 때문에, 이미지 로딩 성능과 사용자 경험 개선이 가능하다.

Large Size

 

Small Size

 

👉🏻 데스크탑일때 Large 버전, 모바일일때, Small 버전 이미지의 크기가 적용되는것을 확인할 수 있었다.

Large (161kB), small (78kB)로 약 2배의 파일 크기가 차이가 발생한다는 점을 확인할 수 있었다.

 

const largeImageRef = ref(
  storage,
  `${refPath}/${userId}/${currentTime}_large_${image.name}`
);
const smallImageRef = ref(
  storage,
  `${refPath}/${userId}/${currentTime}_small_${image.name}`
);
const originalImageRef = ref(
  storage,
  `${refPath}/${userId}/${currentTime}_${image.name}`
);

const [largeImageUrl, smallImageUrl, originalImageUrl] = await Promise.all([
  uploadImage(largeImageRef, compressedLargeImage),
  uploadImage(smallImageRef, compressedSmallImage),
  uploadImage(originalImageRef, image),
]);

return {
  original: originalImageUrl,
  small: smallImageUrl,
  large: largeImageUrl,
};

 

이처럼 original, small, large 3가지 버전의 이미지를 생성하여, post의 images 필드에 넣어주었다.

 

<img
  src={image.original}
  srcSet={`${image.small} 480w, ${image.large} 1080w`}
  sizes="(max-width: 768px) 480px, 1080px"
  alt={`image_${index + 1}`}
  className="object-cover w-full h-full overflow-hidden rounded-md"
/>;

👉🏻 srcSet, sizes 적용

 

 

4. lazy loading 적용

페이지를 로드할때, 모든 이미지를 로드하는 것이 아니라 중요하지 않거나 당장 필요 없는 자원의경우 서버에 요청을 미루고 이미지가 실제로 보일 때 요청받는 방법

 

❗️ HTML내 첫 번째 이미지든 1000번째 이미지든, 또는 뷰포트 밖에 있든 상관없이 만약 브라우저가 src 속성을 갖는다면 이미지를 무조건 로드하기 때문에, 적절한 상황에 이를 사용하면 최적화에 도움이 된다.

 

import React, { useState } from "react";
import { useInView } from "react-intersection-observer";

interface PlaceholderImageProps {
  src: string;
  alt: string;
  loading?: "eager" | "lazy";
  className?: string;
  srcSet?: string;
  sizes?: string;
}

const PlaceholderImage: React.FC<PlaceholderImageProps> = ({
  src,
  alt,
  loading = "eager",
  className = "",
  srcSet,
  sizes,
}) => {
  const [loaded, setLoaded] = useState(false);

  const { ref, inView } = useInView({
    triggerOnce: true,
    threshold: 0.5,
  });

  const handleLoad = () => {
    setLoaded(true);
  };
  const LoadedImage = loading === "eager" || inView;

  return (
    <div ref={ref} className={`relative ${className} aspect-w-1 aspect-h-1`}>
      <div
        className={`absolute top-0 left-0 w-full h-full bg-gray-100 transition-opacity duration-300 rounded-md ${
          loaded ? "opacity-0" : "opacity-100"
        }`}
      ></div>
      {LoadedImage && (
        <img
          src={src}
          srcSet={srcSet}
          sizes={sizes}
          alt={alt}
          onLoad={handleLoad}
          className={`absolute top-0 left-0 w-full h-full object-cover transition-opacity duration-300 rounded-md ${
            loaded ? "opacity-100" : "opacity-0"
          }`}
          loading={loading}
        />
      )}
    </div>
  );
};

export default PlaceholderImage;

 

<PlaceholderImage
src={post.images[0].small}
srcSet={`${post.images[0].small} 400w, ${post.images[0].large} 1080w`}
sizes="(max-width: 600px) 480px, 1080px"
className="object-cover w-full h-full "
alt={`${post.title} img`}
loading="lazy"
/>;

 

 

검색 결과로 postCardList에 해당하는 이미지들에 대해 지연로딩을 적용해, 뷰포트에 보이는 이미지에 대해서만 로딩을 하는 방식으로 로드시간을 단축하였다.

 

 

그 외의 최적화 기법

---

 

CSS Sprite 기법 사용

여러개의 작은 이미지를 하나의 큰 이미지 파일로 결합해, CSS를 사용해 해당 이미지의 특정한 부분을 보여주는 기법으로, HTTP 요청과 로딩속도를 향상시킬 수 있다.

아이콘, 버튼같이 같은 이미지들을 쓸 때마다 여러 이미지를 불러오는것이닌, 한 이미지로 통합해 배경 이미지로 만들어 불러오고, background-position 값을 조절해 원하는 이미지를 가져오는 방식이다.

👉🏻 lucide 아이콘을 사용하고 있어 크게 필요성을 느끼지 못해, 적용하지 않았다.

 

 

Image CDNs 사용

👉🏻 Firebase Storage 대신 Cloudinary 사용 하는 방식으로 변경하면 좋을것 같다.

 

 

 

 

 

 

BEFORE

 

 

 

 

 

AFTER

 

 

 

 

📎 CLS 점수 개선 포스팅

 

 

https://s-organization-335.gitbook.io/trouble

게시물 이미지 CLS 개선 | 트러블 슈팅