HTML '<'picture> 요소를 사용하여 자동 폴백으로 최신 형식을 제공하세요 — 브라우저가 지원하는 첫 번째 형식을 선택합니다:
<picture> <!-- Best compression (AVIF) — ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) — ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) — 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="설명" loading="lazy">
</picture>
srcset 사용loading="lazy"이미지 최적화에 대한 자세한 내용은 이미지 최적화 가이드를 참조하세요.
AVIF는 최고의 압축을 제공하지만 (WebP보다 20-50%, JPEG보다 50-80% 더 나음) WebP보다 브라우저 지원이 약간 적습니다. WebP는 모든 최신 브라우저에서 지원됩니다 (전 세계 95% 이상). AVIF를 기본 소스로, WebP를 폴백으로, JPEG/PNG를 최종 폴백으로 '<'picture> 요소를 사용하세요.
PNG는 다음이 필요할 때 사용하세요: (1) 투명도/알파 채널, (2) 스크린샷이나 텍스트가 많은 이미지의 무손실 품질, (3) 로고나 다이어그램 같이 날카로운 가장자리가 있는 이미지. 일부 색상 데이터를 버릴 수 있는 사진에는 JPEG를 사용하세요.
SVG는 로고, 아이콘, 일러스트레이션에 이상적입니다. 벡터 기반이라 모든 해상도에서 선명하고 파일 크기가 작습니다. SVG가 불가능한 경우 (복잡한 사진 같은 래스터 이미지) WebP 또는 PNG를 투명도와 함께 사용하세요.
<picture> 요소를 사용하세요: <source type='image/avif'>를 먼저, 그 다음 WebP를, 마지막으로 JPEG/PNG를 <img> 요소로 배치하세요. 브라우저는 자동으로 지원하는 형식을 선택합니다. AVIF를 지원하지 않는 브라우저는 WebP로 폴백하고, 둘 다 지원하지 않으면 JPEG로 폴백합니다.