我以前从未想过这个,但我真的很好奇.所以这是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后,它的视觉大小确实会降低.我想知道的是,如果用户的浏览器需要在这种情况下加载完整大小的图片,还是只加载小图片?
CSS由
用户的Web浏览器应用,该浏览器在其本地PC上运行.在Web浏览器下载图像之后,它仅应用CSS缩放以将其
显示为小于实际图像大小.
结果,答案是否定的.用户必须下载整个文件,即使使用CSS将其调整得更小.
要在发送之前缩小图像,可以使用服务器端语言(如PHP),并生成适当的最终显示大小的图像缩略图.这不仅可以加快页面加载速度,还可以降低带宽需求.