웹사이트를 만들 때 이미지는 대부분 필수불가결적으로 들어간다. 보통 이미지를 넣는방법이라하면 public(공통)폴더에 보관하고 필요한 페이지에 img태그로 넣으면 된다.
<img src="/이미지01.png" alt="설명"/> 💻 최적화된 이미지 넣기
🖤 Next/Image 컴포넌트 기능
Next/Image 컴포넌트에서 제공하는 대표적인 기능 3가지이다.
lazy loading: 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미한다. 즉, 스크린밖에있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드하여 불필요한 사용을 대폭 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것이다. Next/Image를 사용하게 되면 자동으로lazy loading이 적용된다.- 이미지 사이즈 최적화: Next/Image는 디바이스 크기별로
srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원한다. placeholder제공 : Next/Image에서는 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 레이아웃 흔들림 현상을 방지하기위해placeholder을 제공한다.
<Image src={zz} className="food-img" /><Image>태그를 import해온 뒤 이미지를 보여주길 원하는 곳에 사용한다.
❗ 이미지 높이가 이상하면 height: auto; 스타일 주기
❗ 만약 절대경로로 <image/>를 집어 넣고 싶으면 width, height 옵션을 넣거나 fill="true"를 넣고 부모 div에 width, height값을 조절해도 된다.
🖤 Next/Image 사용시 장점
- 성능향상: 디바이스마다 적절한 사이즈의 이미지를 서빙하고 webp와 같은 작은 용량의 포맷을 사용
- 시각적인 안전성: 이미진 로드 전
placeholder를 제공하여 CLS(Cumulative Layout Shift)방지 - 빠른 페이지 로딩:
viewport에 들어왔을때만 이미지를 로드하고 작은 사이즈의blur이미지를 미리 로딩하여 사용자에게 더 빠른 페이지를 보여줄 수 있다.
