Next.js Image optimization calculator. Calculate optimal sizes, srcset strings, and blur data URLs for next/image component.
100% browser-based — your data never leaves your device
Calculate optimal image dimensions, sizes, and srcset for Next.js Image.
Aspect Ratio: 1.78:1
Breakpoints: 8
/image.jpg?w=640&h=360 640w, /image.jpg?w=750&h=422 750w, /image.jpg?w=828&h=466 828w, /image.jpg?w=1080&h=608 1080w, /image.jpg?w=1200&h=675 1200w, /image.jpg?w=1920&h=1080 1920w, /image.jpg?w=2048&h=1152 2048w, /image.jpg?w=3840&h=2160 3840w
export const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840]Visual builder for Next.js App Router routes including groups and parallel routes.
Middleware Matcher BuilderBuild and test Next.js middleware config matcher patterns visually.
next.config VisualizerParse and explore next.config.js/ts options with descriptions and defaults.
Image Optimization CalculatorCalculate optimal image dimensions, sizes, and srcset for Next.js Image.
Route Handler GeneratorGenerate Next.js App Router API route boilerplate with type safety.
Responsive images only perform well when the sizes attribute, srcset, and placeholder strategy are aligned, and that math is easy to get wrong by hand. This calculator works out the exact values for your next/image component.
Image performance is one of the most visible wins in Next.js, and the calculator fits the three places where it matters most. Use it to calculate responsive image sizes for a hero banner across devices, generate srcset strings for product images in an e-commerce store, and create blur placeholder URLs for better perceived performance. Frontend developers building pages and design systems use it constantly.
The output is production-ready. Responsive sizes are computed for your chosen layout type, srcset strings follow Next.js default device breakpoints, configurable device sizes match your viewport strategy, and the blur data URL generator produces a tiny base64 placeholder. Everything you need for the image component comes out in copyable form.
Images are often the most distinctive assets a business owns, including unreleased product photos, campaign creatives, and design concepts. Uploading them to an online optimization service hands a third party copies of exactly the visuals you are about to ship.
This calculator processes everything locally in your browser. Even when you upload an image for blur URL generation, it stays entirely on your device, so proprietary visuals and unpublished design assets never leave your control.
Enter your image's original width and height — the calculator uses these to generate a responsive srcset with the correct aspect ratios.
Choose between responsive, fill, or fixed layout modes to generate the optimal sizes attribute and srcset configuration.
Upload an image to generate a base64-encoded blur placeholder that next/image shows while the full image loads.
Copy the sizes attribute, srcset string, or blur data URL directly into your next/image component.
Practical examples to help you get the most out of Image Optimization Calculator:
sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw' For a hero image that spans full width on mobile, half on tablet, and one-third on desktop.
<Image
src="/hero.jpg"
width={1200}
height={600}
sizes="(max-width: 768px) 100vw, 50vw"
srcSet="/hero-640.jpg 640w, /hero-750.jpg 750w, /hero-1080.jpg 1080w, /hero-1200.jpg 1200w"
/>When using layout='fill', you must also provide the sizes attribute. Without sizes, the browser downloads the largest image for all viewports, negating responsive benefits.
The fill layout requires the parent element to have position: 'relative' (or absolute/fixed). Without it, the image won't have proper bounds to fill.
The sizes attribute tells the browser which image size to load at different viewport widths, improving performance by preventing oversized image downloads.
Enter your image's base dimensions and the calculator generates a responsive srcset with the correct widths based on Next.js default device breakpoints.
A blur data URL is a tiny, base64-encoded blurred version of the image that next/image shows as a placeholder while the full image loads.
No. All calculations happen locally. If you upload an image for blur URL generation, it stays entirely in your browser.
Calculate optimal sizes array for next/image based on layout type.
Generate proper srcset strings for responsive images.
Configurable device sizes matching Next.js defaults.
Generate placeholder blur data URLs for image optimization.
Image Optimization Calculator is useful in a variety of scenarios across different workflows:
Calculate responsive image sizes for a hero banner on different devices
Generate srcset strings for product images in an e-commerce store
Create blur placeholder URLs for better perceived performance
For hero images that span the full viewport, use `fill` with `sizes` prop for true responsive behavior across all screen sizes.
Set the `sizes` attribute to match your CSS breakpoints so the browser downloads the most appropriate image size.
Explore more tools in the Next.js workspace:
App Router Path Builder
Visual builder for Next.js App Router routes including groups and parallel routes.
Middleware Matcher Builder
Build and test Next.js middleware config matcher patterns visually.
next.config Visualizer
Parse and explore next.config.js/ts options with descriptions and defaults.
Route Handler Generator
Generate Next.js App Router API route boilerplate with type safety.