В соответствии с MDN предлагаемые значения для свойства CSS image-rendering: auto, crisp-edges и pixelated. Но я не вижу разницы между crisp-edges и pixelated, поскольку оба должны просто масштабировать пиксели и не интерполировать что-либо.
Итак, где разница?
В соответствии с спецификацией кажется, что crisp-edge позволяет плавные пиксельные алгоритмы масштабирования как 2xSaI и HQ2X; тогда как pixelated допускает только масштабирование ближайшего соседа.
В то время как ответ @codl правильный, он неполный. Согласно спецификации, crisp-edges и pixelated отличаются двумя способами, а не только с одним.
crisp-edges позволяет использовать алгоритмы масштабирования пикселей, которые принципиально отличаются от ближайшего соседа. Примеры других сглаживающих пиксельных масштабировщиков включают hqx и EPX/Scale2x. Однако pixelated должен использовать ближайший сосед или аналогичный.
crisp-edges применяется как к масштабированию, так и к уменьшению масштаба, тогда как pixelated предназначен только для масштабирования. Он использует тот же алгоритм, что и auto для уменьшения масштаба.
Причина этих различий в том, что pixelated был разработан для пиксельных спрайтов, которые должны быть четко пикселированы даже при больших размерах, но crisp-edges был разработан для предотвращения размытия краев изображения. Это нормально для небольшого спрайта, который становится более грубым, если его уменьшить, поскольку он не будет выглядеть менее пиксельным, чем его собственный размер. И использование алгоритма масштабирования пиксельного искусства сохраняет четкие края, но также уменьшает piexlation, что противоположно тому, для чего предназначен pixelated.
Тем не менее, в настоящее время предлагается использовать для pixelated, которые не имеют никакого отношения к спрайтам, а скорее используют двойные алгоритмы масштабирования. Например, на экранах HiDPI принято, что auto масштабирование до нормального DPI создает размытые значки. Использование pixelated позволит значкам масштабироваться без размытости, но также позволяет им уменьшаться. Это позволяет использовать два разных алгоритма масштабирования в чистом CSS без необходимости использовать JavaScript для проверки размера исходного изображения или окончательного размера экрана.