图片问题

目前，图片内容已经占互联网内容的62%，也就是说有超过半数的下载量都是图片，所以图片的大小就影响着网页加载的速度，对性能优化有很大的影响。

现在网页中较常用到的图片格式有：jpg、png、gif、webp等，还有一些我没听说过的。。比如apng、svg（ps：暴露了孤陋寡闻 T T）

贴一张各种图片格式特点的图：

图片使用分析过程：

jpg适合显示照片等颜色丰富的图片

据资料显示：在 Photoshop软件中以JPEG格式储存时，提供11级压缩级别，以0—10级表示。其中0级压缩比最高，图像品质最差。以BMP格式保存时得到4．28MB图像文件，在采用JPG格式保存时，其文件仅为178KB，压缩比达到24：1。经过多次比较，采用第8级压缩为存储空间与图像质量兼得的最佳比例。

当显示一些较为通用的动画时，例如loading图，适合使用gif格式

如果需要清晰的显示颜色丰富的图片，PNG比较好

PNG-8适合显示颜色数较少但需要半透明的情景（如微信动画大表情）

PNG-24不支持透明，颜色丰富的图片推荐使用（如屏幕截图、界面设计图）

PNG-32支持透明，效果最好但尺寸也最大

webp是一种新的图片文件格式，由google推出。在相同质量的情况下，比png文件尺寸更小，但是兼容性不好，有很多浏览器还不支持

在智图上测试的例子：

同质量情况下，jpg格式转化为webp后图片的尺寸有了减小

转化为png：大小为

jpg转png时：若原图颜色单一，则png图片大小会较jpg减小；若颜色丰富，则大小会增加

 

介绍一下jpg的压缩：

JPEG 是通过波的叠加的形式存储图片信息，不是按照像素的形式。

JPEG 的算法的核心是通过在图片的频率空间减少不重要信息，但减少信息就会引入噪声，使图像的质量下降。

 

所谓的频率空间，就是将图片进行二维离散傅里叶变换得到的图片。（感觉很厉害的样子）

我看了一篇知乎上的文章：

想看原文点这里

我理解的意思就是：有一个图片压缩方式：减小频率空间的面积，即减少信息，在一定程度内，对图片质量并无大的影响，肉眼分辨不出；超出这个程度，图片就会变得不清。

这种方式同样可以用在音频、视频压缩