16

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?

Mouagip
  • 4,560
  • 3
  • 34
  • 49
  • 1
    Have you checked support in the browser/version you're using? https://developer.mozilla.org/en/docs/Web/CSS/image-rendering#Browser_compatibility bearing in mind `pixelated` isnt supported at all at present? – SW4 Dec 19 '13 at 10:07
  • [Can I Use](http://caniuse.com/#search=image-rendering) does not return any results for `image-rendering`. Is it even supported yet? – Jonathan Dec 19 '13 at 10:10
  • 1
    I didn't mean "see" literally since `pixelated` isn't supported in any browser yet. I'm just interested in what these properties are *proposed* to do. – Mouagip Dec 19 '13 at 10:11
  • 1
    @Jonathan caniuse has since added a page for image-rendering: https://github.com/Fyrd/caniuse/pull/864 – Stuart P. Bentley Feb 08 '15 at 21:53

2 Answers2

15

While @codl's answer is correct, it is incomplete. According to the spec, crisp-edges and pixelated differ in two ways, not just one.

  1. crisp-edges allows for pixel scaling algorithms that are fundamentally different from nearest-neighbor. Examples of other non-smoothing pixel scalers include the hqx family and EPX/Scale2x. However, pixelated must use nearest-neighbor or similar.

  2. crisp-edges applies to both upscaling and downscaling, whereas pixelated is only for upscaling. It uses the same algorithm as auto for downscaling.

The reason for these differences is that pixelated was designed for pixelated sprites, which are intended to be clearly pixelated even at large sizes, but crisp-edges was designed to prevent the edges of an image from becoming blurry. It is okay for a small sprite to get blurrier if scaled down, since it won't look any less pixelated than at its native size. And using a pixel-art scaling algorithm does keep crisp edges, but it also reduces piexlation, which is the opposite of what pixelated is designed for.

That said, there are currently proposed uses for pixelated that have nothing to do with sprites, but rather take advantage of the dual scaling algorithms. For example, on HiDPI screens, it is generally agreed that auto upscaling to normal DPI produces blurry icons. Using pixelated would allow icons to scale up without getting blurry, but also let them scale down normally. This allows the use of two different scaling algorithms in pure CSS without having to use JavaScript to check the size of the original image or the final display size.

Community
  • 1
  • 1
trlkly
  • 614
  • 7
  • 13
7

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.

codl
  • 369
  • 1
  • 13
  • That makes sense. So the current `crisp-edge` implementation in Firefox may change in the future whereas `pixelated`, once it is implemented, should produce exactly this result. – Mouagip Dec 19 '13 at 11:20