Next Image
Next image를 사용하게된 이유
상용 서비스를 하고있는데 과도한 이미지들이 있었습니다. 서비스 같은 경우 홈이 가장 중요하다는 생각이 있었는데 홈 불러오는 속도 자체가 느려 유저 유입이 줄어들 수 있으다는 생각으로 이미지 최적화를 하였고 그 후 파격적인 속도 개선 + 데이터 사용량이 줄었습니다. 14.7mb 리소스 개선 후 4.9mb로 줄었고 next 이미지 뿐 아니라 서버에서 s3 이미지를 리사이징을 해주어 서비스의 완성도는 더욱더 올라갔습니다. 이제 밑에서 next js 이미지에 대하여 설명드리겠습니다.
Next 이미지 최적화
그림 또는 이미지는 최근 웹 애플리케이션이나 웹페이지 작성에 있어 중요한 부분이 되었습니다..
이미지는 웹페이지 또는 웹 애플리케이션의 유저들의 리액션을 높일 수 있는 중요한 도구이며 또한 써치 엔진 최적화에도 잘만 사용하면 좋은 도구가 될 수 있습니다.
전통적으로 이미지는 HTML의 img 태그를 사용하는데요. 작은 크기의 웹페이지에서는 효율적일 수 있으나, 많은 양의 이미지를 다루는 페이지에서는 HTML의 img 태그가 그다지 효과를 발휘할 수 없을 겁니다.
그래서 next.js에서는 버전 10부터 이 문제에 대한 해결책을 제시했는데요.
바로 “Image” 컴포넌트입니다. 이 컴포넌트는 자동으로 이미지를 최적화해 줍니다.
그럼 next.js가 제공하는 Image 컴포넌트에 대해 자세히 알아보겠습니다.
이미지 선택과 S3 이미지 resize
이미지 포맷(format) 선택
-
이미지는 JPEG, GIF, PNG, WebP 형태 등 많은 포맷이 있지만 추천해 드리는 포맷은 WebP 포맷입니다.
-
가장 최근에 나온 규격으로 손실/비손실 압축을 지원
-
WebP-변환기 같은 걸로 기존 이미지를 WebP로 변환해 사용하는 걸 추천
이미지 사이즈(size) 재설정
-
이미지 사이즈도 중요한데요. 최근 모바일로 웹페이지를 보는 빈도가 높아죠 웹페이지를 기본적으로 모바일 최적화로 먼저 제작하는데요. 모바일에서 100x100으로 보여줘도 될 이미지를 데스크톱 기준 1080x800 이미지로 모바일에서 로딩하면 데이터 손실이 크다.
-
Responsive Breakpoints Generator 툴 같은 걸로 자동으로 이미지 사이즈를 화면 크기에 따라 조절할 수도 있고 S3 에서의 resize를 통하여 이미지 사이즈를 유동적으로 변화 시킬수 있다.
이미지 용량 압축(compress)
- 보통 웹페이지에서 사용되는 이미지가 1MB를 넘으면 안 된다고 하는데요. 이미지 로딩이 웹페이지 로딩에 지대한 영향을 끼치기 때문에 되도록 이미지는 압축해서 사용하는 게 좋고 압축 라이브러리 등을 통해 업로드 시에 압축을 시키는 것이 용이하다.
Next.js Image component 사용
사용법은 next js를 사용한다면 어렵지 않다.
import Image from 'next/image';
const ImageTest = () => {
return (
<>
<h1>User Profile</h1>
<Image
src={....}
/>
</>
)
}필수 속성(required props)
-
src 속성과 관련해서는 두 가지 형태로 이미지 소스를 지정할 수 있음.
-
상대 경로로 이미지를 지정할 때는 next.config.js에 미리 domains 정보를 세팅해야만 합니다.
-
width, height 속성은 이미지가 페이지에서 얼마나 많은 자리를 차지하느냐 또는 컨테이너에 따라 얼마큼 변하느냐를 결정하게 되는데요.
-
layout=”intrinsic”이거나 layout=”fixed” 일 때는 이미지의 width, height속성 값이 그대로 픽셀에 적용됨
-
layout=”responsive” 또는 layout=”fill”일 때는 이미지가 비율에 맞게 확대 축소됩니다.
선택 속성(optional props)
-
layout 속성은 해당 이미지가 뷰포트(viewport)에 따라 어떻게 반응하는지에 대한 속성
관련 링크 : https://image-component.nextjs.gallery -
intrinsic : 디폴트 값이며, 이미지의 width, height에 따라 얼마나 많은 자리를 차지하는지 계산
-
fixed : 이미지의 정확한 width, height를 사용하여 표시함.
-
fill : 이미지를 상위 엘리먼트의 width, height에 맞추기 위해 자동으로 width, height를 조절함
-
responsive : 부모 컨테이너의 width에 맞게 이미지를 확대함
고급 속성(advanced props)
-
blurDataURL next.js가 자동으로 blur 관련 DATA URL을 만들어 줄 수 있고, 아니면 우리가 직접 만들 수 있음 DATA URL은 base64로 인코딩 된 이미지여야 함 물론 placeholder=”blur”일 때만 작동함
-
loading
이 속성은 브라우저가 페이지를 로딩할 때 이미지 로딩을 어떤 행태로 하는지 지정하는 옵션입니다.
“lazy”와 “eager” 두 가지가 있음 “lazy”는 이름 그대로 뷰포트 계산이 끝날 때까지 이미지 로딩을 홀딩하는 기능이 있어 페이지 레이아웃이 망쳐지는 걸 방지할 수 있음
domain
module.exports = {
images: {
domains: ['s3.amazonaws.com'],
},
}