[next.js] Image

3가지를 비교해보려고 한다. 기존 img태그, next13 의 Image이다.

1.img태그

//평상 시 img의 경우 _ lazyLoading이라는 속성을 따로 줘야한다.
<img
  src="https://img.etoday.co.kr/pto_db/2017/12/20171220063331_1166698_600_383.jpg"
   alt="example"
  width={200}
  height={100}
  loading="lazy"
        />

간단하게 외부경로로 이미지를 평상시 처럼 불러올 수 있다. 그러나 밑에 경고(?)처럼 next/Image를 사용하라는 문구가 뜬다.

width와 height를 지정해주지 않으면 기존의 이미지 크기대로 불러와진다.

next/image의 장점을 밑에서 얘기할꺼지만 img에서 lazyLoading을 하고 싶으면 따로 지정해야한다.

** lazyLoading은 불필요한 호출을 줄인다.img태그의 경우 무조건 해당 페이지에 들어오게 되면 이미지를 호출한다.

이때 loading="lazy";를 해주면 해당 이미지가 보일때만 네트워크탭에서 보면 pre-fetching을 해준다.

lazyloading속성을 뺏을때 해당한다.

2.next/Image 

장점)

  1) static이미지 파일

• 기존의 img태그에서 설정한 lazy-loading이 알아서 된다.
• 이미지 파일이 jpeg가 아니라 webp이다.(용량이 작다) 서버에서 알아서 용량 최적화를 해준다.
• quality라는 속성을 통해서 최적화를 설정할 수 있다. 기본값은 75
• placeholder="blur"속성을 넣어주면 로딩되는 동안 자동으로 블러 처리가 된다.
  -예를 들면, 미리 이미지사이즈에 맞춰서 배경이 먼저 화면에 렌더링이 된다. product환경에서 확인 가능하다.
    또, blur 속성이 가능하려면 소스파일이 static해야한다. => 미리 이미지를 알고 있어야 가능하므로 그렇지 않으면 오류가 뜬다.

**static소스파일은

import example from '/public/example.jpg';
 <Image
          src={example}
          alt="v13 image"
          // width={500}
          // height={100}
          // placeholder="blur"
        />

위와 같이 해당 이미지를 import해와서 사용하는 것을 말한다.

 

 2)이미지 주소 , 또는 경로

위와 같은 코드지만 src에 이미지 주소 또는 경로를 입력하면된다. 그러나 width,height를 주석 처리한다면 오류메세지가 뜬다. 미리 크기를 알고 가지고 있으려고 그런듯👍

아니면 다른 방법으로 아래와 같은 코드식으로 부모 속성에다가 줄 수 도 있다. 

 <figure style={{ position: 'relative', width: '500px', height: '100px' }}>

그러나 크기는 지정할 수 있지만 이미지가 여기에 맞을지 잘 모를 수 있다.

그럴 경우에 속성에 fill을 추가해주거나 style={{objectFit:'cover'}}을 해주면 알맞게 이미지크기가 렌더링 된다.

---

좀 더 공부해서 Next12의 Image에 대해서도 정리를 해야겠다.