Question

http://www.leona-anderson.com

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

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

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

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

我的图片是大约1mb大小的.pngs，也许我还可以尝试再压缩它们？

提前致谢

Answer 1

你不应该将.png用于这样的图像。作为一般规则，照片应为.jpg，图形（例如徽标）应编入索引.png

我将文件大小减少了〜89％，从1.3MB缩小到139KB，视觉差异几乎不可察觉。

这是优化的图片：Optimized

以下是你的Original

Answer 2

如果您使用CSS3背景渐变而不是大背景图像，则可以减少网站在加载时所花费的时间。例如，在谈论您的主页背景图片时，您可以创建一个这样的背景=渐变，并使用该女士的图像作为背景图像并将其放置在右侧：

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

Answer 3

我认为要走的路是压缩到JPEG文件。您可以在大多数软件中选择压缩程度（我使用GIMP）。实际上，1 Mb对于背景图像来说太大了。

Answer 4

由于你只使用渐变和女人，你可以用css3实现颜色渐变，只加载女人作为图像：

CSS：

body {
  background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #B200FF , white); /* Standard syntax */
}

小提琴：http://jsfiddle.net/n4anrzk8/1/

或者您尝试使用https://tinypng.com/来获取较小的png文件（如果必须是图像）。

另一种非常糟糕的方法是在第一页加载宽度为0的所有图像。它们不可见，但浏览器会将它们保存在缓存中（如果访问者使用其浏览器的缓存）。我不推荐这种方法，只是为了完整性。

Answer 5

您是否考虑过向用户设备缓存后台，以便重复用户加载时间更短link？

Answer 6

使用https://tinyjpg.com或https://tinypng.com压缩图像。始终确保图像尽可能无损地压缩，这将在加载时间上产生巨大差异。

使我的背景图像加载更快

6 个答案: