개발자용 AVIF

개발자를 위한 AVIF 가이드

웹 프로젝트에 AVIF를 구현하기 위한 완전한 가이드.

HTML 구현

점진적 지원을 위해 picture 요소 사용:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="설명" loading="lazy">
</picture>

CSS 구현

배경 이미지에 @supports 사용:

.hero {
  background-image: url('hero.jpg');
}
@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

빌드 도구

• Sharp: 이미지 변환용 Node.js 라이브러리
• Squoosh CLI: Google의 이미지 최적화 CLI 도구
• ImageMagick: AVIF 지원 다용도 CLI 도구

성능 팁

• 폴드 아래 이미지에 항상 lazy loading 사용
• srcset으로 반응형 이미지 구현
• 대부분의 경우 품질 60-80 고려
• 다양한 기기와 연결에서 테스트