04. 브라우저 이미지 포맷 최적화
같은 사진을 WebP(및 보너스로 AVIF)로 전송합니다. 동일한 체감 화질에서
파일 크기가 더 작습니다. DevTools Network의 이미지 리소스 크기를 Before와 비교해 보세요.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.
보너스: AVIF 버전도 직접 열어보기
🔧 실제 구현 코드
<img src="/labs/04-image-format/assets/photo.webp" alt="..." />
<!-- 보너스 -->
<a href="/labs/04-image-format/assets/photo.avif">AVIF 버전</a>같은 원본 사진을 WebP(및 AVIF)로 인코딩했습니다(빌드 시점에 scripts/generate-mock-images.js가
sharp로 생성). 두 포맷 모두 JPEG보다 최신 압축 알고리즘을 사용해, 같은 체감 화질에서 더 적은
바이트로 인코딩할 수 있습니다.