How to optimize images with next/image and AVIF on edge in Next.js?

import Image from 'next/image';

// Responsive hero
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
  style={{ objectFit: 'cover' }}
/>

// Full viewport fill
<Image
  src="/background.jpg"
  alt="Background"
  fill
  sizes="100vw"
  className="object-cover"
/>