我网站中某些图片的分辨率太低答案

【问题标题】：The resolution of some images in my website is too low我网站中某些图片的分辨率太低
【发布时间】：2014-07-17 09:16:43
【问题描述】：

如果你在 Firefox 中测试我的应用，你会看到一些分辨率太低。

You can test my web here.

将您的语言更改为英语，然后按“DISCOVER HOW >”按钮

然后点击游泳池图标：

您可能已经注意到，水针以较低的分辨率显示：

这是什么原因？

谢谢大家。

【问题讨论】：

您为什么没有将图像调整为您需要的大小？通过提供如此大的图像并使浏览器处理缩放，您将受到两种方式的影响 - 性能更差，因为它必须下载更大的文件和浏览器重新缩放不良。通过将图像设置为您想要的大小，您无需担心浏览器将如何调整其大小

标签： css image firefox rendering resolution

【解决方案1】：

试试这个demo

img{
    background:url(http://ecoavantis.com/fuertehoteles/images/pin_big_green.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
    width:100px;
    height:100px;
    display:block;        
}

<img src="transparent.png" />

【讨论】：

【解决方案2】：

快速浏览一下，它似乎并没有以较低的分辨率显示，但只是 Firefox 在将图像从 1476 像素正方形缩小到 64 像素正方形方面做得不太好。我会说尝试使用 photoshop 或类似的东西将图像自然地转换为 64px，这将在缩小比例方面做得很好，然后 Firefox 应该正确渲染它。

【讨论】：