H5页面存在大量图片时，如何做好优化

Question

问题描述

一个移动端的页面，页面主要内容均通过图片展示，首次加载比较耗时，首屏图片就有300k左右。

问题出现的环境背景及自己尝试过哪些方法

1.懒加载，目前采用window.onload的方式，延迟加载图片。因为页面有导航组件，需要快速定位至指定位置，滚动式的懒加载试过，效果不理想，被视觉同学否了；
2.压缩，所有图片均已通过工具进行压缩，但提及还是在2MB左右，再压估计就糊了。。

有没有大佬有过类似的经验，求指教。

Answer 1

平常做这方面优化总结以下几点：

1. 压缩：压缩是肯定的，但不知道你是怎么压缩的，2M的图太恐怖了，tinypng试试看有没有压缩的更好一点。
2. CDN：花点钱上CDN，比如七牛，还有一点免费空间呢
3. 按屏幕分辨率加载图片？@1x图、@2x图
4. 懒加载：进入视觉范围的时候再加载，需要快速定位至指定位置，那就添加滚动动画，延迟用户到达指定图片的时间，趁机加载
5. 加大带宽：加大服务器带宽

如上，平常总结的就这几点了，其中有些点可能可以叠加，比如压缩、CDN，有些点是互斥的，比如CDN、服务器带宽。至于你的情况，先尝试压缩、CDN吧，加大带宽还不如上CDN，@x图可以配合CDN预定义样式就能实现。

所以CDN赛高，CDN有时候也不叫这名，有时候叫OSS，七牛、阿里云、腾讯云基本都提供这功能，我们公司把整个静态站点都放到CDN上了，速度感人。