html - 应用于图片的 css 是否会减小其文件大小？

Question

我以前从没想过这个，但真的很好奇。所以这里是 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.5MB左右，加了css后，视觉上确实变小了。我想知道的是，在这种情况下，用户的浏览器是否需要加载全尺寸图片，还是只加载小尺寸图片？

Answer 1

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

因此，答案是否。用户必须下载整个文件，即使使用 CSS 将其缩小。

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