1

我正在使用图像处理库处理数百张图像以创建缩略图。缩略图占用空间并且需要额外的代码来处理。假设您不需要裁剪缩略图并希望保持比例。

简单地调整 HTML 或 CSS 中的图像大小有什么缺点吗？

<img src="image.jpg" width="150"  />

几年前我不会问这个问题，但现在的网站加载速度超快。是否仍然不建议在 HTML 中重新调整图像大小？调整大小的图像的加载速度似乎与缩略图一样快。我知道在 HTML 中重新调整大小的图像会保持原始大小，但只要查看者看到缩略图，谁在乎呢？没有人下载缩略图。为什么我们不在 HTML 中调整图像的大小？

4

2 回答 2

2

因为由浏览器调整大小的图像需要更长的时间来加载，比渲染所需的计算能力更多，而且由于使用了不同的抖动方法，在浏览器之间甚至看起来都不一样。您将更快地超载您的服务器，并使用更多的带宽。

只需特别注意制作一个体面的服务器端图像缩放器。您的访问者，尤其是那些连接速度较慢和带宽上限的访问者，会非常感激它。

此外，即使是缩略图，我也建议在标签中提供图像宽度和高度。浏览器将使用该信息对页面进行一次布局，而不是每次检索另一张图像时都必须重新计算布局。

于 2012-09-18T03:29:04.840 回答
1

调整大小的图像意味着，您将原始图像的大小调整为缩略图大小并上传，以便主图像说1 MB，缩略图在周围200 KB。

width与标签一起使用不是一个好主意，<img />因为它占用了巨大的空间，因为您说过您将发出多张图像。所以，最好用 CSS 来控制它：

img {width: 150px;}
于 2012-09-18T03:28:09.470 回答