PC端页面，首屏图片比较多的情况下，怎么优化？

Question

这段时间做的一个页面，首屏需要加载的图片比较多，背景图体积就比较大了，还有一些零碎的图片部分，都需要首屏展现出来。想请教下大家，这种情况，可以在哪些方面进行优化，能够接近首屏‘秒开’的效果？

Answer 1

想到如下几点，请参考：
1）图片分发到CDN上
2）图片使用与主站不同的域名
3）图片使用多个二级域名，增加浏览器并发
4）非首屏使用lazyload
5）零碎的图片合并为一张大图，一次加载，使用css定位来显示
6）图片色彩丰富的使用jpeg，一般的使用png
7）压缩图片为webp格式
8）不会变化的图片，http头部增加expires字段，设定合理的过期时间，让客户端尽可能缓存久一点。

Answer 2

考虑图片压缩、cdn、懒加载等方案

Answer 3

按需加载，随着鼠标往下滚动而相应加载资源。

零碎的小图片，拼成一张图，用background-image加载。

不知道你们的图片服务器是什么，如果是七牛的话，可以链接后自己拼参数，来调整图片的大小以及质量的压缩。

Answer 4

如果图片比较小的话可以转换成base编码