image-rendering

image-rendering 属性定义了浏览器在将图像按比例放大或缩小到其原始尺寸以外的尺寸时应该如何渲染图像。 默认情况下，每个浏览器都会尝试对缩放后的图像应用抗锯齿，以防止失真，但这有时会成为问题，因为我们希望图像保留其原始像素化形式。

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;

  /* Safari seems to support, but seems deprecated and does the same thing as the others. */
  image-rendering: -webkit-optimize-contrast;
}

关于这三个可能的值

• auto：默认值，它使用浏览器的标准算法来最大限度地提高图像的外观。
• crisp-edges：图像的对比度、颜色和边缘将保留，不会进行任何平滑或模糊处理。 根据规范，这专门针对 像素艺术。 此值适用于放大或缩小的图像。
• pixelated：随着图像尺寸发生变化，浏览器将通过使用 最近邻缩放 来保留其像素化样式。 此值仅适用于放大的图像。

此属性可以应用于背景图像、canvas 元素以及内联图像。 但是，重要的是要注意，由于目前浏览器支持不一致，因此测试这些值特别令人困惑。

示例

这是一个非常小的内联图像，由四个彩色像素组成

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==">

如果我们将此内联图像的宽度更改为 300px，那么在 Chrome（41）中，我们会发现浏览器已尽力优化图像

为了保留其原始像素化外观，我们可以使用以下 pixelated 值，如下所示

img {
  image-rendering: pixelated;
}

这将导致浏览器选择另一种算法来处理图像。 在此示例中，Chrome 将删除默认抗锯齿

不幸的是，经过大量的测试，似乎浏览器目前以非常混乱的方式解释 crisp-edges 和 pixelated 值，因此再次强调，此规范仍处于早期阶段。 例如，Chrome 似乎以与 Firefox 和 Safari 渲染带有 crisp-edges 的图像相同的方式渲染 pixelated 图像。

QR 码示例

此属性的另一个用例可能是用于 QR 码，您希望通过使用标准抗锯齿来增大其尺寸，而不会使其失真。 确保在 全屏模式 下查看此示例，以查看图像的拉伸

切换示例

在下面的 Pen 中，可以在这两个值之间切换，并查看浏览器之间的差异

其他资源

• MDN 上的 image-rendering
• W3C 上的 image-rendering
• HTML5 Rocks 教程

浏览器支持

crisp-edges 目前需要供应商前缀 (-moz-crisp-edges) 以获得尽可能好的支持。

在更新时，Firefox 61 支持 crisp-edges 但不支持 pixelated，Chrome 68 支持 pixelated 但不支持 crisp-edges。