10

我以前从未想过这个,但我真的很好奇。所以这里是html:

<img src="/employees/img/uploads/users/2013-09-12-115644edif.jpg" alt="Employee" class="user_img" />

这是CSS:

.user_img{
width: auto;
max-height: 200px;}

原始图片大小为 1.5 MB,因此在应用 css 后,它的视觉大小确实减小了。我想知道在这种情况下用户的浏览器是否需要加载全尺寸图片,还是只加载小图片?

4

5 回答 5

10

CSS 由用户的 Web 浏览器应用,该浏览器在其本地 PC 上运行。Web 浏览器下载图像后,它才会应用 CSS 缩放以显示小于实际图像大小的图像。

结果,答案是否定的。用户必须下载整个文件,即使使用 CSS 将其缩小。

要在发送前缩小图像,您可以使用 PHP 等服务器端语言,并生成适合最终显示尺寸的图像缩略图。这不仅会使您的页面加载速度更快,而且还会降低带宽需求。

于 2013-09-12T11:23:23.943 回答
2

通过 CSS 缩放发生在浏览器渲染页面时,在它下载完整图像之后,所以没有。

于 2013-09-12T11:24:45.010 回答
1

HTML、CSS 和 JavaScript 是客户端语言。一切都转移到客户端,然后进行转换。

如果要在将图像发送到客户端之前缩小图像的大小,则必须使用 PHP 等服务器端语言。

于 2013-09-12T11:26:34.363 回答
0

您调整图片大小(按比例缩小)的事实不会影响图像的“物理”大小。否则每个人都会使用 css 调整大小作为“文件”大小调整技术。

于 2013-09-12T11:24:41.277 回答
0

不,CSS 只会缩小(或放大)你的图片,但文件的大小永远不会改变。

于 2013-09-12T11:24:59.680 回答