html - 图像如何加载到浏览器中？

Question

我有一张图片，原始尺寸假设为 1024px X 768px。当我通过 css 背景属性将它加载到网站中时，我会这样完成:

1. 背景:url('imgPath') 不重复；宽度:100px；高度:100px;
2. 背景:url('imgPath') 不重复；宽度:1024px；高度:768px;

我脑子里有一个简单的问题:两种样式加载页面的速度相同还是第一种方法加载页面的速度更快？

Answer 1

在这两种情况下，完整的图像都必须由客户端下载，因此加载时间是相等的。

如果您真的很在意:第一张图片会在几微秒后显示，因为它需要先重新缩放，然后再呈现给用户。

根据您是否使用服务器端脚本技术，您可以重新缩放并在服务器上缓存重新缩放的图像。示例:图像 url 可能看起来像 background.jpg?size=100x100，其中 background.jpg 实际上重定向到一个脚本页面，该脚本页面生成或加载以前生成的图像来自缓存的大小。