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

Question

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

那么在哪里区别呢？

Answer 1

虽然@codl 的回答是正确的，但它并不完整。根据spec，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

根据spec，似乎crisp-edge 允许平滑pixel-art scaling algorithms，如2xSaI 和HQ2X；而pixelated 只允许常见的最近邻缩放。