웹 개발하면서 img 태그를 많이 보셨을 겁니다. 이 태그는 웹페이지에 이미지를 삽입할 수 있는 태그 중 하나입니다.

<img src='' width='' height='' alt='' title='' srcset='' />                         

> Next/Image

NextJS 에서 제공하는 img태그를 확장한 이미지 최적화 컴포넌트입니다. SEO라는 말을 들어 보셨을 겁니다. 쉽게말해 NEXT/IMAGE는 이미지를 최적화하여 구글 검색엔진에 노출되기 유리하도록 만들며, 웹 페이지의 퍼포먼스를 올려줍니다.

원문: Next Image Optimization

사용법

방법은 간단합니다.

import Image from 'next/image';
import picture from './image/picture.png;'

const Home = () =>{
  return(
	<div>
  	  <Image src={picutre} alt='' width='' height='' />
	</div>
  )
}

때론 Image태그 내의 옵션들은 필수적입니다. Next/Image의 옵션부터 알아봅시다.

 <Image src={picutre} loader='' layout='' alt='' sizes='' width='' height='' quality='' objectfit='' />

원격 Image, 로컬 Image

원격 Image와 로컬 Image의 차이는 다음과같습니다.

• 로컬 Image

import Image from 'next/image';
import picture from './image/picture.png;'

const Home = () =>{
  return(
	<div>
  	  <Image src={picutre} alt='' width='' height='' />
	</div>
  )
}

• 원격 Image

import Image from 'next/image';


const Home = () =>{
  return(
	<div>
  	  <Image src='/text.png' alt='' width='' height='' />
	</div>
  )
}

원격은 width, height 은 필수로 들어가야하지만, blurDataURL을 필요하다면 넣어줘야합니다. /text.png같은경우 Next build시 프로젝트의 public폴더에 접근해서 가져옵니다.

*필수

src

• 정적으로 import된 이미지파일
• 외부 URL에서 가져온 Remote Image

width, height

• layout 옵션이 fill 일때
• 내부 이미지 폴더에서 불러오는 이미지 파일일때(정적)
• 하지만, 부모노드와 Image를 감싼 자식노드가 Position이 relative인 경우 작성안해도됨

*선택

layout

• intrinsic, fixed, responsive, fill, raw 가 있습니다.

   <Image src='/text.png' layout='fill' />

objectfit

• 그냥 layout에 fill속성을 부여하면 이미지는 화면 전체를 가려버립니다.

• objectfit은 해당이미지가 상위 노드에 맞추는 방법을 설정합니다.

  

옵션은 css의 object-fit과 동일합니다.

<div classname='parants' style={{width: '100px', height: '100%px', position: relative;}}>
 <Image src='/text.png' layout='fill' objectFit='contain'/>
</div> 

loader

const myLoader = ({ src, width, quality }) => {
 return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
 return (
   <Image
     loader={myLoader}
     src="me.png"
     alt="Picture of the author"
     width={500}
     height={500}
   />
 )
}

이렇게 로더를 따로 작성해줄 경우 next.config.js에 image: loader 옵션은 무시됩니다.

quality

최적화된 이미지 품질을 설정합니다.

1 부터 100 까지이며 default는 75입니다.

  <Image src='/text.png' layout='fill' objectFit='contain' quality='100' />

결론

img, svg 보단 Next/Image를 적극활용하자