# 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 (opens new window)

# 어떻게 이미지 줄이나 → 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
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 5/14/2022, 8:52:31 AM