WebP/AVIF 호환성 문제 해결
프론트엔드에서 이미지 최적화를 위해 WebP와 AVIF 같은 최신 포맷을 사용하는 경우, 브라우저 호환성 문제를 해결해야 합니다.
문제
- WebP: IE 및 일부 구형 브라우저에서 지원되지 않음.
- AVIF: 2025년 기준 최신 브라우저(Safari 16+, Chrome 85+ 등)에서만 지원.
- 결과: 호환성 문제로 최신 포맷을 모든 사용자에게 제공하기 어려움.
해결 방법
<picture> 태그 활용을 통해 WebP/AVIF를 우선 제공하고, 미지원 시 JPEG/PNG로 폴백.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Fallback image">
</picture>브라우저가 WebP → AVIF → JPEG 순으로 지원 여부 확인 후 로드합니다.
<picture>태그의 장점
<picture>태그는 브라우저가 지원하는 최신 포맷(WebP, AVIF)을 우선 제공해 파일 크기를 줄이고, JPEG 폴백으로 호환성을 보장합니다. 이를 통해 성능과 접근성을 모두 개선할 수 있습니다.
<picture>태그로 WebP와 AVIF를 사용할 때 파일이 모두 필요한가요?
<picture>태그는 지정된 포맷(WebP, AVIF, JPEG)의 파일이 서버에 있어야 동작합니다. 파일이 없으면 지원 브라우저에서 오류가 발생할 수 있습니다. 이를 해결하려면 CDN으로 동적 변환하거나 빌드 시 WebP를 자동 생성합니다.
다중 포맷 파일 관리의 부담을 어떻게 줄이나요?
Sharp로 빌드 시 WebP와 AVIF를 자동 생성(sharp image.jpg --format webp)하거나, Cloudflare Polish 같은 CDN으로 요청 시 동적 변환을 설정합니다. 이를 통해 단일 포맷(JPEG)만 저장하고도 최적화된 이미지를 제공할 수 있습니다.
장점 및 주의점
-
장점
WebP/AVIF의 높은 압축 효율로 파일 크기 감소, 로딩 속도 개선.
JPEG/PNG 폴백으로 모든 브라우저 호환성 보장. -
주의점
모든 포맷의 파일 준비로 서버 스토리지 사용량 증가.
