[최적화] 이미지

이미지 최적화가 필요한 이유

홈페이지에서 가장 많은 로딩 시간을 차지하는 요소는 이미지입니다. 이미지 최적화는 페이지 로딩을 단축시켜 웹 성능을 향상시키고, 사용자 경험을 개선할 수 있습니다.

라이트하우스를 사용하여 사이트를 검사하면 이미지 최적화 방법을 제안해준다…

그럼 라이트 하우스에서 알려준 방법대로 하나씩 최적화를 적용해보자.

이미지를 최적화하는 방법

1. 이미지 미리 로드
2. 차세대 형식의 이미지 사용
3. Lazy Loading 적용

1. 이미지 미리 로드

특정 이미지를 미리 로드하면 최대 콘텐츠가 포함된 페인트 시간을 줄일 수 있습니다.

HTML <link> 태그를 사용하여 중요한 이미지를 미리 로드할 수 있습니다.

<link rel="preload" href="/path/to/image.jpg" as="image">

2. 차세대 형식의 이미지 사용 / 크기 설정

browser-image-compression 는 브라우저에서 이미지 파일을 압축하고 변환할 수 있는 라이브러리입니다. 해당 라이브러리를 사용해서 이미지 크기를 줄이고 WebP 형식으로 변환해 봅시다.

차세대 형식의 이미지 - WebP란?

WebP는 구글에서 개발한 이미지 파일 포맷으로, 동일한 이미지 품질이라도 WebP 파일의 크기가 다른 포맷(GIF, JPG, PNG)의 파일에 비해 훨씬 작기 때문에 이미지 로딩 속도를 크게 단축시킬 수 있습니다.

설치

npm install browser-image-compression

export const uploadProductImage = async (file: File): Promise<string> => {
  // 이미지 압축 및 리사이징 옵션
  const options = {
    maxSizeMB: 1, // 최대 파일 크기 (MB)
    maxWidthOrHeight: 300, // 최대 너비 또는 높이 (px)
    useWebWorker: true, // 웹 워커 사용 여부
    fileType: 'image/webp' // 변환할 파일 형식
  };

  // 이미지 압축 및 리사이징
  const compressedFile = await imageCompression(file, options);

  // 새로운 파일 이름 생성
  const newFileName = `${uuid()}-${file.name.split('.')[0]}.webp`;
  const storageRef = ref(storage, `products/${newFileName}`);

  // Firebase Storage에 업로드
  await uploadBytes(storageRef, compressedFile);
  return getDownloadURL(storageRef);
};

• 웹 워커 : JavaScript에서 멀티스레딩을 지원하는 기술

옵션을 설정한 후 imageCompression 함수를 사용하여 이미지 형식을 변환하고 이미지 사이즈를 변환할 수 있습니다.

여기서 파일크기가 maxWidthOrHeight의 크기보다 크다면 자동으로 maxWidthOrHeight 값으로 리사이징 해줍니다.

변환한 이미지와 원본 이미지를 비교해보면 790KB에서 37KB까지 용량이 줄어든 것을 확인할 수 있습니다.

+) WebP를 지원하지 않는 브라우저에서도 호환성을 유지하기 위해 <picture> 태그를 사용할 수 있습니다.

<picture>
  <source srcset="/images/your-image.webp" type="image/webp">
  <img src="images/your-image.jpg" alt="Description">
</picture>

3. Lazy Loading 적용

HTML의 <img> 태그의 loading 속성을 사용하여 화면 밖에 있는 이미지의 로딩을 사용자가 가까이 스크롤할 때까지 지연시킬 수 있습니다.

이렇게 설정하면 중요하지 않는 (첫화면에 보여지지 않는) 리소스가 필요한 경우에만 로드되어 초기 로딩 속도를 증가시킬 수 있습니다.

<img src="image.jpg" loading="lazy" alt="Description">

참고

https://developer.mozilla.org/ko/docs/Web/Performance/Lazy_loading

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload#including_a_mime_type