왜 이미지 최적화가 필요할까?
말해뭐할까...ㅋㅋ 용량이 큰 이미지를 다운로드받고 뿌려주다보면 결국 유저는 버벅거리면서 로딩되는 이미지를 보게되는데, 이는 UX적으로 결코 좋은 경험이 아니라고 생각한다.
NEXT.JS는 상위 public 폴더 내의 정적인 리소스들을 제공해줄수 있다.
무슨말이냐, public폴더에 hero.png 이미지 파일을 저장해두었다면, 아래와 같이 img의 src에 바로 적용할수 있다는 소리다.
<img
src="/hero.png"
alt="Screenshots of the dashboard project showing desktop version"
/>하지만 위와같이 코드를 작성하면 아래와 같은 문제가 생긴다.
- 이미지가 화면 크기에 맞게 반응하는지 확인해야한다.
- 다른 단말들을 위한 이미지 크기를 지정해줘야 한다.
- 이미지가 로드될때 레이아웃이 변하는걸 방지해줘야 한다.
이미지 최적화는 웹개발 과정에 있어서 전문적인 분야라고 봐도 무방한데, next/image 컴포넌트를 사용해서 자동으로 이미지를 최적화해서 사용할 수 있다.
<Image> 컴포넌트
NEXT.JS의 <Image> 태그는 html의 <img> 태그의 확장판 이라고 생각하면 되는데, 자동적으로 이미지 최적화를 도와주낟.
- 이미지가 로드될때 자동으로 레이아웃이 움직이는걸 방지해준다
- 뷰포트가 작은 단말에서 큰 이미지가 전달되는걸 방지한다
대박인데?
어떻게 사용하나?
먼저 사용할 이미지를 /public 폴더 내부에 위치시키자.
그리고 next/image로부터 <Image> 컴포넌트를 import하자.
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
export default function Page() {
return (
// ...
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* Add Hero Images Here */}
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className="block md:hidden"
alt="Screenshot of the dashboard project showing mobile version"
/>
</div>
//...
);
}여기서 살펴봐야할 점은 바로 두개의 이미지를 그리지만 화면에는 하나의 이미지만 나온다는점이다.
첫번째 이미지는 데스크탑용 이미지이고, 두번째 이미지는 모바일용 이지다.
따라서 화면의 스크린이 클때는 모바일용 이미지가 보이면 안되고,
반대로 화면의 스크린이 작을때는 데스크탑 이미지가 보이면 안되는 상황이다.
그래서 각 이미지의 className을 잘 살펴보면 서로 상이한것을 알수있다.
데스크탑용 이미지에는 hidden이 기본값이고, 디스플레이 크기가 md부터는 block으로 표시되게 한다.
반대로 모바일용 이비지에는 기본값이 block이고, 디스플레이 크기가 md부터는 hidden으로 표시해 반대로 숨긴다.
여기서 한가지 중요한점은 tailwind에서 반응형을 구현할때는 항상 sm상태를 default로 시작해서 큰화면으로, 즉 작은화면부터 시작해서 큰화면으로 구현해야한다.
