How to render a Next.js image with crisp edges?

[ryyHardy]

Summary

Outside Next.js, you can apply a style to images, image-rendering: crisp-edges, that removes blurring and color smoothing. It is ideal for pixel art, sprites, etc., which was what I was trying to render in Next.js. However, both the plain img tag and the Next.js Image component don't seem to be affected by this style, and the edges remain blurry. I couldn't get it to render with crisp edges (even with quality=100, unoptimized=true, priority=true, etc.). So, any ideas? If not, is it worth an issue?

BTW here is what it looks like in Next.js right now. Normally, it is far less blurry:

Additional information

No response

Example

No response

[icyJoseph]

Hi,

Have you verified this in other browsers?

Chrome doesn't support crisp-edges, but supports pixelated. Other browsers did support crisp-edges, but not pixelated.

• https://caniuse.com/?search=image-rendering

I guess the safest is to apply both, with crisp-edges last, which would make it apply in other browsers, and in Chrome pixelated still applies.

[ryyHardy]

Good catch! pixelated works on both Chrome and Firefox which is better. I'll have the fallback in there, too. I guess I should check browser support more often for these niche properties. Thank you!