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.5 MB，因此在应用css之后，它的视觉大小确实会降低。我想知道的是，如果用户的浏览器需要在这种情况下加载完整大小的图片，还是只加载小图片？

Answer 1

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

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

要在发送之前缩小图像，可以使用服务器端语言（如PHP），并生成适当的最终显示大小的图像缩略图。这不仅可以加快页面加载速度，还可以降低带宽需求。

Answer 2

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

Answer 3

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

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

Answer 4

您调整图片大小（缩小图片）这一事实不会影响图片的“实际”尺寸。否则，每个人都会使用css sizing作为'文件'调整大小的技术。

Answer 5

不，CSS只会缩小（或向上）图片，但文件大小永远不会改变。