Javascript 使我的背景图片加载速度更快
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26452407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making my background images load faster
提问by Jakob Abfalter
body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}
I have a different Background images on each site an since they are 1080p they take a bit to load.
我在每个站点上都有不同的背景图像，因为它们是 1080p，所以加载需要一点时间。
I use wordpress 4.0.5 with minamaze theme.
我使用带有 minamaze 主题的 wordpress 4.0.5。
I have found out that my use a preload javascript function, but in my case on the frontpage I do not have information about the background image of the other sites so I am hoping someone could provide me with a different solution.
我发现我使用了一个 preload javascript 函数，但是在我的首页上，我没有关于其他网站的背景图片的信息，所以我希望有人可以为我提供不同的解决方案。
My images are .pngs with round about 1mb size, maybe I also could try to compress them some more?
我的图像是大约 1mb 大小的 .png，也许我也可以尝试再压缩一些？
Thanks in advance
提前致谢
回答by George Kormaris
You shouldn't use .png for such an image. As a general rule, photographs should be .jpg and graphics (eg. logos) should be indexed .png
您不应将 .png 用于此类图像。作为一般规则，照片应为 .jpg，图形（例如徽标）应为 .png 索引
I reduced the file size by ~89% down to 139KB from 1.3MB and the visual difference is barely noticeable.
我将文件大小从 1.3MB 减少了约 89% 到 139KB，视觉差异几乎不明显。
Here's the optimized image: Optimized
这是优化的图像：优化
And here's yours: Original
这是你的：原始的
回答by Fahad Hasan
You can cut down the time which your website takes while loading by a huge margin if you use CSS3 background-gradients instead of the large background-images. Talking about your homepage background-image for instance, you can create a background=gradient like this and use the image of the lady as the background-image and position it to the right:
如果您使用 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>回答by Memophysic
I think the way to go is compress to JPEG files. You can choose the degree of compression in most software (I use GIMP). 1 Mb is by all practical means way too big for a background image.
我认为要走的路是压缩为 JPEG 文件。您可以在大多数软件中选择压缩程度（我使用 GIMP）。1 Mb 对于背景图像来说绝对是太大了。
回答by Matthias Seifert
Since you only use a gradient and the woman, you could realize the Color gradient with css3 and only load the woman as an image:
由于你只使用渐变和女人，你可以用 css3 实现颜色渐变，只加载女人作为图像：
CSS:
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 */
}
Fiddle: http://jsfiddle.net/n4anrzk8/1/
小提琴：http: //jsfiddle.net/n4anrzk8/1/
Or you try to use https://tinypng.com/to get smaller png files, if it has to be an image.
或者您尝试使用https://tinypng.com/来获取较小的 png 文件，如果它必须是图像。
Another, pretty bad method, would be loading ALL images with width 0 at the first page. They are not visible, but the browser will save them in the Cache (if the visitor using the Cache of his browser). I don't recommend this method, it's just for completeness.
另一个非常糟糕的方法是在第一页加载宽度为 0 的所有图像。它们不可见，但浏览器会将它们保存在 Cache 中（如果访问者使用其浏览器的 Cache）。我不推荐这种方法，它只是为了完整性。
回答by PraBhu
Compress your image using https://tinyjpg.comor https://tinypng.com. Always make sure your image is as losslessly compressed as possible, it will create a huge difference in loading time.
使用https://tinyjpg.com或https://tinypng.com压缩您的图像。始终确保您的图像尽可能无损地压缩，它会在加载时间上产生巨大的差异。
