Add imageRendering prop to Next.js Image component for better visual quality

[runotr13]

Goals

1.photo quality improvement for users
2.
3.

Non-Goals

Background

The CSS image-rendering property controls how browsers scale images, particularly important for:

High-DPI displays: Images often appear blurry when scaled
Technical content: Screenshots with text, diagrams, charts need crisp edges
Icons and logos: Small images benefit from optimized contrast
Pixel art: Retro graphics need nearest-neighbor scaling

Proposal

Add an imageRendering prop to the Next.js Image component:
interface ImageProps {
// existing props...
imageRendering?: 'auto' | 'crisp-edges' | 'pixelated' | '-webkit-optimize-contrast';
}
// For screenshots and technical diagrams

// For pixel art and retro graphics

// For icons that need crisp edges

[Dev-axay18]

Adding an imageRendering prop to the Next.js Image component could be useful, especially for use cases like pixel art or low-resolution icons where image smoothing needs to be controlled.

Right now, you can still achieve the same effect by using the style or className props. For example:

<Image
  src="/sprite.png"
  width={64}
  height={64}
  alt="Pixel Art"
  style={{ imageRendering: "pixelated" }}
/>

or

<Image
  src="/sprite.png"
  width={64}
  height={64}
  alt="Pixel Art"
  className="custom-image"
/>

And in your CSS:

.custom-image {
  image-rendering: pixelated;
}

Still, having imageRendering as a built-in prop would make the component more flexible and developer-friendly. I support this idea.

Your Example Image with the Same Property

<Image
  src="https://raw.githubusercontent.com/your-username/your-repo/main/assets/sprite.png"
  width={64}
  height={64}
  alt="Sprite"
/>