html - 使用 HTML/CSS 缩小图像大小是否会产生比 Fireworks 等更好的结果？

Question

我通常在 Fireworks 中拍摄图像，将其更改为适合网站的大小，然后将其导出为 JPG/PNG 格式以供网络使用。这很好。

我一直注意到，如果我在 <img> 中使用较大的图像标记，然后使用 CSS width 调整它的大小属性，它会比我在 Adob​​e 产品中调整它的大小更清晰。

其他人有同样的经历吗？例如:拍摄一张 100x100 的图像，在 Fireworks 中调整为 50x50，使用 CSS 调整为 50x50，图像在 CSS 调整大小后看起来更好。

我理解图像越小对网站加载时间等的影响就越大。

Answer 1

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

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

生成的调整后的图像是否“更清晰”取决于图像、浏览器和使用的调整大小算法(双三次、双线性、Lanczos 等)。

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

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

此外，正如@PeeHaa 已经指出的那样，为浏览器提供更大的图像意味着更多的加载时间。它也意味着浏览器使用更多的 RAM。