关于首页背景图片加载的问题

Question

网站首页有一张很大的背景图，如何提升背景图的加载速度？做用户体验优化可以考虑配合css各种效果去实现，但是实际上加载速度并未获得提升，有什么方法提升背景图片的加载速度吗？希望大佬给个思路！

Answer 1

图片太大加载速度受服务器带宽影响，带宽不够的话，放对象存储服务器。

Answer 2

• 图片放cdn
• 图片转jpg
• 图片压缩，控制给用户显示清晰即可。比如给用户展示一个人物图片，没必要给用户展示的图片可以放大到腿毛都看的见（非常高清）。
• 用preload预加载，可以参考 bing[https://cn.bing.com]

<link id="bgLink" rel="preload" href="/th?id=OHR.BlueChip_ZH-CN7376022522_1920x1080.jpg&amp;rf=LaDigue_1920x1080.jpg&amp;pid=hp" as="image">

Answer 3

很大是多大，几M吗？有这么几个方法可以参考下：
1.转成base64——这适用于图片不大的情况，因为base64的字符占据的字节通常比图片还大，所以小图可以考虑采用这种方式
2.分段——把一个大图分成几段小图加载，因为浏览器可以并行加载资源，但可能会额外增加http的一些传输量，所以也要考虑是否适用，以及要分几份的问题。
3.图片格式——考虑下不同图片格式，比如据我所知webp好像是综合表现最好的一个图片格式
前端能做的大概就是这么些吧，当然图片压缩这种是最基本的肯定是要做的。如果你还能动服务器或者在网络层上做些文章也是能优化一些的，但这个我就不太了解了，比如服务器开启http2之类的。

Answer 4

可以做缓存处理 .appcache

Answer 5

楼上该说的都说了.
补充一点.

当图片为jpg时,可以有两种加载方式,一种逐行加载,就是最常见的,从上而下一点一点加载出来.

还有一种就是由模糊而清晰的方式.
这种方式也有两种实现方式,一种是Interlaced,一种是Progressive,从PS导出时,可以选择.
如果用了OSS,一般也会提供参数控制,比如阿里云

Answer 6

首先这不只是前端的问题，很多前面的同学已经回答过了，我补充一下合作的问题，如果这个图片比较重要，觉得很可能是设计师设计的，那么可以设计线条感图形比较多的这样的图片，控制在300K一下。不要弄照片呀，渐变呀这样的大图都是几兆的大小，再怎么优化都是没用的。