Next.js 9-2. Image Component and Image Optimization

• Priority

  각 페이지의 LCP(Largest Contentful Paint) 요소가 될 이미지에 priority 속성을 추가해야 한다. LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠가 로드되어 화면에 나타나는 데 걸리는 시간을 나타내는 웹 측정 지표이다. LCP는 웹 페이지의 사용자 경험에 큰 영향을 미치는 중요한 지표 중 하나이다. 사용자가 기다리는 시간이 길어질수록 이탈률이 높아지기 때문이다.

  보통 LCP는 이미지, 동영상, 텍스트 등의 콘텐츠 중에서 가장 큰 것을 기준으로 측정된다. 따라서 페이지가 로드되는 동안 LCP가 발생하지 않은 경우 페이지 로딩 속도가 느려질 가능성이 높다. LCP는 Goolge의 Core Web Vitals 중 하나로 검색 엔진 최적화(SEO)에 중요한 역할을 한다. 빠른 페이지 로딩 속도와 좋은 사용자 경험을 제공하는 웹 페이지는 SEO에서 높은 순위를 얻을 수 있다.

  그래서 priority 속성을 추가하여 Next.js가 로드할 이미지의 우선순위를 특별히 지정하여(예: 미리 로드 태그 또는 우선순위 힌트를 통해) LCP에서 의미 있는 향상을 가져올 수 있다. LCP 요소는 일반적으로 페이지의 뷰포트 내에서 볼 수 있는 가장 큰 이미지 또는 텍스트 블록이다. next dev를 실행하면 LCP 요소에 priority 속성이 없는 경우 <Image>에 콘솔 경고가 표시된다.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        priority
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

 

 

• Image Sizing

  이미지가 가장 일반적으로 성능을 저하시키는 방법 중 하나는 이미지가 로드될 때 페이지의 다른 요소를 밀어내는 레이아웃 이동에 의해서이다. 이 성능 문제는 사용자에게 너무 짜증 나서 Cumulativ Layout Shift라는 자체 Core Web Vital이 있다. 이미지 기반 레이아웃 변경을 방지하는 방법은 항상 이미지 크기를 조정하는 것이다. 이를 통해 브라우저는 이미지가 로드되기 전에 이미지를 위한 충분한 공간을 정확하게 예약할 수 있다.

  next/image는 좋은 성능 경과를 보장하도록 설계되었기 때문에, 레아아웃 변경에 기여하는 식으로는 사용할 수 없다. 그래서 다음 세 가지 방법 중 하나로 크기를 조정해야 한다.

1. 자동으로 정적 가져오기를 사용
2. 명시적으로 width와 height 속성을 포함하기
3. 암시적으로 이미지가 확장되어 부모 엘리먼트를 채우는 fill을 사용하기

  그런데 만약 내 이미지의 크기를 모르면 어떻게 해야 할까? 이미지 크기에 대한 지식 없이 소스에서 이미지에 액세스 하는 경우 다음과 같은 몇 가지로 해결할 수 있다.

  먼저, fill을 사용하는 것이다. props fill을 사용하면 상위 엘리먼트에 따라 이미지 크기를 조정할 수 있다. CSS를 사용하여 모든 미디어 쿼리 중단점과 일치하도록 sizes props을 따라 페이지에서 이미지 상위 엘리먼트 공간을 제공하는 것을 고려해야 한다. fill, contain 또는 cover과 함께 object-fit을 사용하고 object-position을 사용하여 이미지가 해당 공간을 차지하는 방식을 정의할 수도 있다.

  둘째로 이미지 정규화를 사용할 수 있다. 제어하는 소스에서 이미지를 제공하는 경우 이미지 파이프라인을 수정하여 이미지를 특정 크기로 정규화하는 것이 좋다.

  마지막으로 API 호출을 수정할 수 있다. 앱의 API 호출(예: CMS)을 사용하여 이미지 URL을 검색하는 경우 URL과 함께 이미지 크기를 반환하도록 API 호출을 수정할 수 있다.

 

 

• Styling

  Image Component의 스타일 지정은 일반 <img> 엘리먼트의 스타일 지정과 비슷하지만 유의해야 할 몇 가지 점이 있다. 먼저, styled-jsx가 아닌 className 또는 style을 사용해야 한다. 대부분의 경우 className props를 사용하는 것이 좋다. 가져온 CSS 모듈, 전역 스타일시트 등이 될 수도 있다. 그리고 style props를 사용하여 인라인 스타일을 지정할 수도 있다. 그러나 styled-jsx는 현재 컴포넌트로 범위가 지정되어 있기 때문에 사용할 수 없다.(스타일을 전역으로 표시하지 않는 한)

  둘째로 fill을 사용하는 경우 상위 엘리먼트 요소는 position: relative를 가지고 있어야 한다. 이는 해당 레이아웃 모드에서 이미지 요소를 적절하게 렌더링 하는 데 필요하다.

  마지막으로 fill을 사용하는 경우 상위 엘리먼트에 display: block이 있어야 한다. 이것은 <div> 엘리먼트의 default이지만 특별히 지정해야 한다.