常见图片格式
详见：聊一聊几种常用web图片格式：gif、jpg、png、webp
图片应用场景
普通展示图片、图标等
示例
代码：https://github.com/js-fu/js-fu.github.io/tree/master/fe-img
1.html 普通静态页面
https://js-fu.github.io/fe-img/1.html
首先看到这是一个的普通静态页面，一个图文列表。在Disable cache和Slow 3G的环境下打开该页面，得到如下performance。
1.jpg
分析上图，可看出
DOMContentLoaded事件在2.37秒执行。load事件要等到全部图片资源都加载完，到了29.81秒才执行。如果通过监听load事件的话，要等很久才执行，体验比较差。而且静态页面内容是固定的，不灵活。
DOMContentLoaded和load事件
DOMContentLoaded: 当纯 HTML 被完全加载以及解析时，DOMContentLoaded事件会被触发，而不必等待样式表，图片或者子框架完成加载。$(function() {})
load: 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。它与DOMContentLoaded不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。
优化
2.html 使用ajax获取图文列表数据
https://js-fu.github.io/fe-img/2.html
这个页面的标题“图文列表”，是固定的。图文资源模拟用ajax获取。同样在Disable cache和Slow 3G的环境下打开该页面，得到如下performance。
2.jpg
分析上图，可看出DOMContentLoaded事件在2.38秒执行，跟1.html差不多。load事件提前到了2.39秒，因为加载图片资源是异步去加载的。但是仍有一个问题，不在可视范围内的图片也加载了，不必要，可以等到页面滚动，等图片到了可视范围内再去懒加载。
3.html 懒加载
https://js-fu.github.io/fe-img/3.html
这个页面，在 2.html 的基础上增加了懒加载的功能。初始渲染页面的时候，只下载在了出现在首屏的两张图片。
原理：监听滚动事件、getBoundingClientRect
object.getBoundingClientRect()
4.html 预加载
https://js-fu.github.io/fe-img/4.html
这个页面，在 2.html 的基础上增加了预加载的功能。首屏显示loading蒙层和加载资源的进度条，等到加载完，展示实际页面，看图文列表里的图片都是预加载过的资源，浏览流畅很多。
5.html 雪碧图
https://js-fu.github.io/fe-img/5/5.html
对于一些小图片，比如图标等，可以采用雪碧图的方案，讲多个小图片合成一个图片，减少网络请求。
雪碧图
6.html iconfont
https://js-fu.github.io/fe-img/6.html
对于图标等，也可以采用字体图标iconfont代替图片，图标可以像字体一样修改大小、颜色等样式。
7.html base64
https://js-fu.github.io/fe-img/7/7.html
对于一些尺寸非常小的图片，可以使用base64的方案，将图片的base64编码写入html、css中。可以减少网络请求。
webpack配置中可以用url-loader，设置一个界限值，小于界限值的时候，会自动把小图片转成base64
8 骨架屏
9 检测设备网络状况，使用OSS服务，采用不同质量的图片，是图片大小和图片质量达到一个平衡
阿里云OSS ，可以实现图片质量变换、模糊、旋转、裁剪等操作。
其它
cdn、gzip等
网友评论