优化加载图片和常见的图片格式_svg 和webp速度

网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg，但这些都不能满足我的要求。
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩
体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经
开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

<picture class="picture">
    <source type="image/webp" srcset="~assets/img/1.png" media="(min-width: 750px)">
    <source type="image/webp" srcset="~assets/img/2.webp" media="(min-width: 650px)">
    <img class="image" src="~assets/img/3.png" width="100%">
</picture>
1
2
3
4
5

source 标签包含src、type、media三个属性，分别介绍如下
media：说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介
src：规定媒体文件的URL地址。
type：规定媒体资源的 MIME 类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式

实现思路：

1. 如果浏览器支持webp 并且屏幕宽度大于等于750px显示1.png
2. 如果浏览器支持webp 并且屏幕宽度大于等于650px显示2.webp
3. 如果以上都不支持 默认就显示img标签的图片

图片格式

1. BMP是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。
2. GIF是无损的、采用索引色的点阵图。GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。
3. PNG-8是无损的、使用索引色的点阵图。PNG-8是非常好的GIF格式替代者，除非需要动画的支持，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节。
4. JPEG是有损的、采用直接色的点阵图。JPEG非常适合用来存储照片。
5. PNG-24是无损的、使用直接色的点阵图。PNG-24格式的文件大小要比BMP小得多，比JPEG、GIF、PNG-8大得多
6. SVG是无损的矢量图，在放大时，不会失真，适合用来绘制Logo、Icon等。

• 有损：指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。
• 无损：只在压缩文件大小的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
• 索引色：用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。
• 直接色：使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。