How to Fix Images in Next.js (next/image, AVIF, Vercel)
Next.js next/image is one of the framework's strongest features: automatic format conversion, responsive sizing, lazy loading, CLS protection. Used correctly it solves most image issues. Used wrong it causes the very problems it should prevent. This guide covers Next.js-specific image optimisation. Pair with image guide.
Step-by-step: How to fix images in Next.js
- Replace raw <img> with next/image. Audit codebase for <img> tags. Replace each with <Image from 'next/image' /> with required width/height (or fill for parent-sized). Build will fail if dimensions missing — forces correctness.
- Configure remote image hostnames. next.config.js → images.remotePatterns: [{protocol: 'https', hostname: 'cdn.yoursite.com'}]. Next.js won't optimise images from undeclared hosts (security).
- Set priority on LCP image. The largest image in the initial viewport (LCP candidate) should have priority prop: <Image priority />. Disables lazy loading, preloads. Improves LCP score by 200-500ms typically.
- Choose fill vs width/height. width/height: known dimensions, simpler. fill: image fills relative-positioned parent (responsive layouts where parent has known size). Don't mix — pick per use case.
- Configure formats and quality. next.config.js → images.formats: ['image/avif', 'image/webp']. AVIF first (smaller, supported in modern browsers); WebP fallback; original as last resort. Quality default 75 is good — only override per image when needed.
- Verify Vercel Image Optimization or custom loader. Vercel hosting: Image API runs at edge, fast and free up to limits. Other hosts: configure loader (Cloudinary, imgix, custom). Self-hosted Next.js can use sharp-based optimisation but requires more setup.
- Monitor. Vercel Analytics → image metrics. Or DevTools Network tab: verify served format is AVIF/WebP, served size matches displayed size (no over-fetching).
Frequently Asked Questions
Should I use next/image for all images in Next.js?
For content images (hero, product, blog, gallery): always. For tiny decorative SVGs or icons: not necessary, raw <img> or inline SVG works. Rule of thumb: any image over 5KB or any image affecting layout should use next/image.
What does the priority prop do in next/image?
Marks an image as critical: preloads it in document head, disables lazy loading, increases LCP score. Apply to the largest image visible above the fold (often hero banner, product main image). One priority image per page typically — multiple defeats the purpose.
Why is my Vercel Image Optimization slow?
First request to a new image variant is uncached — takes 500-2000ms to optimise. Subsequent requests are cached and fast. Pre-warm by hitting common image sizes during deployment or build. For very high traffic, consider CDN in front of Vercel Image API.
Can I use next/image with external image hosts?
Yes — configure next.config.js images.remotePatterns with the host. Next.js will optimise images from that host. Performance similar to local images. Cloudinary, S3, Shopify CDN, any HTTPS image source can be used after configuration.
Does next/image work in static export (next export)?
Limited. next/image's runtime optimisation requires a Node.js server. With static export: configure images.unoptimized: true in next.config.js OR use a custom loader pointing to an external image service. Static export with images is more constrained than SSR/SSG with image optimisation.