이미지 최적화 완벽 가이드

TUTORIAL

이미지 최적화 완벽 가이드

웹 이미지 성능 최적화의 모든 것. Next.js Image, WebP, AVIF, Lazy Loading으로 Core Web Vitals를 개선합니다.

럿지 AI 팀

2025-01-15

15분

이미지 최적화 전략

LCP

< 2.5s

최대 콘텐츠 페인트

CLS

< 0.1

레이아웃 시프트

INP

< 200ms

인터랙션 응답

Next.js Image

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority        // LCP 이미지
  placeholder="blur"
  blurDataURL={blurData}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

이미지 포맷 비교

WebP

30% 절감

지원: 95%+

AVIF

50% 절감

지원: 90%+

PNG

무손실

지원: 100%

JPEG

손실 압축

지원: 100%

최적화 기법

Lazy Loading

뷰포트 진입 시 로드

Responsive Images

srcset, sizes 활용

CDN 배포

글로벌 엣지 캐싱

Blur Placeholder

로딩 중 미리보기

최적화 도구

sharp

imagemin

squoosh

Cloudinary

imgix

LCP

CLS

INP