htmlcssimage-rendering

image-rendering "crisp-edges" vs. "pixelated"


According to MDN the currently proposed values for the CSS image-rendering property are auto, crisp-edges and pixelated. But I can't see the difference between crisp-edges and pixelated since both are supposed to just scale up the pixels and not interpolate anything.

So where is the difference?


Solution

  • According to the spec, it seems that crisp-edge allows for smooth pixel-art scaling algorithms like 2xSaI and HQ2X; whereas pixelated only allows common nearest-neighbour scaling.