Next.js has a powerful built-in Image component that handles format conversion, resizing, and lazy loading automatically — but you still need to start with well-prepared source images. Oversized source images increase build times, server costs, and fallback file sizes. At imgresizr.com, you can optimise images for Next.js at the correct starting dimensions and format, for free.
Next.js Image Component Key Features
- Automatic WebP/AVIF conversion on supported browsers
- Automatic resizing to multiple breakpoints via the sizes prop
- Automatic lazy loading with Intersection Observer
- Prevents CLS with automatic aspect ratio preservation
- But: source images should still be pre-optimised for best results
How to Optimise Images for Next.js at imgresizr.com
Upload your image to imgresizr.com. Even with Next.js image optimisation, starting with appropriately sized source images reduces server processing time and CDN storage costs. Resize your source images to approximately 2× the largest display size you use — for a 600px wide component, a 1200px source is sufficient. Convert to WebP using the Convert tool — although Next.js converts automatically, pre-converting reduces the serverless function compute time. Compress to 80–85% quality using the Compress tool as a starting point — Next.js will further optimise during serving. Keep all source images under 1MB before handing them to Next.js for the best build performance.
Next.js Image Optimisation Tips
- Use the Next.js Image component (<Image>) for all images — it handles responsive sizing automatically
- Set the priority prop on the LCP image (hero/above-fold) — this preloads it for fast paint
- Use placeholder="blur" for a low-quality placeholder while the full image loads
- Configure remotePatterns in next.config.js for externally hosted images
- Profile using Lighthouse before and after — document your Core Web Vitals improvements
Optimise images for Next.js websites at the correct starting dimensions, free at imgresizr.com.