在html文档中，使用高度和宽度标签调整图像大小是不好的做法吗？

Question

如果我有一个徽标图像，并且我想在另一个要求它尺寸较小的页面上使用它，那么我的本能是创建一个新的图像，使用图形编辑器调整大小。但是，我听说如果我通过改变图像标签中的高度和宽度来引用原始图像并通过浏览器调整其大小，则对用户更好。

所以我问群众，这里的最佳做法是什么？

感谢您的时间，

- 亨利

Answer 1

我的默认响应是“在图形应用程序中调整大小”，但这取决于您使用它的方式。

当您将图像大小调整保留到浏览器时，必须先下载原始（全尺寸）图像，然后浏览器才能以较小的比例显示图像。这意味着您使用更多带宽，并且您的网页需要更长时间才能加载。但是，如果您主要在整个站点中使用较大的图像，那么始终使用此图像会更快，因为浏览器可以对其进行缓存。

如果您关注图像质量，您将获得更好的结果，并且可以使用专用图形应用程序更好地控制下采样过程，以调整图像大小。

Answer 2

使用CSS或高度和宽度标签调整图像大小是很好的。你唯一要注意的是制作非常大的图像，因为它显然不会降低下载大小。

当您有效地缓存图像时，这样做最有效，因此不会再次下载。那么你将从中获得实实在在的好处。我通常只是将图像的最后修改时间附加到URL，例如：

<img src="/images/log.png?1233454568">

然后将Expires标头设置为从现在开始的一年。如果图像发生变化，则mtime会发生变化，它会强制浏览器重新加载它。

建议用于图片，Javascript和CSS文件。

Answer 3

如果浏览器使用高度/宽度标记为您调整图像大小，则可能以较低质量的图像结束，实际上取决于图像类型（如照片与简单图形），因此请在一些常见的浏览器中试用。但是，在图形编辑器中调整图像大小是确保高质量调整大小操作的唯一方法。

Answer 4

在图形编辑器中创建较小的图像，原因如下：

1. 如果用户尚未缓存较大的图片，他们将不必要地下载较大的文件。

2. 调整图像客户端的大小会导致一些不可预测的缩放质量。

3. 无论如何，在HTML中进行操作是不明智的，因为您应该通过CSS来表达问题（例如元素大小）。