Question

我有一张图片原始尺寸假设1024px X 768px。当我通过css后台属性在网站上加载它时，我会这样做：

background: url('imgPath') no-repeat; width: 100px; height: 100px;
background: url('imgPath') no-repeat; width: 1024px; height: 768px;

我的想法很简单：两种风格是否以相同的速度加载页面，或者第一种方法是否以更高的速度加载页面？

Answer 1

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

如果你真的在意：第一张图片会在几微秒后出现，因为它需要先重新调整才能呈现给用户。

根据您是否使用服务器端脚本技术，您可以在服务器上重新调整和缓存重新缩放的图像。示例：imageurl看起来像background.jpg?size=100x100，其中background.jpg实际上重定向到脚本页面，该脚本页面从缓存生成或加载所需大小的先前生成的图像。

Answer 2

假设两个图像的'imgPath'相同，两者都会同时加载，因为它应该只加载一次。您似乎认为宽度和高度可能会影响图像的加载方式，而事实并非如此。

http://jsfiddle.net/ericjbasti/AKGB5/

你也可能这样做：

background-size: 100% 100%;

如果您希望高度和宽度缩放图像。

Answer 3

我将是相同的，因为CSS在客户端工作，所以在两种情况下加载整个图像。 “加快”加载时间的唯一方法是在服务器端减少图像。

在这种情况下，我会说你最好使用缩略图，否则你会浪费宝贵的服务器资源。

Answer 4

正如其他人所说，速度会相同。您可以随时尝试这样的媒体查询：

   @media all and (min-width: 601px) {
     html {
     background: url('imgPath') no-repeat; width: 1024px; height: 768px;
     }

   }

   @media all and (max-width: 600px) {
     html {
     background: url('imgPath') no-repeat; width: 100px; height: 100px;
     }
   }

这是一篇非常好的文章：http://timkadlec.com/2012/04/media-query-asset-downloading-results/

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

4 个答案: