웹을 위한 이미지 최적화: 2026 성능 가이드

Web performance dashboard

대부분의 웹사이트에서 이미지는 전체 페이지 용량의 약 50% 를 차지합니다. 최적화되지 않은 히어로 이미지 하나만으로도 페이지 로드에 3~5 MB가 추가될 수 있으며, 모바일 네트워크 환경의 방문자를 잃고 Core Web Vitals 점수에도 악영향을 미칩니다.

이미지 최적화가 중요한 이유

Google은 LCP(Largest Contentful Paint) 를 순위 결정 신호로 활용합니다. 화면에서 가장 큰 요소가 렌더링에 4초나 걸리는 과도하게 큰 JPEG라면, SEO는 물론 이탈률에도 큰 타격을 입게 됩니다.

여러 성능 연구에 따르면, 페이지 로드가 1초 지연될 때마다 전환율이 7% 감소할 수 있습니다.

올바른 포맷 선택하기

포맷	최적 용도	투명도	애니메이션
JPEG	사진, 복잡한 그라데이션	미지원	미지원
PNG	스크린샷, 로고, 텍스트 오버레이	지원	미지원
WebP	위의 모든 용도, 약 30% 더 작은 용량	지원	지원
AVIF	차세대 압축, 가장 작은 파일 크기	지원	지원

2026년 기준 대부분의 사이트에는 WebP 가 가장 적합한 선택입니다 — 브라우저 지원율이 97% 이상입니다. PNG to WebP Converter를 사용하면 아무것도 업로드하지 않고 브라우저에서 바로 이미지를 일괄 변환할 수 있습니다.

압축 전에 크기 조정하기

흔히 저지르는 실수: 800×600으로 표시되는 이미지를 4000×3000 사진 그대로 압축하는 것입니다. 항상 크기를 먼저 조정한 후 압축하세요.

사이트에서 이미지가 표시되는 최대 크기를 확인합니다 (반응형 브레이크포인트 기준).
레티나 디스플레이를 위해 해당 크기의 2배 로 내보냅니다 — 예: 800×600 슬롯이라면 1600×1200.
그 다음 압축합니다.

Image Resizer를 사용하면 이 작업을 한 번에 처리할 수 있습니다 — 사전 설정을 선택하거나 원하는 크기를 직접 입력하세요.

<img
  src="hero.webp"
  alt="Product screenshot"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
/>

loading="lazy" — 화면 밖의 이미지를 브라우저가 나중에 로드합니다.
decoding="async" — 디코딩이 메인 스레드를 차단하지 않습니다.
width 및 height — 레이아웃 이동을 방지합니다 (CLS 개선).

포맷 폴백을 위한 `<picture>` 요소

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" width="800" height="600" />
</picture>

이 방식은 AVIF를 지원하는 브라우저에는 AVIF를, 폴백으로 WebP를, 최후 수단으로 JPEG를 제공합니다.

빠른 최적화 체크리스트

Lighthouse 또는 PageSpeed Insights로 페이지를 점검합니다.
이미지를 실제 표시 크기로 조정합니다 (레티나용 × 2).
가능하면 WebP 또는 AVIF로 변환합니다.
품질 목표 75~85%로 압축합니다.
스크롤해야 보이는 이미지에 loading="lazy"를 추가합니다.
width와 height 속성을 명시적으로 설정합니다.

이미지 최적화는 투자 대비 효과가 가장 높은 성능 개선 방법 중 하나입니다 — 브라우저 기반 도구를 활용하면 별도의 소프트웨어 설치 없이도 바로 시작할 수 있습니다.

웹을 위한 이미지 최적화: 2026 성능 가이드

이미지 최적화가 중요한 이유

올바른 포맷 선택하기

압축 전에 크기 조정하기

압축 전략

손실 압축 (Lossy compression)

무손실 압축 (Lossless compression)

지연 로딩과 최신 HTML

포맷 폴백을 위한 `<picture>` 요소

빠른 최적화 체크리스트