LOOKY 이미지 최적화

Looky 프로젝트는 페이지에 사용자들이 올린 수많은 이미지들이 표시된다.

 

웹 페이지에서 이미지는 가장 큰 용량을 차지하는 요소 중 하나이기에 이미지 크기를 최적화하면 로드 해야 할 리소스 용량을 절감하여 성능 개선이 가능할 것이다.

이미지 최적화 방법 ?

차세대 이미지 형식 사용

차세대 이미지 형식인 WebP와 AVIF를 사용하면 이미지 품질을 유지하면서 파일 크기를 크게 줄일 수 있다.

• WebP
  • 구글에서 개발한 이미지 형식으로, 손실 및 무손실 압축을 모두 지원하며 JPEG나 PNG보다 뛰어난 압축 효율을 제공.
  • cwebp 커맨드라인 인코더를 사용하거나 Squoosh (GoogleChromeLabs 의 이미지 압축 웹앱) 를 통해 인코딩을 가능.

이미지 Lazy Loading

사용자가 실제로 이미지를 볼 때까지 로딩을 지연시켜 초기 로딩 속도를 향상.

• loading 속성 사용: <img> 태그에 loading="lazy"를 추가하여 브라우저 기본 지연 로딩을 활성화. (중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으며 웹페이지 로딩 퍼포먼스를 최적화하는 기술 - 이미지 태그가 뷰포트 내에 위치하게 되었을때 load를 하는 것을 의미 )
• JavaScript 라이브러리 활용: Intersection Observer API 등을 사용하여 커스텀 지연 로딩 기능을 구현.

 

Looky 프로젝트는 사용자가 "업로드" 한 이미지들이 화면에 가장 많이 브라우저에 뿌려지기 때문에 사용자들이 이미지를 업로드하는 파일들을 (보편적으로 png,jpg) webp로 이미지를 압축하여 파이어베이스 스토리지에 저장시키고 받아오는 형식으로 Firebase 용량 이슈와 함께 개선하였다.

 

 + 기본적으로 프로젝트에서 제공되는 png, jpg 파일들은 squoosh를 통해 webp로 변환하여 뿌렸다 !

 

browser-image-compression 라이브러리 사용

- 클라이언트에서 이미지 압축을 위한 자바스크립트 라이브러리 - 프로그램 서버에 업로드하기 전 해상도나 저장 용량을 줄여 대역폭 절약

- 브라우저에서 이미지를 처리하므로 서버 리소스가 필요하지 않아 리소스를 절약

- 사용자 경험을 향상

import imageCompression from "browser-image-compression";

 

옵션

const options: Options = { 
  maxSizeMB: number,
  maxWidthOrHeight: number,
 
  // . . .

  fileType: string, // 선택사항

}

 

- maxSizeMB: 저장할 이미지 최대 허용 용량
- maxWidthOrHeight: 압축 파일은 너비 또는 높이가 해당 옵션보다 작은 지점까지 비율로 축소된다.

- fileType: (선택사항) fileType 재정의

 

ImageCompression 함수 사용 (비동기)- 비동기 함수이므로 async await 사용

import imageCompression from "browser-image-compression";

export const useImageCompressor = () => {
  const compressImage = async (file: File) => {
    const options = {
      maxSizeMB: 1, // 1MB 이하로 압축
      maxWidthOrHeight: 800, // 최대 800px로 조정
      fileType: "image/webp", // webp로 변환
    };

    try {
      return await imageCompression(file, options);
    } catch (error) {
      return file;
    }
  };

  return { compressImage };
};

 

 

압축 확인

파일 업로드 후 FireStore 스토리지 확인 결과

동일한 이미지를 업로드 하였을 때 기존 용량 615바이트에서 116바이트로 확실히 줄어듬을 확인할 수 있다.

 

 

Refector/43 신규 기능 이미지 최적화 by Injaeeee · Pull Request #44 · Injaeeee/looky (github.com)

Refector/43 신규 기능 이미지 최적화 by Injaeeee · Pull Request #44 · Injaeeee/looky