使我的背景图像加载更快

Question

body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}

Run Code Online (Sandbox Code Playgroud)

我在每个站点上都有不同的背景图像,因为它们是1080p,它们需要加载一些.

我使用带有minamaze主题的wordpress 4.0.5.

我发现我使用了预加载的javascript函数,但在我的情况下在首页我没有关于其他网站的背景图像的信息所以我希望有人可以为我提供不同的解决方案.

我的图像是大约1mb大小的.pngs,也许我还可以尝试再压缩一些？

提前致谢

Answer 1

Geo*_*ris 13

您不应该将.png用于此类图像.作为一般规则,照片应为.jpg,图形(例如徽标)应编入索引.png

我将文件大小从1.3MB减少了约89%到139KB,视觉差异几乎不可察觉.

这是优化的图像:优化

这是你的:原创

我使用Photoshop导出为jpg,质量为100%.几乎任何库,API或在线服务都应该达到相同的效果. (2认同)

Answer 2

Fah*_*san 8

如果使用CSS3背景渐变而不是大背景图像,您可以减少加载时网站占用的时间.例如,在谈论您的主页背景图像时,您可以创建这样的背景=渐变,并使用女士的图像作为背景图像并将其放置在右侧:

#content {
  display: block;
  height: 1500px;
}
body {
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff);
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div id="content"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，9 月前
查看次数：	18840 次
最近记录：	7 年，9 月前