多图网站优化处理

一个页面上有大量图片资源的网站，有哪些方法能优化加载速度慢的问题？

根据不同的业务场景及条件资源等因素，从前端、后端、内容输出端有不同选择。

图片格式优化类

(1)webP了解一下

优点：图片文件体积小；
缺陷：用户端支持性差，兼容受场景限制。
具体应用：在APP内部允许进行兼容处理；前端或服务器端用js作判断进行响应式加载。

(2)jpeg了解一下

优点：相对jpg和png在体积上有微弱优势，压缩方式能实现从模糊到清晰的加载。

前端加载方式优化类

(3)懒加载

插件。或原生js写滚动条事件，判断图片位置与浏览器顶端距离与页面距离。

(4)预加载

提前加载：相册类推荐有序预加载。
参考：实现图片预加载的几种方式

(5)用原生js实现缩略图-替换

(6)base64

CSS图片处理技术

(7)CSS精灵图

略。

(8)svgsprite

参考：SVG Sprite技术介绍

(9)iconfont字体图标

略。

后端/服务端压缩

(10)服务器端压缩

条件：图片显示区域较小。
处理方式：服务器端将图片压缩到显示区域大小后传输。

---

2018.4.18