【前端学习笔记】网站存在很多图片时的优化

往常操作，首先放参考的技术博文链接。
内容参考自：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，图片延迟加载（懒惰加载）

稍后补充代码。。。