image-rendering:像素化

保罗·金兰

作为 Web 开发者，我们一直喜欢处理图片，在大多数情况下，浏览器擅长缩放图片，使其适应我们网站设计的边界，同时又能保持图片的美观。但是，如果您想控制浏览器缩放网页上图片的方式，会发生什么情况呢？

Chrome 41（2015 年 1 月发布的 Beta 版）引入了新的 CSS 属性 image-rendering: pixelated（规范），可让您更好地控制浏览器呈现放大后的图片的方式。

CSS 属性 image-rendering 和值 pixelated 很有意思，因为它们会关闭浏览器的标准平滑缩放（通常为双线性插值）并在调整图片大小时将其替换为其他缩放算法（在大多数情况下是最相邻的）。

假设您有一张 2×2 像素的图片，并将其放大到 100×100 像素，浏览器在渲染该图片时不会使其看起来有块状。例如：

流畅渲染

在很多情况下，您并不希望出现这种平滑行为，而是改用一种能保留更准确的图像表示方法的方法。

如需实现此效果，您只需将 image-rendering: pixelated; 应用于图片，如下所示。

<img
    style="image-rendering: pixelated;"
    width="100" height="100"
    src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
像素化渲染

试用演示版。如您所见，应用属性会对图片的渲染方式产生重大影响。

此属性可在许多位置应用：

  • <img> 元素
  • <canvas style="image-rendering: pixelated"> 元素
  • 具有 background-image 属性的任何元素

我还是不明白。我应该在哪里使用它？

如果您只在网站上显示照片，则可能不需要此功能。

游戏就是很好的用例，您经常必须放大画布，使其正确适应屏幕尺寸。在此 CSS 属性之前，浏览器会插入画布，使其看起来很模糊（请参阅下文 [sic]）。

如果您要开发机票工具或显示二维码的应用，那么用户经常会希望它全屏显示以便于浏览，因此控制图片渲染至关重要。

如果您想查看实现效果，请参阅问题 317991（对于清晰值实现，问题尚未关闭。给问题加注星标，以便跟踪实施情况）。