[Performance] 이미지 최적화 전략: WebP, Lazy Loading, 그리고 가변 이미지

현대 웹 애플리케이션의 평균 페이지 용량 중 절반 이상은 이미지가 차지합니다. 특히 이커머스나 포트폴리오 사이트처럼 이미지가 핵심인 서비스에서 이미지 최적화는 '선택'이 아닌 '필수'입니다. 1MB짜리 이미지 하나를 100KB로 줄이는 것만으로도 수천 줄의 자바스크립트 코드를 최적화하는 것보다 훨씬 큰 성능 개선 효과를 볼 수 있습니다.

오늘은 브라우저가 이미지를 처리하는 방식을 이해하고, 최신 포맷과 브라우저 기능을 활용해 웹사이트를 가볍게 만드는 3대 전략을 알아보겠습니다.

---

1. 차세대 포맷 도입: WebP와 AVIF

우리가 흔히 쓰는 JPEG와 PNG는 수십 년 된 포맷입니다. 이제는 더 적은 용량으로 더 높은 화질을 제공하는 차세대 포맷으로 갈아탈 때입니다.

1.1 WebP: 구글이 만든 만능 포맷

WebP는 손실/무손실 압축을 모두 지원하며, PNG의 전유물이었던 투명도(Alpha channel)까지 지원합니다. 동일 화질의 JPEG 대비 약 25~35% 더 작은 용량을 자랑합니다.

1.2 AVIF: 현존 최강의 압축률

최신 포맷인 AVIF는 WebP보다도 20% 더 높은 압축 효율을 보여줍니다. 다만 지원하지 않는 구형 브라우저가 있을 수 있으므로, 다음과 같이 <picture> 태그를 사용하는 것이 안전합니다.

HTML

 

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="상품 이미지" />
</picture>

브라우저는 위에서부터 차례대로 확인하여 자신이 지원하는 가장 효율적인 포맷을 선택합니다.

---

2. 지연 로딩 (Lazy Loading): 보이지 않는 것은 읽지 마라

사용자가 페이지에 접속했을 때, 화면 하단에 있어 보이지도 않는 이미지까지 모두 다운로드하는 것은 엄청난 자원 낭비입니다. Lazy Loading은 사용자가 스크롤을 내려 이미지가 뷰포트(Viewport)에 가까워졌을 때 비로소 로딩을 시작하는 기술입니다.

2.1 Native Lazy Loading

과거에는 자바스크립트 라이브러리를 써야 했지만, 이제는 HTML 속성 하나로 해결됩니다.

HTML

 

<img src="product.jpg" loading="lazy" alt="상품 상세" />

• loading="lazy": 로딩을 지연시킵니다.
• loading="eager": 즉시 로딩합니다. (화면 최상단 배너 등에 사용)

2.2 중요 이미지와 LCP (Largest Contentful Paint)

주의할 점은 페이지의 주인공인 'LCP 이미지(가장 큰 이미지)'에는 레이지 로딩을 걸면 안 된다는 것입니다. 오히려 로딩 속도를 늦춰 성능 점수를 깎아먹을 수 있으니, 첫 화면 이미지는 fetchpriority="high" 속성을 주어 우선순위를 높여주세요.

---

3. 가변 이미지 (Responsive Images): 기기에 맞는 옷 입히기

모바일 사용자와 데스크톱 사용자는 화면 크기가 다릅니다. 모바일 기기에 2000px 너비의 이미지를 전송하는 것은 데이터 비용을 사용자에게 전가하는 행위입니다.

3.1 srcset과 sizes 속성

srcset을 사용하면 브라우저에게 여러 해상도의 이미지 후보군을 알려줄 수 있습니다. 브라우저는 현재 기기의 화면 너비와 픽셀 밀도(DPR)를 계산해 가장 적합한 크기의 이미지를 골라 다운로드합니다.

HTML

 

<img
  src="small.jpg"
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="배너 이미지"
/>

---

4. Next.js의 자동 최적화: next/image

만약 Next.js를 사용 중이라면, 위에서 언급한 복잡한 설정들을 직접 할 필요가 거의 없습니다. <Image /> 컴포넌트 하나가 다음 기능들을 자동으로 수행합니다.

1. 포맷 변환: 브라우저 지원에 따라 자동으로 WebP/AVIF로 변환.
2. 사이즈 조절: 기기별로 최적화된 리사이징 이미지 생성.
3. 지연 로딩: 기본적으로 Lazy Loading 적용.
4. Blur-up 효과: 이미지가 로드되기 전 저해상도 이미지를 미리 보여줘 로딩 체감 속도 향상.

---

5. 실무 최적화 체크리스트

1. 적절한 용량: 웹용 이미지는 가급적 장당 200KB를 넘지 않도록 관리하세요.
2. 이미지 크기 명시: width와 height 속성을 명시하여 **Layout Shift(CLS)**를 방지하세요.
3. CDN 활용: Cloudinary나 AWS CloudFront 같은 이미지 전용 CDN을 사용하여 전송 속도를 높이세요.
4. 메타데이터 제거: 촬영 정보(EXIF) 등 불필요한 데이터를 삭제해 용량을 줄이세요. (Squoosh 같은 툴 추천)

---

6. 결론: 가벼운 웹이 최고의 사용자 경험이다

이미지 최적화는 단순히 용량을 줄이는 작업이 아닙니다. 사용자의 데이터 플랜을 아껴주고, 로딩 중 답답함을 해소하며, 결과적으로 서비스의 전환율을 높이는 중요한 비즈니스 전략입니다.

오늘의 요약:

• WebP/AVIF로 용량의 다이어트를 시작하세요.
• Lazy Loading으로 초기 로딩 부하를 줄이세요.
• srcset으로 기기별 최적의 크기를 제공하세요.
• Layout Shift를 막기 위해 이미지의 영역을 미리 확보하세요.