최적화된 이미지 넣는 법

 

---

일반 이미지 넣는 법

1. public폴더에 이미지 추가

2. <img /> 태그 사용

<img src="/test.png" alt=""/>

---

최적화 이미지 넣는 법

1. public폴더에 이미지 추가

2. import 추가

import Image from 'next/image'

3. <Image /> 컴포넌트 사용

<Image src="/test.png" width="500 "height="500" alt=""/>

(장점)

1. lazy loading

=> 로딩속도 최적화

 

2. 사이즈 최적화

 

3. layout shift 방지

=> 레이아웃 어긋남 방지

 

(단점)

1. width, height 옵션이 필수임

=> fill="true" 넣고, 부모 <div>가 width, height를 대신 넣어도 됨.

=> 절대경로가 아닌 import 방식으로 이미지를 가져오면 안 써도 됨.

import test from "./test.png"

<Image src={test} alt=""/>

=> 하지만, 이미지가 많은 경우 하나하나 import 하기 번거롭다.

 

2. 외부 이미지를 불러오는 경우

<div>
  <Image src="https://s3.amazonaws.com/my-bucket/profile.png" width="500" height="500" alt=""/>
<div/>

next.config.js에 셋팅이 따로 필요함

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

---

항상 이미지가 늦게 랜더링 되는 부분이 걸림돌이었는데, 다음 프로젝트에서는 이미지 왕창 써서 이쁘게 꾸며야겠다!!!

물론 세팅하는 거나 등등 불편함이 있다 해도, 나는 성능 파라서 어쩔 수 없다. 후훗😙

그런데 lasy loading기능만 원하면 다른 라이브러리도 있다고 하니 찾아봐야겠땅~ ㅎㅎㅎ