Image

Size Optimization: WebP, AVIF 포맷을 이용하여 각 디바이스 별로 적절한 size로 변환합니다.
Visual Stability: 로딩될때 Layout Shift를 방지합니다.
Faster Page Loads: viewport에 Image Component가 감지되면 lazy load합니다.
- 선택적으로 Blur Image 제공이 가능합니다.
Asset Flexibility: 원격 서버에 저장된 이미지의 경우에도 On-demand 이미지 크기 조정이 가능합니다.

Loader

고압축, 고품질 이미지 포맷이며 작은 파일 크기로 페이지 로딩 속도 개선에 효과적입니다.

next.config.js

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

인코딩하는 데 20% 더 걸리지만 WebP에 비해 20% 더 작게 압축 가능합니다.
Proxy/CDN을 사용하여 Self hosting하는 경우 Request Headers의 Accept (image/avif,image/webp)를 전달하도록 구성해야 합니다.