FrontendMay 14, 20231 min readUpdated May 15, 2023

Next.js Image Optimization 사용하여 이미지 로딩시간 단축

빠른 웹사이트의 퍼포먼스를 위해 이미지를 레이아웃에 맞게 사이즈 맞추기

Author

Younggun Park

Frontend engineer and builder · Seoul, South Korea

I'm building Vision AI products at P2ACH AI, writing about frontend systems, AI tooling, and the quiet parts of shipping.

TL;DR

빠른 웹사이트의 퍼포먼스를 위해 이미지를 레이아웃에 맞게 사이즈 맞추기

On this page

Image Optimization?

프론트엔드의 핵심은 단연 최적화일 것이다. 빠른 웹사이트의 퍼포먼스를 위해 이미지를 레이아웃에 맞게 사이즈를 맞출 필요가 있었다.

Next.js에서는 Image Optimization을 기본적으로 제공한다.

https://nextjs.org/docs/pages/api-reference/components/image

먼저, S3를 기반으로한 이미지 저장소를 관리하는 백엔드에 요청해서 Lamda로 https://example.com/${src}?w=${width}&q=${quality || 75} 형식의 파라미터를 사용할 수 있게 요청했다.

ImageLoaderFile을 구성하여 이미지의 모든 요청에 해당 파라미터를 사용하게 했다.

TypeScript

import { ImageLoaderProps } from 'next/image';

import { NEXT_PUBLIC_MEDIA_STORAGE_URL } from '@/constant/env';

const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
  if (!src.startsWith('http')) {
    return `${NEXT_PUBLIC_MEDIA_STORAGE_URL}/${src}?w=${width}&q=${
      quality || 80
    }&f=webp`;
  } else {
    return `${src}`;
  }
};

export default imageLoader;

이미지 호출 부분에서는 미리 그 이미지의 사이즈를 알려줘, Optimization이 가능하도록 선언한다.

TypeScript

{artwork.thumbnail.mediaType === 'image' ? (
     artwork.thumbnail.mediaUrl !== 'string' && (
           <Image
                src={artwork.thumbnail.mediaUrl}
                alt={artwork.title}
                width={300}
                height={300}
                sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, (max-width: 1600px) 33.3vw, 25vw'
          />
      )
...

size Props에서 화면 크기에 따라 vw를 구분하였는데, 이는 사용하는 ResponsiveMansory의 breakpoint에 따른 columns를 계산한 것이다.

TypeScript

<ResponsiveMasonry
          columnsCountBreakPoints={{
            400: 1,
            768: 2,
            1024: 3,
            1600: 4,
          }}
        >

결과

(뭔가 문제가 있나보다 LCP 해결이 필요할듯!)

추가적인 사항은 위에 기재한 Next.js 공식문서를 참고하자!

FAQ

Common follow-up questions

이 글의 핵심은 무엇인가요?: 빠른 웹사이트의 퍼포먼스를 위해 이미지를 레이아웃에 맞게 사이즈 맞추기
실무적으로 먼저 볼 포인트는 무엇인가요?: 프론트엔드의 핵심은 단연 최적화일 것이다. 빠른 웹사이트의 퍼포먼스를 위해 이미지를 레이아웃에 맞게 사이즈를 맞출 필요가 있었다.

Next.js Image Optimization 사용하여 이미지 로딩시간 단축

Image Optimization?

결과

Common follow-up questions

Related posts