이미지 최적화에 대하여
next에서는 왜 Image 태그를 쓸까? 이 태그는 어떤 기능을 할까?
문득 궁금해져서 여러 포스트들을 참고해 오랜만에 블로그를 작성해본다.
이미지 최적화 방법들
1. 차세대 이미지 포맷 활용하기
WebP는 JPEG이나 PNG보다 파일 크기는 25~30% 작고, 품질은 거의 그대로다.
덕분에 페이지 로딩 속도는 빨라지고, 사용자 데이터 사용량도 줄일 수 있다.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="이미지 설명">
</picture>2. alt 텍스트로 접근성과 SEO 모두 챙기기
이미지에 대체 텍스트를 잘 달아두면 스크린 리더를 위한 접근성도 높아지고, SEO 측면에서도 유리하다.
만약 단순 장식용 이미지라면 role="presentation" 속성을 써서 제외해주는 게 좋다.
3. srcset으로 반응형 이미지 구현하기
<img
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
src="fallback.jpg"
alt="이미지 설명"
>👉 w 단위는 브라우저가 디바이스 너비에 따라 적절한 이미지를 선택하도록 도와준다.
4. sizes 속성으로 이미지 크기 예측 도와주기
<img
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
src="fallback.jpg"
alt="이미지 설명"
>sizes를 지정하면 브라우저가 어떤 이미지를 언제 로딩할지 미리 판단할 수 있어서, 불필요하게 큰 이미지가 로딩되는 걸 막을 수 있다.
5. 가로세로 비율 명시해 레이아웃 안정성 확보
<img src="image.jpg" width="800" height="600" alt="이미지 설명">img {
max-width: 100%;
height: auto;
}여기에 object-fit 속성까지 조합하면 이미지가 컨테이너에 어떻게 맞춰질지도 설정할 수 있다.
6. 중요한 이미지는 빠르게 불러오기 (fetchpriority)
<img
src="hero.jpg"
fetchpriority="high"
alt="히어로 이미지"
>첫 화면에 노출되는 중요한 이미지는 fetchpriority="high"로 우선순위를 줘서 더 빠르게 불러오자.
7. loading과 decoding 속성으로 성능 최적화
<img
src="below-fold.jpg"
loading="lazy"
decoding="async"
fetchpriority="low"
alt="뷰포트 밖의 이미지"
>스크롤을 내려야 보이는 이미지는 loading="lazy"로 지연 로딩하고, decoding="async"로 디코딩 처리 부담도 줄일 수 있다.
이미지 최적화 자동화 도구
🔧 Cloudinary
자동 형식 변환, 리사이징, 최적화까지 한 번에 처리해주는 도구.
🔧 Next.js의 Image 컴포넌트!
import Image from 'next/image'
function MyComponent() {
return (
<Image
src="/profile.jpg"
alt="프로필 사진"
width={500}
height={300}
priority
/>
)
}자동으로 srcset, sizes, lazy loading, blur 처리 등을 해준다. next에서 이걸 쓰는 이유이기도 하다.
Next.js에서 왜 Image를 쓸까?
next/image는 다음과 같은 기능을 제공한다:
- 브라우저에 맞는 사이즈로 자동 리사이징
- WebP 등 차세대 포맷 자동 변환
- lazy loading 기본 적용
- blur-up 처리 (로딩 중 흐릿하게 보여주기)
- 레이아웃 쉬프팅 방지를 위한
width/height필수 지정
결과적으로 성능은 물론 접근성, SEO까지 챙길 수 있다.
개발자 입장에서는 일일이 <img>에 속성 붙이지 않아도 되니까 훨씬 효율적이고 안정적이다.
근디 버셀로 배포하면 일일 몇천건?의 제한이 있던걸로 기억함
끝!
