让我的背景图片加载速度更快答案

【问题标题】：Making my background images load faster让我的背景图片加载速度更快
【发布时间】：2014-12-14 15:41:24
【问题描述】：

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 大小的 .png，也许我也可以尝试再压缩一些？

提前致谢

【问题讨论】：

标签： javascript html image css

【解决方案1】：

如果您使用 CSS3 背景渐变而不是大背景图片，您可以大幅缩短网站加载时间。以您的主页背景图像为例，您可以像这样创建一个 background=gradient 并将女士的图像用作背景图像并将其放置在右侧：

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

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

【讨论】：

我有一个类似的question。我想知道你是否可以看看。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您不应将 .png 用于此类图像。作为一般规则，照片应为 .jpg，图形（例如徽标）应为 .png 索引

我将文件大小从 1.3MB 减少到 89KB 约 93%，视觉差异几乎不明显。

这是优化后的图片：Optimized

这是你的：Original

【讨论】：

你用什么方法压缩下来的？
我使用 Photoshop 导出为 jpg，质量为 100%。几乎任何库、API 或在线服务都应该达到相同的效果。
@GeorgeKormaris 我有一个类似的question。我想知道你是否可以看看。

【解决方案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 的图像。它们不可见，但浏览器会将它们保存在缓存中（如果访问者使用浏览器的缓存）。我不推荐这种方法，它只是为了完整性。

【讨论】：

【解决方案5】：

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

【讨论】：