React and Next.js need the same delivery decisions: suitable source dimensions, supported formats, reserved layout space and appropriate loading priority. Next.js can generate image variants through its Image component; plain React does not automatically provide that pipeline. Start with the installed framework version and the actual image placement rather than copying a generic configuration.
Configure the component for the layout
In Next.js, width and height describe the intrinsic aspect ratio, not necessarily the rendered CSS size. If you use fill, give the parent a defined size and appropriate positioning. Set sizes to describe how much of the viewport the image occupies. Without it, a responsive image can be treated as full viewport width and download a larger candidate than needed.
Illustrative example: a product image in a desktop half-width column needs a different sizes rule from a full-width mobile hero. Match the real breakpoints and gutters, then inspect the selected resource in the browser.
Do not use one loading rule everywhere
Do not lazy-load the LCP image. In Next.js 16, priority is deprecated in favor of preload; the documentation also explains when loading or fetchPriority is preferable to preloading. Check the version used by your project and prioritize only the important resource. A priority hint is not a guarantee of immediate loading.
Plain React needs actual image variants
An HTML picture element can offer different formats, while srcset and sizes offer dimension variants. Those files must exist: markup does not encode or resize them. Keep a normal img fallback and meaningful alternative text. A browser selects a supported candidate; it does not compare every file and automatically choose the smallest.
Verify the served result
Check the Network panel for the selected URL, content type and transfer size. Confirm the image looks correct at mobile and desktop widths. For remote Next.js sources, configure narrow remotePatterns matching trusted locations. Test authenticated sources separately because the default optimizer does not forward authentication headers.