浏览器如何加载图像？大拇指有必要吗？答案

【问题标题】：How browsers load images? Thumbs are necessary?浏览器如何加载图像？大拇指有必要吗？
【发布时间】：2014-10-24 06:59:45
【问题描述】：

当我在我的网站上创建画廊时，我需要大拇指吗？或者我可以使用完整图像并使用 css 调整其大小？

例如，我有这样的画廊：http://otomoto.pl/renault-20-r-20-1-6-1-6-gtl-C21940610.html 如果每个图像都将使用 css 调整大小，那么浏览器将多次加载相同的图像还是一次？当页面为 image01thumb.png、image01normal.png、image01full.png 时，页面加载速度会更快吗？还是只是 image01full.png？

【问题讨论】：

如果您发现这些答案有帮助，请务必选择一个作为您选择的答案。

标签： html css dom get browser

【解决方案1】：

这取决于您拥有什么样的画廊。显然，当您使用缩略图时，如果客户从未看到完整尺寸的图像，则不必下载完整图像。但是，如果您有一个动态图库，例如，您可以在鼠标悬停时使用补间/动画来放大图像，则最好先加载图像，以便过渡顺利进行。

【讨论】：

【解决方案2】：

如果你使用 CSS 调整大小，那么客户端将不得不下载整个图像并调整它的大小，这在带宽方面并不好。您需要一些缩略图大小的图像，这样您就可以将小图像发送给客户端，而不必发送完整的图像。

【讨论】：

但是当我把同一张图片放在很多地方时，浏览器会下载一次？
如果您对它使用相同的引用 (URL)，但在许多页面上，浏览器将（应该）缓存它并只下载一次，是的。