Next.js Image 알아보기

Next Image

Next Image의 사용법

• next에서 기본적으로 제공하는 next/image에서 import 하여 사용합니다.

import Image from 'next/image'

<Image
  src={}
  alt=''
/>

---

Next Image의 특징

1. 서버에서 자동으로 webp 형식으로 변환해주어서 용량이 기존 img 태그보다 더 작습니다. (이미지 자동 최적화)
2. loading=”lazy” 속성이 자동으로 들어가 있습니다. 이는 페이지 로드시 이미지를 무조건적으로 요청해서 다운받는 것이 아닌, 이미지가 스크롤 저 밑에있을 경우에는 스크롤이 특정 위치에 도달하기 전까지 이미지를 요청하지 않습니다.
3. quality 속성을 이용하여 최적화의 정도를 결정해줄 수 있습니다. 기본값은 quality={75} 입니다. quality를 높일수록 용량이 커집니다.
4. layout shift 현상을 막아줍니다. ( 이미지의 뒤늦은 로드로 화면이 밀리는 현상 )

---

Next Image 정적 import

• 다음과 같이 사용할 수 있습니다.

import Image from 'next/image'
import Sample from "../public/img/sample.jpeg"

export default function Home() {
  return (
    <>
      <h1>next Image</h1>
      <Image
        src={Sample}
        alt='sample img'     />
    </>
  )
}

• placeholder=’blur’ 속성을 줄 경우 이미지 로드시 로딩과 비슷한 placeholder 기능을 넣어줄 수 있습니다. (개발환경을 끄고 배포환경에서 실험해보세요!)
• width와 height 값을 몰라도 정적 import를 할 경우에는 next가 이미지 로드전에 알아내서 렌더링 합니다.

---

Next Image 동적 import

• src 속성에 문자열 형식으로 값을 할당하면 외부링크로 인식합니다.
• 이때는 width와 height값이 필수적으로 할당되어야 합니다.

<Image
  src="/img/macdo.avif"
  alt='sample img'
  width={300}
  height={300}
/>

fill 속성

• 만약 외부링크로 이미지를 가져올 때, width, height값을 알 수 없다면 어떻게 할까요? 가져올 수 없는걸까요?
• 그럴때 사용할 수 있는게 fill 속성입니다. fill 속성을 주게되면 부모박스에 크기에 맞게 이미지의 크기가 결정됩니다.
• 부모박스에 position 속성이 들어가 있어야 의도한 대로 동작할 수 있습니다.
• 만약 이미지가 못생기게 나온다면 css 속성중 objectFit의 cover나 contain을 사용해서 이미지를 렌더링 해보세요!

<figure style={{ position: "relative", width: 300, height: 300, margin: 0 }}>
  <Image
    src="/img/macdo.avif"
    alt='sample img'
    fill
  />
</figure>

---

Next 버전 12의 Next Image

• 13버전은 img 태그 단독으로 렌더링 되지만, 12버전은 span태그로 감싸져 있습니다.
• 외부링크를 사용할 경우 witdh, height 값은 필수입니다.
• 12버전은 Image 태그의 속성으로 layout을 제공하는데 각각 화면이 resizing 됨에 따라 다음의 차이점이 있습니다.

 layout='intrinsic’

• 기본 디폴트 값 입니다.
• 화면 크기가 달라짐에 따라 이미지의 크기도 같이 조정됩니다.
• 그러나 원본크기보다는 더 커지지 않습니다.

  <h1>Legacy Image default - intrinsic</h1>
  <LegacyImage
    src={Sample}
    alt='sample img'
    layout='intrinsic'
  />

layout='fill’

• 13버전의 fill속성과 유사합니다.
• 부모 크기에 맞춰서 렌더링 됩니다.
• 부모에 position 속성을 부여하여 옯바른 위치에 렌더링 되도록 합니다.

<h1>Legacy Image - fill</h1>
<figure style={{ position: "relative", width: 300, height: 300, margin: 0 }}>
<LegacyImage
  src={Sample}
  alt='sample img'
  layout='fill'
/>
</figure>

layout='fixed’

• 화면 크기가 달라져도 이미지의 크기가 변하지 않습니다. (고정)

<h1>Legacy Image - fixed</h1>
<LegacyImage
src={Sample}
alt='sample img'
layout='fixed'
/>

layout='responsive’

• 기본적으로 화면 크기가 달라짐에 따라 이미지의 크기도 조정되는건 intrinsic과 동일하나, 화면 크기가 이미지의 원래 크기보다 커졌을 때도 그에 맞춰서 커집니다.

<h1>Legacy Image - responsive</h1>
<LegacyImage
src={Sample}
alt='sample img'
layout='responsive'
/>

---

전체 코드

import Image from 'next/image'
import LegacyImage from 'next/legacy/image'
import Sample from "../public/img/macdo.avif"

export default function Home() {
  return (
    <>
      <h1>html img tag</h1>
      <img
        src="/img/macdo.avif"
        alt="sample img"
        width={300}
        height={300}
      />

      <h1>next Image with static import</h1>
      <Image
        src={Sample}
        alt='sample img'
      />

      <h1>next Image with string path</h1>
      <Image
        src="/img/macdo.avif"
        alt='sample img'
        width={300}
        height={300}
      />

      <h1>Fill Property</h1>
      <figure style={{ position: "relative", width: 300, height: 300, margin: 0 }}>
        <Image
          src="/img/macdo.avif"
          alt='sample img'
          fill
        />
      </figure>

      <h1>Legacy Image default - intrinsic</h1>
      <LegacyImage
        src={Sample}
        alt='sample img'
        layout='intrinsic'
      />

      <h1>Legacy Image - fill</h1>
      <figure style={{ position: "relative", width: 300, height: 300, margin: 0 }}>
        <LegacyImage
          src={Sample}
          alt='sample img'
          layout='fill'
        />
      </figure>

      <h1>Legacy Image - fixed</h1>
      <LegacyImage
        src={Sample}
        alt='sample img'
        layout='fixed'
      />

      <h1>Legacy Image - responsive</h1>
      <LegacyImage
        src={Sample}
        alt='sample img'
        layout='responsive'
      />
    </>
  )
}