이미지 사이즈 최적화, 이미지 공통 컴포넌트화
Next image 사용법
📌 Next.js
: SPA의 서버 사이드 렌더링을 지원하는 React 기반
- SPA : 하나의 페이지를 사용하는 애플리케이션 ( 서버로부터 새로운 페이지를 가져오는 것 X)
📌 Next.js의 Image
: 이미지 컴포넌트 하나로 손쉽게 이미지 최적화 기능을 사용할 수 있게 만들어 줌
- 퍼포먼스 향상, 시각적 안정성, 더욱 빠른 페이지 로드, 자산의 유연성
- next/image에서 Image 모듈을 불러와서 컴포넌트처럼 사용
- ❗️로컬 이미지가 X닌 경우에는, 반드시 property로 width, height || layout을 설정해줘야함
import Image from "next/image";📌 HTML의 img 태그와 Image 태그의 차이점
: 다운로드하는 이미지의 갯수 유형, 크기, 시간 에 차이가 있음!
1. img 태그
- 브라우저에서 보여지는 이미지의 갯수 뿐만 아니라, 모든 이미지를 다 다운로드
- 이미지 영역과는 상관없이 불필요하게 큰 원본 이미지를 로드
- 큰 원본 이미지를 로드하니까 소요되는 시간도 long
- 이미지 포맷 (유형)은 저장되어 있는 그대로의 포맷을 사용함
2. Image 태그
- 현재 보여지는 브라우저의 영역에 필요한 이미지의 갯수만큼만 다운로드
- 이미지가 그려지는 영역에 맞게 크기가 자동으로 줄어듬
- 동일 사진이지만 크기가 작아짐을 확인 가능 - 다운로드하는 이미지의 크기가 줄었으니까, 소요되는 시간도 감소
- 이미지의 포맷이 크롬 브라우저에 최적화된 포맷인 webp로 변환
* Webp란?
: 이미지 품질은 유지되면서 파일 크기를 줄여줌 (gif, jpg, png 등을 대체 )
- 구글에서 웹을 염두에 두고 설계한 포맷
📌 Next.js에서 Image 태그 사용하기
1. 로컬 이미지 (jpg, png, webp) 파일을 import
- Next.js가 자동으로 width, height을 계산
import Image from 'next/image'
import localPic from '../public/localPic.png'
<Image
src={localPic}
alt="Picture of the author"
/>2. Remote Image인 경우는 width, height을 필수로 입력
import Image from 'next/image'
<Image
src={""}
alt="Picture of the author"
width={500}
height={500}
/>
/>3. layout='fill' 사용해서 부모 element 크기와 맞추기 (이미지 크기를 모르는 경우 사용)
- 이미지를 비율을 유지하면서 크기를 조절하고 싶은 경우
📌 Next.js에서 외부 이미지 사용하는 방법
- next.config.js에서 remotePatterns 속성으로 옵션 설정이 가능
- 지정된 도메인에 있는 이미지만 가져와서 next.js 이미지 최적화를 사용
// next.config.js는 images 설정을 적용할 수 있는 파일
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**',
},
],
},
};
module.exports = nextConfig;