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

Question

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

那有什么区别呢？

Answer 1

根据等级库的说法，crisp-edge似乎允许平滑的像素技术缩放算法，如2xSaI和HQ2X；而pixelated只允许公共的最近邻缩放。

Answer 2

虽然@codl的答案是正确的，但它是不完整的。根据等级库的说法，crisp-edges和pixelated有两种不同之处，而不仅仅是一种。

1. crisp-edges允许从根本上不同于最近邻的像素缩放算法.其他非平滑像素标度器的例子包括hqx家族和EPX/Scale2x。然而，pixelated必须使用最近的邻居或类似的.
2. crisp-edges同时适用于向上和向下扩展，而pixelated只适用于向上扩展。它使用与auto相同的算法进行降尺度。

造成这些差异的原因是，pixelated是为像素化的精灵设计的，即使在大尺寸的情况下，像素化也是明显的，但是crisp-edges的设计是为了防止图像的边缘变得模糊。对于一个小的雪碧来说，如果缩小的话，它就会变得模糊一些，因为它的像素化程度不会低于它的本地大小。使用像素-艺术缩放算法确实保持了清晰的边缘，但它也减少了像素化，这与pixelated的设计截然相反。

尽管如此，目前对于pixelated的建议使用与there无关，而是利用了双重缩放算法。例如，在HiDPI屏幕上，人们普遍认为auto升级到正常的auto会产生模糊的图标。使用pixelated可以使图标在不变得模糊的情况下缩小，但也允许它们正常地缩小。这允许在纯CSS中使用两种不同的缩放算法，而不必使用JavaScript来检查原始图像的大小或最终显示大小。

Answer 3

规范在2021年2月发生了变化。。

crisp-edges现在的意思是“使用最近的邻居”，而pixelated的意思是“保持它看起来像像素化的”，这可以翻译为“如果您想做比最近的邻居更好的事情保持图像像素化”。

当前的现实(2022年)是，crisp-edges (仅在火狐中实现)和pixelated (在Chrome/Edge和Safari中实现)实际上是作为最近邻过滤实现的。

但是功能方面的注意:如果您有一个图像，您试图使用image-rendering: crisp-edges扩展您的用户可能没有得到您预期的结果。问题是，CSS以CSS像素为单位工作。CSS像素被转换为设备像素。从CSS像素到设备像素的转换称为devicePixelRatio。devicePixelRatio 可以是一个非整数值.

因此，例如，您有128x128像素图像，您希望使用这样的image-rendering: pixelated缩放到256x256。

<img src="128x128.png" style="width: 256px; height: 256px; image-rendering: pixelated">

你认为用户会看到原始图像的每个像素被缩放到2x2。

但是，用户的devicePixelRatio可能不是整数。我的桌面的devicePixelRatio是1.25，这意味着询问width: 256px; height: 256px;的样式，最终会产生一个320x320设备矩形。128x128.png将被缩放到320x320，使用image-rendering: pixelated，当实现为nearest-neighbor时，意味着一些像素将被缩放到2x2，而另一些像素将被缩放到1x1。

这里可以看到一个例子。这是64x64 Here

这里有3种将其缩放到128x128的方法

1. 默认(图像渲染:平滑)
2. 图像渲染:像素化
3. 离线缩放到256 x 256，然后使用默认的缩放到128 x 128(图像呈现:平滑)

​

.inline {
  display: inline-block;
  border: 1px solid red;
  text-align: center;
  padding: 10px;
}

<div class="inline">
  <img src=https://developer.qcloudimg.com/http-save/yehe-900000/a5661cc61014340e0795518e7cddbc37.png
       style="width: 128px; height: 128px;">
  <div>smooth up</div>
</div>

<div class="inline">
  <img src=https://developer.qcloudimg.com/http-save/yehe-900000/a5661cc61014340e0795518e7cddbc37.png
       style="width: 128px; height: 128px; image-rendering: pixelated">
  <div>pixelated up</div>
</div>

<div class="inline">
  <img src="https://i.imgur.com/aahR6GT.png"
       style="width: 128px; height: 128px;">
  <div>smooth down</div>
</div>

<p>zoom in/out with Ctrl/Cmd +/-</p>

​

如果运行代码段，然后放大浏览器(Ctrl/Cmd +/-)，至少在我的机器上，前2看起来比上一台糟糕得多。

这里还有一个在JavaScript中扩展图书馆，它确保图像总是缩放到设备像素的倍数，从而使image-rendering: pixelated/crisp-edges更有用。