使我的背景图片加载速度更快

http://www.leona-anderson.com 使我的背景图片加载速度更快

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

我对每个站点的不同的背景图像，因为它们是1080，他们需要一点加载。

我使用wordpress 4.0.5与minamaze主题。

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

我的图像是一个大约1mb大小的png，也许我也可以尝试将它们压缩一些？

在此先感谢

来源

2014-10-19 Jakob Abfalter

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

我将文件大小从1.3MB减少到139KB，视觉差异几乎没有引人注意。

下面是优化的图像：Optimized

这里是你的：Original

来源

2014-10-19 16:16:25

你用什么方法压缩它？ – 2015-08-01 00:14:59

我使用Photoshop导出为jpg，质量为100％。几乎任何图书馆，API或在线服务都应该达到相同的结果。 – 2015-08-02 12:19:39

下来就可以减哪个网站巨大的优势，如果你使用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); 
 
}

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

来源

2014-10-19 16:13:00

我想要走的路是压缩到JPEG文件。你可以选择大多数软件的压缩程度（我使用GIMP）。 1Mb对于背景图像而言实际上意味着太大。

来源

2014-10-19 16:13:43 Memophysic

您是否考虑将背景缓存到用户设备，以便重复使用的用户具有更快的加载时间link？

来源

2014-10-19 16:15:56 Oliver

既然你只使用一个梯度和女人，你可以用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的图像。它们不可见，但浏览器将它们保存在缓存中（如果访问者使用其浏览器的缓存）。我不推荐这种方法，它只是为了完整性。

来源

2014-10-19 16:24:44

使我的背景图片加载速度更快

回答

相关问题