Next

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

November 28, 2025

download ready
Thank You
Your submission has been received.
We will be in touch and contact you soon!

Next.js next/image automatically generates AVIF/WebP formats with edge-optimized delivery via Vercel Image Optimization, reducing sizes 30-50%. Configure deviceSizes, imageSizes, and sizes prop for responsive loading; set priority for LCP images and fill for full-bleed. Edge caching serves from global CDN with <100ms TTFB.

‍Example:-

Code

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"
/>
Arrow icon

Previous

Next

Arrow icon
Hire Now!

Need Help with Next Development ?

Work with our skilled next developers to accelerate your project and boost its performance.
**Hire now**Hire Now**Hire Now**Hire now**Hire now

Related Q&A

blog-banner-img
calender
December 8, 2025

How can we implement AI integration using Vercel AI SDK in Next.js 16 Edge Functions?

Next
All
blog-banner-img
calender
December 8, 2025

How can we set up Proxy middleware using proxy.ts in Next.js 16 for API routes?

Next
All
blog-banner-img
calender
December 8, 2025

How to solve timeouts and latency issues in Edge Functions using Node.js 24?

Next
All
Ready to Build
Something Amazing?
Got an Idea?
We got you.
Need a Tech Partner
You Can Trust?
Got Challenges?
We’ve Got Solutions.
Your Vision,
Our Mission.
Let’s talk.
Project Inquiry
Email iconhello@zignuts.com
Call icon+49 3056837888
Call icon+1 4088728242
Career Inquiry
Email icontalent@zignuts.com
Call icon+91 9427726620
India
A-409, Siddhraj Zori, Gandhinagar, 382421, Gujarat, India
Germany
Rheinsberger Str. 76,10115 Berlin, Germany
USA
611 Gateway Blvd, South San francisco, CA 94080, USA
Company Deck

Company Deck

PDF, 3MB

© 2026 Zignuts Technolab. All Rights Reserved.

Facebook iconTwitter iconInstagram iconYoutube iconLinkedIn iconSocial icon

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

Next.js next/image automatically generates AVIF/WebP formats with edge-optimized delivery via Vercel Image Optimization, reducing sizes 30-50%. Configure deviceSizes, imageSizes, and sizes prop for responsive loading; set priority for LCP images and fill for full-bleed. Edge caching serves from global CDN with <100ms TTFB.

‍Example:-

Code

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"
/>