📚 Reference

• 공식 문서 1
• 공식 문서 2

📜 Chapter

‣

‣

Image

• image
• Next.js에서는 특별한 내장 이미지 요소가 있고 이것은 더 최적화된 방법으로 이미지를 출력할 수 있게 도와준다.
• 예를 들어 페이지에서 실제로 보이는 경우에만 이미지가 표시되도록 이미지를 지연 로딩하여 구현한다.
• 추가적인 구성 없이 자동적으로 이를 실행 해준다.

속성

• priority
  • ture, false
    • true인 경우 이미지는 높은 우선순위 및 사전 로드로 간주된다.
    • 우선 순위를 사용하는 이미지의 경우 지연 로딩이 자동으로 비활성화된다.
    • LCP(Largest Contentful Paint) 요소로 감지된 이미지에는 우선순위 속성을 사용해야 한다.
    • 서로 다른 이미지가 서로 다른 뷰포트 크기에 대한 LCP 요소일 수 있으므로 여러 우선 순위 이미지를 갖는 것이 적절할 수 있다.
    • 이미지가 스크롤 없이 볼 수 있는 부분 위에 표시되는 경우에만 사용해야 한다. 기본값은 거짓이다.
• loading
  • lazy, eager
    • 권장 사항: 이 속성은 고급 사용 사례에만 사용된다. Eager를 사용하여 로드할 이미지를 전환하면 일반적으로 성능이 저하된다. 대신 이미지를 미리 로드하는 우선 순위 속성을 사용하는 것이 좋다.
    • 이미지의 로딩 동작이다. lazy 것이 기본값이다. lazy 경우 뷰포트에서 계산된 거리에 도달할 때까지 이미지 로드를 연기한다. eager가 있으면 즉시 이미지를 로드 한다.
    • loading=lazy 속성은 이미지가 지연로딩 되도록 한다. 따라서 실제로 보이는 경우에만 로딩된다. 또한 자동적으로 너비와 높이를 추론했으나 원한다면 덮어 쓸 수 있다.
• srcset → 자동으로 생성됨.
  • srcset 속성을 생성했는데 따라서 뷰포트와 웹사이트를 방문하는 기기에 따라 크기가 조정된 이미지가 로딩되도록 보장한다.
  • 또한 자동적으로 사용자에 의해 사용되는 브라우저에 가장 알맞는 파일 포맷으로 이미지를 서브한다.
  • 즉 예를 들어서, WebP 이미지로서 크롬을 통해 이 페이지를 방문한다면 보시다시피 Network 탭을 들어가서 다시 로드하면 여기서 이 제공되는 이미지가 .webp로 반환되는 것을 볼 수 있다.
  • .webp은 PNG보다 효율적인 특별한 파일 포맷이다.

예시