NEXT에서는 이미지를 어떻게 사용할까? - NEXT Image 알아보기

웹화면에 이미지를 띄우려면 개발자들은 html img 태그를 사용하여 이미지를 띄운다

<img src="https://..." alt="이미지" />

 

기본 html 이미지 태그를 사용하는것도 좋지만 next를 사용한다면 next Image 컴포넌트를 사용하여 이미지를 최적화 할 수 있다

 

Image

next에서는 이미지를 최적화 하여 보여줄수 있도록 Image 컴포넌트를 제공한다

장점

• 크기 최적화(Size Optimization)
• 시각적 안정(Visual Stability)
• 빠른 페이지 로드(Faster Page Loads)
• 보안적 이점

크기 최적화

next Image 컴포넌트를 사용하면 이미지의 크기를 줄이기 위해 webp 포맷으로 변환을 한다

webp 포맷을 사용하면 기존의 png, jpg와 같은 품질을 유지하지만 파일의 크기는 더 줄어들어 효율적이다

※ localhost에서 테스트를 해보았는데 크기가 509kb png를 Image 컴포넌트를 활용해서 띄웠더니 53.7kb로 약 1/10로 크기가 줄었다

 

그리고 사용하는 img의 크기는 100x100인데 불러오는 이미지의 크기는 1000x1000이면 불필요하기 큰 이미지를 불러와 낭비일것이다

하지만 next에서는 srcset을 사용하여 해상도에 따른 이미지 크기를 불러오게 할 수 있다

※ 하지만 나는 아직 srcset을 잘 이해를 못해서 좀더 알아봐야할것 같다

시각적 안정

그냥 html img 태그를 사용하면  CLS(Cumulative Layout Shift) 현상이 발생한다 하지만 next Image를 사용하면 layout 이동되는 현상을 막을수 있어서 시각적으로 안정을 가질 수 있다

빠른 페이지 로드

next Image에서는 lazy load라는 기능을 제공한다 lazy load는 이미지가 필요한 시점까지 load를 지연시키는 기능으로 쉽게 말하자면viewport에 보이는 이미지만 먼저 로드하고 보이지 않는 이미지는 나중에 로드한다고 생각하면 된다

이미지에 이 기능을 사용하고 싶지 않다면 priority prop을 true로 해주면 된다

※ lazy load는 기본 img 태그에 loading="lazy" 옵션을 추가해주면 사용할 수 있다

보안적 이점

next에서는 img url의 형식을 next.config.js에 설정을 해둘수 있다 이렇게 설정한다면 server에서 예상치 못한 url형식을 보내도

client에서 막을수 있어 좋은 기능같다고 생각한다

 

마무리

이번에 자세히 알아보기 전까지는 그냥 Image 컴포넌트를 사용하면 좋다고만 들었었는데 이번에 알아보면서 왜 좋은지를 알게되어 좋은 공부가 된것 같다 그리고 Image 컴포넌트를 사용하는 방법도 기존 img 태그와 별로 다를게 없어서 따로 공부할 필요가 없는 부분도 좋은것 같다