|
阅读：3245回复：4
禁用 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了。 |
|
|
1楼#
发布于：2013-03-11 23:12
多谢分享。
还是要注意这个讨论选区的图片不一定是最具代表性的，cris-edge 不一定对其他像素密度较高的jpg, png 图像有益。 |
|
|
|
2楼#
发布于：2013-03-11 23:12
它沒提供原始圖檔這樣怎搞...
圖有多小就看多小就好了，沒事把它放大做啥  |
|
|
|
3楼#
发布于：2013-03-11 23:12
我倒是建议不要禁用该功能。一般用户，遇到缩小图片的机会远远高于放大图片的机会，如果禁用此功能，缩小的图片显示非常糟糕（包括像素画缩小后的效果）。给一张测试图http://hello.eboy.com/eboy/wp-content/uploads/shop/ECB_PartsPoster_18s.png
|
|
|
4楼#
发布于：2013-03-11 23:12
|
|
|
