🖼️ 10. 이미지 최적화 정리 - Lazy Loading과 성능 향상의 시작

웹페이지를 개발하다 보면 이미지가 진짜 많다.
특히 반응형 웹, 썸네일 리스트, 게시글 목록 등에서는 수십 개의 이미지를 한 번에 로딩할 수도 있다.
그래서 이미지 최적화는 페이지 로딩 속도와 UX에 직접적인 영향을 준다.

✅ Lazy Loading이란?

사용자가 스크롤로 해당 위치에 도달했을 때 이미지를 불러오는 방식

<img src="thumbnail.jpg" loading="lazy" alt="썸네일" />

장점

• 초기 로딩 속도 개선
• 네트워크 트래픽 감소
• Core Web Vitals 중 LCP 개선 효과

✅ IntersectionObserver로 구현하는 방법

loading="lazy"는 브라우저 기본 기능이지만,
더 커스터마이징이 필요하다면 IntersectionObserver를 쓰면 좋다.

useEffect(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
      }
    });
  });

  const imgs = document.querySelectorAll('img[data-src]');
  imgs.forEach(img => observer.observe(img));
}, []);

✅ Next.js에서의 이미지 최적화

Next.js는 기본적으로 next/image 컴포넌트를 제공한다.

import Image from 'next/image';

<Image
  src="/thumbnail.jpg"
  alt="썸네일"
  width={400}
  height={300}
  priority={false}
  loading="lazy"
/>

주요 기능

• 자동 압축 및 포맷 변환 (WebP)
• Lazy Loading 기본 내장
• blurDataURL로 프리로딩 효과 가능

✅ 실무 팁 - 이미지 최적화를 위한 추가 전략들

• CDN 사용 (예: Cloudflare, AWS S3 + CloudFront)
• 이미지 크기 줄이기 (TinyPNG, Squoosh 등)
• WebP, AVIF 포맷 사용
• <picture> 태그로 브라우저 별 포맷 최적화 제공

<picture>
  <source srcset="image.webp" type="image/webp" />
  <source srcset="image.jpg" type="image/jpeg" />
  <img src="image.jpg" alt="이미지 설명" />
</picture>

📝 내가 느낀 점

개발할 때는 “이미지 넣는 거 어렵지 않지”라고 생각했는데,
모바일 환경, 느린 네트워크, SEO까지 고려하면 단순한 img 하나에도 전략이 필요하다는 걸 느꼈다.
특히 next/image를 쓰면서 얼마나 많은 최적화가 자동으로 되는지 보고 감탄함...

📷 “이미지는 보이는 것 이상으로, 페이지 속도와 사용자 경험을 결정짓는다.”