网页图片加载怎么优化

Question

网页在首屏是一个较大的背景图时从打开网页到背景图片显示完全中间会有一个空白间隔，会有一个很不好的用户体验，请问这个问题怎么解决，希望能得到解答，谢谢！

Answer 1

图片懒加载就好了, 在图片加载之前放一个空白的图片在那, 空白的小图片可以用base64
比如做一个浅灰色圆角的空白图 看起来就很美观了
懒加载具体实现可以看我的项目
https://github.com/GitHub-Laz...

Answer 2

1. 原题中没有提及有关图片压缩方案的信息，这种用作背景图的图片，个人建议选择JPEG格式，可以再用TinyPNG做下压缩（Google官方新出的那个也不错，输出可以考虑用MozJPEG）这样一般1920×1080分辨率的图，大小也能控制在300~500k左右，在PC端除非前边同步阻塞的资源太多，否则加载应该没太大压力。
2. 可以考虑下用JPEG渐进式编码，也可以改善空白时间的问题。另外也可以直接在head里加个同步script标签做下预加载，手写就行，300k左右预加载应该花不了多少时间，当然如果感觉页面空白太长，那就可以开始考虑Loading屏了。

Answer 3

网页在 首屏 是一个 较大 的 背景图 时从打开网页到背景图片显示完全中间会有一个空白间隔

3个关键点：首屏、较大、背景图

针对性优化：

• 首屏优化
  首屏就需要让首屏资源优先加载，先完成一次渲染，再继续后续资源的下载和执行。
  对于非首屏资源，尽可能地延迟、按需加载。
• 较大
  这是资源本身的优化，如果控制不了可以向资源提供方提出要求。
  方案有减小文件尺寸、使用webp、考虑渐进式JPEG等。
• 背景图
  背景图意味着有前景内容，可以优先展示前景内容，并考虑丰富一下前景内容。
  还可以在背景图加载过程中适当做些动画，比如先加个小尺寸模糊图，大图下载完了替换，以提高视觉体验。

Answer 4

要么loading要么想办法缩小图片体积。不考虑兼容可以试试webP图片格式，效果极佳。

Answer 5

如果会PS的话，可以试着压缩一下图片。

Answer 6

用两张大小的图片，第一张非常小，100K以内，懒加载第二张替换第一张

Answer 7

主要是以压缩为主，然后你可以预加载，先用一张小图盖上去，然后大图慢慢让他加载（方法：img添加背景图片）

Answer 8

从技术和设计两个方面来说。

1. 技术上如何提高图片的加载速度，可以采用的技术无非是压缩体积，并保证只加载足够分辨率的（如果图片分辨率远超设备分辨率就没有意义）图片即可。预加载缩略图/显示loading是从交互层面改善体验，可以酌情使用。
2. 设计上，可以参考淘宝/天猫首页，尽量的避免首屏大图，或者使用图标+css的方式替换大图。当然，这个需要产品经理/设计师/程序员三方达成一致，并不那么容易，但私以为是最好的做法。