https://github.com/esthel7/next.js/pull/10

도입 이유

• 기존에는 위의 사진처럼 이미지가 랜덤으로 순차 로딩되었다. 이를 이미지가 빠르게 나오도록 Next/Image를 활용해 최적화해보려고 한다.

Next/Image에서 제공하는 기능

• lazy loading
  • 이미지를 로드 시점을 필요할 때까지 지연
  • 요소가 보일때 이미지 로드
    • 일반 <img />에 loading='lazy'를 넣으면 적용 가능
    • Next/Image의 경우 자동으로 적용됨
      • priority를 true로 설정 시 기능 끌 수 있음
• 이미지 사이즈 최적화
  • 디바이스 크기 별로 srcSet을 미리 정해두고 크기에 맞게끔 다운로드
  • webp와 같이 용량이 작은 포맷으로 이미지를 변환하여 제공
    • webp ➡️ 최신 이미지 형식으로 압축하여 크기가 작은 것이 특징, 2010년 구글에서 만든 이미지 포맷. 이미지 품질은 비슷
  • Next.js 서버에서 진행되며 캐시가 만료될 때까지 캐시된 이미지 제공
    • 캐시가 만료된 요청이라면 오래된 이미지 우선 제공 후 백그라운드에서 이미지 최적화 다시 진행
• placeholder 제공
  • 이미지 로드 전엔 영역 크기가 0이었다가 다시 늘어나는게 일반적인데, placeholder로 이미지 높이만큼 영역 표시
    • 빈 영역 또는 커스텀 이미지 적용 가능

이미지 적용하기

• 로컬에서 이미지를 불러올 경우

  import Image from 'next/image';
  
  export default function Abc() {
    return <Image src='../..~' alt='picture' placeholder='blur' />;
    // 로컬에서 불러올 경우 blur 적용은 placeholder만으로 가능
  }
  

• 서버에서 이미지를 불러올 경우

  // next.config.js
  module.exports = {
    images: { // 모든 url 접근을 허용할 경우 공격 받을 수 있기 때문에
              // 이미지 제공 서버가 안전함을 명시
      domains: ['your-cdn-image-domain'],
    },
  };
  

  import Image from 'next/image';
  
  export default function Abc() {
    return <Image src='/~~.png' alt='picture' width={500} height={500} />;
    // 서버에서 불러올 경우 blur이미지는 blurDataURL 속성에 base64로 인코딩된 이미지 데이터 넣기
  }
  

• layout 속성

  • intrinsic ➡️ default, 컨테이너가 줄어들면 컨테이너에 맞게 크기 줄임
  • fixed ➡️ 컨테이너와 관계 없이 사이즈 고정
  • responsive ➡️ 이미지 비율을 유지하며 컨테이너 크기에 맞춤
    • 원본 사이즈의 이미지를 로드
  • fill ➡️ relative 포지션을 가진 조상의 너비, 높이와 동일
    • 원본 사이즈의 이미지를 로드
    • 주로 objectFit 속성과 함께 사용

• 반응형

  <img
    srcset="경로 원본크기,
            경로 원본크기,
            경로 원본크기"
    sizes="(미디어조건) 최적화출력크기,
           (미디어조건) 최적화출력크기,
           기본출력크기"
  />
  

  Next/Image에서 sizes가 지정되어있지 않다면 기본으로 100vw로 세팅

  // next.config.js
  module.exports = {
    images: {
      sizes: '250px', // 100vw 대신 기본 사이즈 변경
    },
  };
  

• relative, fill일 때

  // images.imageSizes, images.deviceSizes 미지정 시 설정되는 default 값
  module.module.exports = {
    images: {
      imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
      deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    },
  };