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

Question

根据MDNimage-rendering ，目前提议的 CSS属性值为auto,crisp-edges和pixelated。但我看不出和之间的区别crisp-edges，pixelated因为两者都应该只是放大像素而不是插值任何东西。

那么区别在哪里呢？

Answer 1

虽然@codl 的答案是正确的，但它是不完整的。根据规范，crisp-edges有pixelated两种不同，而不仅仅是一种。

1. crisp-edges允许从根本上不同于最近邻的像素缩放算法。其他非平滑像素缩放器的示例包括hqx系列和EPX/Scale2x。但是，pixelated必须使用最近邻或类似的。

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

造成这些差异的原因是它pixelated是为像素化精灵设计的，即使在大尺寸下也可以清晰地像素化，但crisp-edges旨在防止图像边缘变得模糊。如果按比例缩小，小精灵会变得更模糊是可以的，因为它的像素化程度不会低于其原始尺寸。并且使用像素艺术缩放算法确实可以保持清晰的边缘，但它也减少了像素化，这与pixelated设计的目的相反。

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

Answer 2

根据规范，似乎crisp-edge允许平滑像素艺术缩放算法，如 2xSaI 和 HQ2X；而pixelated只允许常见的最近邻缩放。