Ответ 1
В соответствии с спецификацией кажется, что crisp-edge позволяет плавные пиксельные алгоритмы масштабирования как 2xSaI и HQ2X; тогда как pixelated допускает только масштабирование ближайшего соседа.
Рендеринг изображений "четкими краями" по сравнению с "пиксельными"
В соответствии с MDN предлагаемые значения для свойства CSS image-rendering: auto, crisp-edges и pixelated. Но я не вижу разницы между crisp-edges и pixelated, поскольку оба должны просто масштабировать пиксели и не интерполировать что-либо.
Итак, где разница?
Ответы
Ответ 2
В то время как ответ @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 для проверки размера исходного изображения или окончательного размера экрана.