使用HTML / CSS调整图像大小会产生比Fireworks等更好的结果吗？

Question

我通常会在Fireworks中拍摄一张图片，将其更改为网站的正确尺寸，然后将其导出为网页，如JPG / PNG。这很好。

我一直注意到，如果我在<img>标记中使用较大的图像，然后使用CSS width属性调整大小，那么它将比我在其中重新调整大小更清晰，更清晰Adobe产品。

其他人是否获得相同的体验？例如：拍摄100x100的图像，在Fireworks中调整为50x50，使用CSS调整为50x50，使用CSS调整大小时图像看起来更好。

我理解图像越小，网站加载时间等越好。

Answer 1

这取决于浏览器和图像处理程序。

使用CSS或HTML调整大小时，您要求浏览器进行大小调整，而不是提供预先调整大小的图像。

生成的已调整大小的图像是否“更清晰”取决于图像，浏览器和使用的调整大小算法（bicubic，bilinear，Lanczos等）。

对于最佳结果，您应自行调整大小。您可以在图像处理程序中尝试许多不同的调整大小算法。使用浏览器，您依赖于该浏览器来提供正确的调整大小算法，并且您不能保证每个访问者都使用相同的浏览器...

http://en.wikipedia.org/wiki/Image_scaling

另外，正如@PeeHaa已经注意到的那样，为浏览器提供更大的图像意味着更多的加载时间。它也意味着浏览器中的RAM使用量会增加。

Answer 2

  

我一直注意到我是否在拍摄时使用了更大的图像，然后调整它的宽度，CSS宽度会更清晰，更清晰。看起来更好，然后在Adobe产品中调整大小。

那将是第一次。

通常在网络上，您应该只提供尺寸正确的图像，以获得最佳效果。

另外正如您已经说过更大的图像==更多的加载时间（对于相对较小的图像）。

修改

我刚刚查看了Fireworks的内容:)为网页创建图像的东西可能不是调整图像大小的最佳工具（我认为它也可以进行压缩）。你试过PhotoShop / Illustrator吗？

Answer 3

我的猜测是，您正在使用的特定浏览器使用更好/更适合您使用的程序的特定图像大小调整算法。

您可以使用像gimp这样的随机图像编辑器，然后查看调整大小选项，您可以选择其中一种插值方法。

除非您的浏览器也在进行一些额外的图像缩放。

Answer 4

使用CSS时，它完全基于浏览器。 Firefox似乎非常擅长缩小图像尺寸，但Internet Explorer（至少是IE6 / 7）对它来说是非常可怕的。

您可能想尝试在Photoshop或其他图形编辑工具中更改调整大小方法。 Fireworks可能使用固定算法。我发现bicubic resize在大多数情况下效果最好，但如果你有锋利的边缘或清晰的线条，它可能会有不同的情况。

您还应该在不同的屏幕上测试您的图像。我曾经遇到过一个相当“线条”的图像在一个屏幕上看起来很糟糕但在另一个屏幕上看起来很完美的情况。