html - 图像渲染 "crisp-edges"与 "pixelated"

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 是为像素化 Sprite 设计的，即使在大尺寸的情况下也能清晰地像素化，但 crisp-edges 被设计为防止图像的边缘变得模糊。如果按比例缩小，小 Sprite 变得模糊是可以的，因为它看起来像素化程度不会比原始尺寸小。使用像素艺术缩放算法确实可以保持清晰的边缘，但它也减少了像素化，这与 pixelated 的设计目的相反。

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