이미지 최적화

21.3.1. 포맷 선택

이미지 포맷은 압축 효율과 품질을 고려하여 최적의 형식을 사용해야 합니다.

포맷	용도	우선순위
AVIF	사진, 복잡한 이미지	최우선 (브라우저 지원 시)
WebP	사진, 복잡한 이미지	기본
PNG	투명도가 필요한 이미지, 아이콘	fallback
JPEG	투명도가 불필요한 사진	fallback
SVG	아이콘, 로고, 단순 그래픽	벡터 이미지 전용

• WebP를 기본 이미지 포맷으로 사용해야 합니다.
• AVIF를 지원하는 브라우저에서는 AVIF를 우선 제공해야 합니다.
• <picture> 태그를 사용하여 포맷별 fallback을 제공해야 합니다.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="메인 이미지" width="1200" height="600">
</picture>

• 아이콘과 로고는 SVG 포맷을 사용하는 것을 권장합니다.

---

21.3.2. 지연 로딩

뷰포트 밖에 위치한 이미지는 지연 로딩을 적용하여 초기 로딩 성능을 확보해야 합니다.

• 뷰포트 하단에 위치한 모든 이미지에 loading="lazy" 속성을 지정해야 합니다.
• 첫 화면(Above the Fold)에 표시되는 이미지에는 loading="lazy"를 적용하지 않아야 합니다.
• 세밀한 제어가 필요한 경우 Intersection Observer API를 활용할 수 있습니다.

<!-- 뷰포트 하단 이미지 -->
<img src="/images/product.webp" alt="상품 이미지" loading="lazy" width="400" height="300">

<!-- 첫 화면 이미지: lazy 적용하지 않음 -->
<img src="/images/hero.webp" alt="메인 배너" width="1200" height="600" fetchpriority="high">

• 이미지 로딩 전 스켈레톤 UI 또는 플레이스홀더를 표시하여 사용자 경험을 보장하는 것을 권장합니다.
• 저해상도 플레이스홀더 이미지(LQIP)를 적용하는 것을 권장합니다.

---

21.3.3. 반응형 이미지

디바이스 화면 크기와 해상도에 맞는 이미지를 제공하여 불필요한 데이터 전송을 방지해야 합니다.

• srcset 속성과 sizes 속성을 사용하여 해상도별 이미지를 제공해야 합니다.

<img
  srcset="
    /images/banner-480w.webp 480w,
    /images/banner-768w.webp 768w,
    /images/banner-1200w.webp 1200w,
    /images/banner-1920w.webp 1920w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  src="/images/banner-1200w.webp"
  alt="배너 이미지"
  width="1200"
  height="400"
>

• DPR(Device Pixel Ratio) 2x 이상의 고해상도 디스플레이를 위한 이미지를 제공해야 합니다.
• 모바일 환경에서 데스크톱용 대형 이미지가 로딩되지 않도록 적절한 sizes 값을 설정해야 합니다.
• 이미지 CDN을 활용하여 요청 파라미터 기반으로 동적 리사이즈를 적용하는 것을 권장합니다.

---

21.3.4. 크기 제한

이미지 파일 크기는 용도별로 다음 기준을 초과하지 않아야 합니다.

용도	최대 크기	비고
아이콘	10KB	SVG 포맷 권장
썸네일	100KB	목록, 카드 등에 사용되는 이미지
일반 콘텐츠 이미지	300KB	본문 내 삽입 이미지
히어로 이미지	500KB	메인 배너, 전면 이미지

• 위 기준은 압축 후 파일 크기를 기준으로 합니다.
• 모든 <img> 태그에 width와 height 속성을 명시하여 CLS를 방지해야 합니다.
• CI 파이프라인에서 이미지 크기를 자동으로 검증하는 것을 권장합니다.
• 기준을 초과하는 이미지가 발견되면 압축 또는 리사이즈를 수행한 후 배포해야 합니다.
• 빌드 시 자동 이미지 최적화 플러그인(vite-plugin-imagemin 등)을 적용하는 것을 권장합니다.