根据 MDN当前建议的 CSS image-rendering 属性值为 auto、crisp-edges 和 pixelated。但我看不出 crisp-edges 和 pixelated 之间的区别，因为两者都应该只是放大像素而不是插值任何东西。
那么区别在哪里呢？
最佳答案
虽然@codl 的回答是正确的，但并不完整。根据spec 、crisp-edges 和 pixelated 在两个方面有所不同，而不仅仅是一个。
crisp-edges允许使用与最近邻算法根本不同的像素缩放算法。其他非平滑像素缩放器的示例包括 hqx家庭和EPX/Scale2x .但是，pixelated必须使用最近邻或类似方法。crisp-edges适用于放大和缩小，而pixelated仅适用于放大。它使用与auto相同的算法进行缩小。
这些差异的原因是 pixelated 是为像素化 Sprite 设计的，即使在大尺寸的情况下也能清晰地像素化，但 crisp-edges 被设计为防止图像的边缘变得模糊。如果按比例缩小，小 Sprite 变得模糊是可以的，因为它看起来像素化程度不会比原始尺寸小。使用像素艺术缩放算法确实可以保持清晰的边缘，但它也减少了像素化，这与 pixelated 的设计目的相反。
也就是说，目前提出了与 sprite 无关的 pixelated 用途，而是利用双重缩放算法。例如，在 HiDPI 屏幕上，通常认为 auto 升级到正常 DPI 会产生模糊的图标。使用 pixelated 可以让图标在不模糊的情况下放大，但也可以让它们正常缩小。这允许在纯 CSS 中使用两种不同的缩放算法，而无需使用 JavaScript 检查原始图像的大小或最终显示大小。
关于html - 图像渲染 "crisp-edges"与 "pixelated"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20678639/