版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/89110952
往常操作，首先放参考的技术博文链接。
内容参考自：https://juejin.im/post/59a7725b6fb9a02497170459
自动化优化的工具有：
- CDN，通过请求生成所需图片返回
- Grunt、Gulp：grunt-image组件功能强大，支持批量；
- Google PageSpeed
以下是一些常见方法。
1，降低图片的大小
常见的图片格式有png，gif，jpg等，png又分png8，png24。其中还有新出现的webP格式。
具体区别自行搜索。
压缩图片，可以使用智图网站等。
2，选择适当的图片宽度尺寸
响应式布局，选择不同尺寸的图片。
响应式图片方式：1，服务器图片资源配置命名规则获取图片；2，通过CSS@media查询，加载不同背景；
3，src:当设备不支持srcset，sizes属性时，使用这个图片；
srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。
4，picture标签
3，减少HTTP资源请求
1，CSS Sprite背景精灵图：利用background-image，background-repeat，background-position组合进行定位
2，CSS和CSS3制作简单的图标和动画，代替gif
3，SVG 技术替换图片
4，html5 canvas绘画图形
4，字体图库代替图标
好用的字体图库
好处是不仅可以改变颜色，还可以改变大小
好用的图标库
5，图片延迟加载（懒惰加载）
稍后补充代码。。。