웹 성능 최적화의 핵심! WebP와 AVIF의 차이점부터 <picture> 태그를 활용한 실무 퍼블리싱 기법까지 정리했습니다. 구글 코어 웹 바이탈 LCP 점수를 높이는 이미지 다이어트 전략을 지금 확인하세요.
🚀 웹 성능 다이어트 시리즈의 네 번째 주인공, 이미지 포맷
우리는 지난 시간까지 가변 폰트와 서브셋 최적화, 그리고 clamp() 함수를 통해 텍스트와 레이아웃의 효율성을 극대화하는 방법을 살펴 보았습니다. 하지만 아무리 코드를 깎아내도, 고해상도 이미지 한 장이 수 메가바이트(MB)를 차지한다면 '웹 성능 다이어트'는 실패할 수밖에 없습니다.
오늘날 웹 환경에서 이미지는 전체 페이지 용량의 60% 이상을 차지하곤 합니다. 따라서 WebP와 AVIF 같은 차세대 포맷을 이해하고 실무에 적용하는 것은 퍼블리셔와 프런트엔드 개발자에게 선택이 아닌 필수 역량이 되었습니다.
📊 왜 WebP와 AVIF인가? (기존 포맷과의 기술적 차이)
기존의 JPEG와 PNG는 수십 년간 표준으로 자리 잡았지만, 현대의 고해상도 디스플레이 환경에서는 용량 대비 효율이 떨어집니다. 구글이 개발한 WebP와 오픈 미디어 연합의 AVIF는 압도적인 압축률을 자랑합니다.
| 특징 | JPEG | WebP | AVIF |
| 압축 방식 | 손실 | 손실 / 무손실 | 손실 / 무솔실 |
| 알파 채널(투명) | 미지원 | 지원 | 지원 |
| 애니메이션 | 미지원 | 지원 (Animated WebP) | 지원 (AVIF Sequence) |
| 압축 효율 | 기준(100%) | JPEG 대비 25~35% 감소 | JPEG 대비 50% 이상 감소 |
| 브라우저 지원 | 모든 브라우저 | 거의 모든 브라우저 | 최신 브라우저 위주 |
- WebP: 범용성이 높고, 무손실 압축 시 PNG보다 용량이 훨씬 작습니다.
- AVIF: WebP보다 더 높은 압축률을 보여주며, 특히 그라데이션이 많은 이미지에서 밴딩 현상이 적습니다.
📉 구글 코어 웹 바이탈과 퍼블리셔의 역할 (LCP & CLS)
웹 성능 최적화는 단순히 "빠르게" 만드는 것을 넘어, 구글의 검색 순위에 직접적인 영향을 미칩니다.
- LCP (Largest Contentful Paint): 페이지 내에서 가장 큰 요소(대개 히어로 이미지)가 렌더링되는 시간입니다. AVIF를 사용해 용량을 줄이면 LCP 점수를 드라마틱하게 개선할 수 있습니다.
- CLS (Cumulative Layout Shift): 이미지가 로드되면서 레이아웃이 덜컥거리는 현상입니다.
Tip: 반드시 <img> 태그에 width와 height 속성을 명시하세요. 브라우저는 이 값을 통해 이미지가 로드되기 전 미리 공간을 확보(Aspect Ratio)하여 CLS를 방지합니다.
💻 실무 퍼블리싱 코드: <picture> 태그로 브라우저 대응하기
모든 브라우저가 AVIF를 지원하지는 않습니다. 따라서 우리는 아트 디렉션 기능과 하위 호환성을 제공하는 <picture> 태그를 사용해야 합니다.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg"
alt="최적화된 웹 성능 다이어트 이미지"
width="800" height="600"
loading="lazy">
</picture>위 코드를 사용하면 브라우저는 자신이 해석할 수 있는 가장 최적화된 포맷을 위에서부터 차례대로 선택합니다. loading="lazy" 속성까지 추가한다면 금상첨화겠죠?
🛠️ 전문가의 도구 상자: Squoosh부터 CLI 도구까지
디자이너에게 받은 원본 이미지를 어떻게 변환해야 할까요? 실무에서 유용한 도구들을 추천합니다.
- Squoosh (squoosh.app): 구글에서 만든 웹 기반 도구로, 원본과 압축본을 비교하며 세밀하게 설정할 수 있습니다.
- CLI 도구 (Batch 처리):
- cwebp: cwebp -q 80 image.jpg -o image.webp (WebP 변환)
- avifenc: avifenc --lossless image.png image.avif (AVIF 변환)
- Guetzli: 구글의 고성능 JPEG 인코더로, 차세대 포맷을 쓸 수 없는 환경에서 JPG 최적화에 탁월합니다.
웹 성능 최적화는 거창한 기술이 아닙니다. 오늘 배운 WebP/AVIF 전환과 <picture> 태그 활용, 그리고 width/height 명시라는 세 가지 습관만으로도 여러분의 사이트는 훨씬 가볍고 빨라질 수 있습니다.
여러분의 프로젝트에서는 어떤 이미지 포맷을 주로 사용하시나요? 혹은 최적화 과정에서 겪은 어려움이 있다면 댓글로 공유해 주세요! 저와 함께 더 건강한 웹 생태계를 만들어가요. 😊
'Web > HTML' 카테고리의 다른 글
| [왕초보 필독] 코드 몰라도 앱 만든다? 2026 바이브 코딩(Vibe Coding) 가이드 (0) | 2026.02.06 |
|---|---|
| Markdown(마크다운)을 사용하는 이유와 작성법 (1) | 2024.11.29 |