禁用 Firefox 的图像平滑算法 【原创翻译】

出处：
Disable Firefox's Image smoothing algorithm -
http://www.ghacks.net/2013/03/11/disabl ... algorithm/
By Martin Brinkmann on March 11, 2013

摘要：
本文比较了 Firefox 的两种图像渲染方式，提供了在浏览器中切换图像渲染属性的方法。

正文：

这几年，各大网络浏览器纷纷开始将算法应用到网页图像上了。通常网页的图像的显示并不是什么问题，我们也不会注意到算法上有什么不同。但当你对网页图像进行放大、缩小操作时，你就能注意到某些特殊类型的图像在被放大之后显得模糊不清了。

在 Firefox 中，这是由图像渲染 CSS 属性控制的。这个属性的默认值是自动（auto）的，也就是使用了一个叫做平滑色彩的缩放算法。目的是针对放大的图像，提高图片的显示质量。但使用这个方法的同时，也给其他类型的图像显示带来了困扰，特别是像素画会在这种算法上表现得很模糊。（译者注：像素画，pixel art，是指专注于像素控制的图像，并不是非数字作品。区别于其他类型的图像，像素画只是艺术家对图像精确到像素级别来控制的结果。）

最近在 Reddit 有一个帖子（链接），用两副极具代表性的图像，突出了这个问题。下面的第一幅图使用了自动算法来调整图片。注意这两个图像都是放大显示了的。

图片：01firefox-blurry-image.jpg

第二幅图显示的场景与第一幅图一样，只是它把图像渲染的属性置为边缘突出（crip edges）。

图片：02firefox-crisp-pixel-art.png

比较两幅图，你会注意到第二幅图看起来很清晰，第一幅图则显得很模糊。

在 Firefox 中可以很轻松地切换图像渲染的属性，我这就展示一下如何在瞬间完成这个切换的动作。在这之前必须提醒注意的是，这么干会对浏览器放大照片时的显示产生一些影响。

1、依次点击 Firefox > 帮助 > 疑难解答信息。
2、在“应用程序基础”中，找到“配置文件夹”，旁边会有一个按钮，点击它就能打开目前你使用的配置文件所在的目录。
3、在配置文件夹中找一个叫做 Chrome 的目录并打开，如果目录不存在就手动新建一个。
4、打开 Chrome 目录里边的 userContent.css 文件，如果不存在，新建之。（译者注：新建个文本文档然后改名即可）
5、将引号中的内容（不包括引号）粘贴到文件中，“img { image-rendering: -moz-crisp-edges; }”。
6、这样，浏览器中图像类元素的显示，将使用“边缘突出”的属性了。
7、重启 Firefox。

如果想切换回原来的图像显示效果，只需要在 userContent.css 文件中删除这一行，然后重启浏览器就OK了。