Next.js Image Generator

The Next.js Image Generator turns a dropped image into a next/image component with the data URI inlined, letting you set width, height, priority, and placeholder. It is for Next.js developers scaffolding an optimised image component.

The next/image component has several required and optional props that are easy to misconfigure. Generating it locally fills them in correctly with the image inlined.

1. Drop an image into the tool — Next.js Image.
2. Set width, height, priority, and placeholder options.
3. The next/image component is generated with the data URI inlined.
4. Review the component — Next.js Image.
5. Copy it into your project — Next.js Image.

• next/image component output
• Width, height, priority, and placeholder options
• Inlined data URI — Next.js Image
• Generated in the browser — Next.js Image

• Scaffolding a next/image component for a small image
• Setting priority on an above-the-fold image
• Producing a component with width and height set correctly
• Embedding a graphic in a Next.js page

• For images Next.js can optimise, prefer a sourced file over inlining.
• Always set width and height to avoid layout shift.
• Reserve priority for the most important above-the-fold image.

• Inlining a large image rather than letting Next.js optimise a sourced file.
• Omitting width and height, which next/image needs to avoid layout shift.
• Setting priority on many images, which defeats its purpose.