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

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.

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.