使用图片的劣势：我们现在有很多特效（渐变、阴影、圆角等等）都可以用纯粹的html css svg等加以实现，实现这些效果少则数行寥寥代码，多则加载额外的库（一张普通的照片比非常强大的效果库也大了许多）。这些效果不但需要的空间小，而且在多设备、多分辨率下都能很好的工作。图片占用带宽，而且与分辨率息息相关。
备选技术：css效果、css动画、图标库使用字体的方式，保持文字的可搜索性同时扩展显示的样式
如果真的不能避免使用图片该怎么办？如何正确的使用图片呢
- 图片分类
- jpg
- png
- gif
- svg 可缩放矢量图形是基于可扩展标记语言
- APNG和webp格式尚未被web标准所采纳
- 图片使用
- 如果颜色丰富的照片，jpg是通用的选择
- 如果需要较通用的动画，gif是唯一可用的选择
- 如果需要清晰的图片且颜色丰富的图片，使用png
- 图片加载的方式
- 有一种加载先模糊后清晰，另一种是很清晰，但是逐行加载显示。（原因是图片本身压缩算法不同，在图片被生成的时候已经决定了图片在浏览器当中是如何表现的）
- 模糊到清晰（小波算法），逐行加载显示（离散余弦变换，使用实数）浏览器根据不同图片选择不同算法。更改文件后缀名不会影响加载方式，压缩算法读取是在文件头部。
m
每次都清除缓存的方法
逐行加载
Paste_Image.png
、
Paste_Image.png
网络环境较差时国外的，慢网速情况下展示的状态
使用pc端精灵图在移动端上面设置时要将图片大小按PC/2 一般情况下PC端与移动端分辨率屏幕标准的比值差是1:2
Paste_Image.png
更简便的方法：
Paste_Image.png
注意在移动端要按pc与移动端的比值算
响应式动态图片加载（SDK）
- 我们需要一个默认图片
- 我们要把屏幕分辨率的信息带给服务器
- 我们要用服务器返回给我们更优质的图片
未来的方法
- 创建新元素
- 比如：
<picture></picture>
- 比如：
Paste_Image.png
随着屏幕的变小变成不同分辨率的图片或替换成不同质量的图片，未来响应式图片设置的一种理念
Paste_Image.png
Paste_Image.png
Paste_Image.png
- 创建新图像格式
- 比如100K的文件里有75K的版本、20K的版本和5k版本的图像
