[Next.js] next13 - next/image로 이미지 최적화

Components: <Image> | Next.js (nextjs.org)

Components: <Image> | Next.js

 

next/image의 장점 (이미지를 import해서 사용할 경우)

 

import Image from 'next/image'

import 이미지 from './이미지경로.png'

const home = () => {

  return(

    <div>

      <Image src={이미지} alt="설명" alt='이미지' width={118} height={20}/>

    </div>

)}

 

1. webp로 이미지 용량이 최적화 된다.

• 기본 <img>를 사용하면 이미지 type이 jpeg로 로드되는 반면
• next/imge를 사용하면 이미지 tpye이 webp로 도드되어 용량을 훨씬 최적화 할 수 있다. 
• quality 속성을 사용하면 1~100까지 중 얼마나 최적화 시킬지도 결정할 수 있다. (기본 : 75) 

2. lazy loading이 자동으로 적용된다.

• 자동으로 loading="lazy" 속성이 들어가지기 때문에
• 화면에 당장 이미지가 보이지 않는 경우(스크롤 등)에는 이미지를 미리 가져오지 않고,
• 이미지가 필요한 경우에 이미지를 가져오게 해서 네트워크의 낭비를 줄일 수 있다.  

3. blur이미지를 자동으로 생성한다.

• placeholder='blur'를 이용하면 이미지와 같은 크기와 색상의 배경이 이미지가 로드되는 동안 자동으로 생성된다.
• 이를 통해 이미지가 로딩중임을 미리 사용자에게 알려줄 수 있다.
• 참고로 placeholder가 적용된걸 확인하고 싶으면 production 모드로 실행해야 한다.

4. layout shift 현상을 막아준다.

• next에서는 미리 이미지의 크기를 알고, 이미지가 로드될 공간을 마련해 놓는다.
• 따라서 나중에 이미지가 로드되면서 레이아웃이 밀리는 layout shift 현상을 막을 수 있다. 

 

 

next/image에서 다양한 최적화가 가능한 이유

=> 소스파일을 static하게 import했기 때문이다. 

next는 빌드 타임에 이미지의 정보를 알 수 있게 되고, 이미지의 높이와 너비 등에 따라 이미지를 미리 최적화 할 수 있다.

 

 

 

이미지를 외부링크로 가져오는 경우(src를 string으로 입력한 경우)

 

import Link from "next/link";

const home = () => {

  return (

      <div>

          <Image src='이미지경로' alt='이미지' width={118} height={20}/>

      </div>

  );

}

이 경우에는 서버에서 이미지의 정보를 미리 알 수 없기 때문에 width와 height를 꼭 지정해주어야 한다.

그래야 next에서 크기에 맞게 이미지를 최적화 할 수 있다.

 

여기서 만약 크기가 어떻게 될지 알 수 없는 상황이라면 fill 속성을 사용하면 된다.

fill을 사용하면 이미지의 속성이 부모에 의해 결정된다.

부모의 포지션을 relative/absolute/fixed 로 설정하고 사이즈를 설정하면 그에 맞는 크기로 사진이 채워진다.

+ 여기서 부모에 따라 사진이 찌그러지는 것을 막고 싶다면 objectFit : 'cover' 로 스타일을 지정하면 이미지의 비율은 유지하면서 잘린 이미지를 얻을 수 있다.

 

 

Error: Invalid src prop 에러가 뜨는 경우

해당 에러가 뜨는 이유는 보안을 위해 허용된 도메인만 접근할 수 있도록 막아져 있기 때문이다.

이럴 때는 next.config.js 파일에 들어가서 아래와 같이 원하는 도메인을 추가하면 된다.

(https://를 제거한 도메인만 써야한다.)

 

const nextConfig = {

  reactStrictMode: ...,

  images:{

    domains: ['원하는 도메인'],

  }

}

더 자세한 path를 추가하고 싶으면 remotePatterns로 대신하면 된다.

 

Components: <Image> (Legacy) | Next.js (nextjs.org)

Components: <Image> (Legacy) | Next.js

 

 

Next12와 Next13 image의 차이점

Next12에서는 <Image>의 바깥에 따로 <span>태그가 추가되어 스타일링이 되었기 때문에 사용성이 좋지 않았다.

Next13으로 넘어오면서 <span>태그 없이 <Image>만 단독으로 사용된다.