lighthouse를 이용해 성능 최적화 하기 (Properly size images, Serve images in next-gen formats, Efficiently encode images)

이번 포스팅에서는 Opportunities 부분의 Properly size images,Serve images in next-gen formats Efficiently encode images 항목을 최적화하는 방법에 대해서 알아보겠습니다.

원인

세 문제는 모두 동일하게 이미지 사이즈를 최적화하라는 의미입니다. 가져오는 이미지의 용량이 현재 보여지는 화면의 용량보다 크기 때문에 과도하게 많은 용량을 가져온다는 의미로 이미지의 사이즈를 줄이라는 뜻으로 받아들이면 됩니다.

해결

화면에 표시되는 사이즈 (예: 120x120)과 실제 이미지의 용량을 일치시켜라!

이미지 용량 확인하는 방법

사이트의 요소검사로 이미지 클릭시 현재 이미지 사이즈와 이미지 용량 확인 가능합니다. (120 × 120 pixels (intrinsic: 1200 × 1200 pixels) → 실제 이미지보다 10배 큰 사이즈로 가져오는 상황, 레티나 디스플레이를 위해 2배(240x240)까지는 넣어줘야한다.)

용량을 어떻게 줄일까 → 이미지는 어디서 오는지 먼저 파악해야함

대부분 api의 response 통해 image url을 가져옵니다. api를 통해 받아오면 어떻게 이미지 줄이나? -> imgix 같은 이미지 cdn을 사용합니다.

image cdn 이란?

서버로 부터 이미지를 불러오면 image를 크게하거나, 줄이거나, 직사각형을 둥글게 만들어주는 회사에 이미지를 의뢰해서 원하는 형태로 이미지를 바꾸는 방법 imgix

어떻게 이미지 줄이나 → image cdn 사용

이미지를 사용자에게 보내기 전에 jpg의 포맷을 바꾸거나, 용량을 줄여서 사용자에게 전송 (1200짜리를 120으로 줄여서 사용자에게 전달) ex → http://cdn.image.com?src=img.src&width=200&height=100

이미지를 가져오는 매체 (unsplash, aws s3)에서 image cdn을 자체 제공해주면 굳이 사제 이미지 cdn을 사용 안해도 됩니다.

image cdn 사용 안하면 → 이미지 불러오는 웹 코드를 최적화

image를 불러오는 컴포넌트에서 최적화를 합니다.

// unsplash에서 제공하는 image cdn 사용
function getParametersForUnsplash({ width, height, quality, format }) {
  return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`;
}

<img
  src={
    props.image +
    getParametersForUnsplash({
      width: 1200,
      height: 1200,
      quality: 80,
      format: "jpg"
    })
  }
  alt="thumbnail"
/>;

또는

// aws s3에서 제공하는 image cdn 사용
https://img.kr/image_${width}x${height}.png

위처럼 이미지 사이즈를 최적화 하면 Properly size images 는 사라집니다!

#react #optimize-performance