문제 분석

크롬 개발자도구 → [LightHouse] 클릭 → [Analyze] 클릭

Untitled

해결책

이미지를 적절한 사이즈로 압축하여 사용하기

  1. 자체 Image CDN(Image Processing Content Delivery Network)을 이용
  2. unsplash에서 자체 제공하는 image cdn을 이용

    1. getParametersForUnsplash(width , height, quality, format) 함수를 선언

      function App() {
  // unsplash에서 제공하는 image cdn 이용
  function getParametersForUnsplash({ width, height, quality, format }) {
    return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`;
  }
  
  return (
		// ...
    <img
      src={
        image.url +
        getParametersForUnsplash({
          width: 240,
          height: 240,
          quality: 80,
          format: 'jpg',
        })
      }
      alt="thumbnail"
    />
		// ...
  );
}

    2. 이미지를 불러올 때 URL 뒤에 해당 함수와 함께 원하는 크기 값을 지정

Untitled

Unsplash API Documentation | Free HD Photo API | Unsplash

<aside> 💡 Tip. 레티나 디스플레이를 감안하여, 렌더링되는 픽셀보다 4배의 너비(가로x2, 세로x2)로 이미지 크기를 설정

</aside>

개선 후

BEFORE

Untitled

AFTER

Untitled

Untitled