Rendering Low Resolution Sprites

by John M. Higgins calendar

Feb 04, 2026

I made a Pokémon website a while ago and I learned this trick while making it. If you find yourself rendering low resolution images that you want to look sharp (i.e. sprites) you can use this CSS to stop them from coming out blurry.

img.sharp {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}