이미지 최적화는 LCP(Largest Contentful Paint)·CLS와 같은 Core Web Vitals 점수를 높이는 동시에 구글 이미지 검색 트래픽을 확보하는 필수 작업입니다. 2025년 최신 브라우저·크롤러가 지원하는 포맷·로딩·메타데이터 전략을 단계별로 정리합니다.
1. 포맷 선택: AVIF → WebP → JPEG 순
• AVIF 10-bit : 같은 품질 대비 JPEG 대비 45 % 용량 절감, HDR 지원.
• WebP : AVIF 미지원 구형 브라우저용 백업.
• Squoosh CLI로 –avif –quality 45 일괄 변환 후, --webp –quality 75로 폴백 이미지를 생성합니다.
2. 반응형 & 고해상도 대응
<img
src="hero.avif"
srcset="hero-640.avif 640w,
hero-1280.avif 1280w,
hero-1920.avif 1920w"
sizes="(max-width: 768px) 90vw, 1200px"
width="1200" height="800"
loading="lazy"
fetchpriority="high"
alt="SEO 이미지 최적화 가이드">srcset+sizes는 DPR 2× 레티나 디스플레이에서도 픽셀 퍼펙트 품질을 보장하면서 불필요한 데이터 전송을 줄여 줍니다.
3. 전달 최적화
• CDN : Cloudflare Images·AWS CloudFront를 사용해 지리 지연 최소화.
• HTTP/3 + Early Hints : Link: <hero.avif>; rel=preload; as=image 헤더로 RTT를 1회 절감합니다.
4. 로딩 전략
• loading="lazy" : 첫 뷰포트 밖 이미지를 지연 로딩해 TTI를 단축.
• fetchpriority="high" : LCP 요소만 우선 다운로드.
• Blur-up placeholder : CSS filter: blur(20px)와 함께 스켈레톤 깜빡임을 방지.
5. SEO 메타데이터 작성
- 대체 텍스트(alt) : 핵심 키워드 + 맥락 서술 “이미지 최적화 단계 설명도”.
- 파일명 :
image-optimization-guide.avif. - 구조화 데이터 :
<figure> + <figcaption>태그로 의미 부여.
FAQ
Q. PNG를 그대로 두고 WebP만 추가하면 될까요?
A. 아니요. PNG는 알파가 꼭 필요한 UI 아이콘으로만 제한하고, 사진·배너는 AVIF → WebP 순 폴백을 권장합니다.
Q. GIF 애니메이션은 어떻게 최적화하나요?
A. <video autoplay loop muted playsinline> MP4/H.265로 교체하면 용량이 80 % 이상 감소합니다.
맺음말
“올바른 포맷 + 지능형 로딩 + 정확한 메타” 세 박자가 SEO와 성능을 모두 잡는 이미지 최적화의 핵심입니다. 오늘 바로 Squoosh CLI로 이미지 폴더를 변환하고, srcset + fetchpriority를 적용해 Core Web Vitals와 검색 노출을 동시에 올려보세요.