반응형
지금까지 몰랐다.
공식문서를 흐린눈으로 보다가 우연히 알게 되었다.
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}/>
https://nextjs.org/docs/api-reference/next/image#required-props
반응형
'개발 > Next.js' 카테고리의 다른 글
Next.js에서 공통 레이아웃 설정하기 (0) | 2023.01.13 |
---|---|
getStaticPaths의 fallback (1) | 2022.09.20 |
Next.js 에서 Next/link와 a 차이 (0) | 2022.09.18 |
Shallow routing을 사용하면 리렌더링, 데이터페칭없이 페이지이동 가능 (2) | 2022.09.16 |
Next.js - getLayout : 여러개의 레이아웃을 사용할때 (0) | 2022.09.14 |