图像渲染“清晰边缘”与“像素化”

Question

根据MDN，CSS image-rendering属性的当前建议值为auto，crisp-edges和pixelated。但我看不出crisp-edges和pixelated之间的区别，因为两者都应该只是放大像素而不是插值。

那么 的区别在哪里？

Answer 1

虽然@ codl的答案是正确的，但它是不完整的。根据{{​​3}}，crisp-edges和pixelated在两个方面有所不同，而不仅仅是一个。

1. crisp-edges允许与最近邻居根本不同的像素缩放算法。其他非平滑像素缩放器的示例包括spec族和hqx。但是，pixelated必须使用最近邻居或类似内容。

2. crisp-edges适用于放大和缩小，而pixelated仅适用于放大。它使用与auto相同的算法进行缩减。

这些差异的原因是pixelated是针对像素化精灵而设计的，即使在大尺寸下也是如此，但是crisp-edges旨在防止图像的边缘成为像素边缘模糊。如果按比例缩小，小精灵可以变得模糊，因为它看起来不像它的原始大小那么像素化。使用像素艺术缩放算法确实保持清晰的边缘，但它也减少了piexlation，这与pixelated设计的相反。

也就是说，目前提出的pixelated用于与精灵无关，而是利用双缩放算法。例如，在HiDPI屏幕上，人们普遍认为auto升级到正常DPI会产生模糊图标。使用pixelated可以让图标按比例放大而不会变得模糊，但也可以让它们正常缩小。这允许在纯CSS中使用两种不同的缩放算法，而无需使用JavaScript来检查原始图像的大小或最终显示大小。

Answer 2

根据spec，似乎crisp-edge允许像2xSaI和HQ2X一样平滑pixel-art scaling algorithms;而pixelated只允许共同的最近邻扩展。