next/image : next.js에서 제공하는 이미지 최적화 태그

지금까지 몰랐다.

 

공식문서를 흐린눈으로 보다가 우연히 알게 되었다.

 

next.js에서 제공하는 태그의 확장 컴포넌트인 태그는 이미지 최적화 기능이 있다고 한다.

• Improved Performance : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공
• Visual Stability : width,height를 명시하여 이미지 만큼의 공간 확보 -> CLS방지
  • CLS : 현재 보고있는 페이지에 갑자기 발생하는 레이아웃의 변경 -> 잘못된 클릭의 원인이 될 수 있음
• Faster Page Loads : 이미지가 뷰포트에 들어왔을 경우만 로드(Lazy load) -> 페이지 로드 속도 향상
• Asset Flexibility : 외부에 저장되어 있는 이미지까지 리사이징 가능

외부링크 사용할 때

next.config.js에 다음과 같이 해당 도메인을 입력해주어야 한다.

module.exports = {
  images: {
    domains: ['s3이름.s3.ap-northeast-2.amazonaws.com']
  },

  ...
};

Required Props

• width,height (단위없이 입력시 px) : 필수값인 이유는 CLS를 방지하기 위함이다.

Optional Props

• intrinsic(default) : 큰 화면에서는 지정된 너비와 높이를 유지하지만 작아질수록 부모 컨테이너 요소에 맞게 바뀐다.
• fixed : 지정한 너비와 높이를 화면에 상관없이 고정
• responsive : 부모 컨테이너 요소가 display:block일 경우 이미지가 그에 맞게 바뀜(div는 block, span은 inline)
• fill : 부모 요소의 position이 relative일 경우 이미지가 부모 컨테이너 요소에 맞게 늘어남
• quality : 이미지의 품질을 직접 지정할 수 있음 (1~100)
• priority : 우선 로드되어야 할 이미지에게 지정하면 lazy loading이 적용되지 않고 바로 로드된다. 남발하면 의미가 퇴색된다.
  • <Image width={100} height={100} src = {url} priority />
• placeholder : 이미지가 로딩 중일 때 표시할 대체 이미지, 로디되고 있다는 걸 명확히 전달하고 싶을 때 사용

---

로컬에서 실험해보았는데

profile2.jpg를 src에 넣었을때 

Next/image태그로 만든 이미지는 webp로 올라왔고 용량도 비교적 적었다. 그리고 일정 크기 이상으로 size가 커지지 않았다.

확실히 뭔가 최적화가 되고 있긴 하다.

import Image from 'next/image';

<Image
              src="/images/profile2.jpg"  
              height={3004}
              width={3004}
              alt={name}
            />


            <img src="images/profile2.jpg" alt={name}/>

next/image로 올린것, 용량 392kb, image/webp로 자동변환

일반 img 태그로 올린것, 용량 1.9mb, image/jpeg로 올라옴

---

참고 문서 
https://mingeesuh.tistory.com/entry/NEXTjs-%EB%84%A5%EC%8A%A4%ED%8A%B8-JS%EB%A5%BC-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-3%ED%8E%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80

[NEXT.js] 넥스트 JS를 배워보자 3편 - 최적화된 이미지 컴포넌트

https://nextjs.org/docs/api-reference/next/image#required-props