上篇文章说完针对HTTP请求的优化，现在我们说说针对图片的优化，对HTTP请求优化有兴趣的朋友可以看看这里 juejin.cn/post/717144…

网络篇（二）针对于图片的优化

在项目中如果想要针对图片进行优化，那必须得考虑图片的应用场景，首先我们先了解以下图片的格式。目前较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等

特点： 有损压缩、体积小、加载快、不支持透明

优点: 当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质。此外，JPG 格式以 24 位存储单个图，可以呈现多达 1600 万种颜色。

使用场景: 大的背景图、轮播图或 Banner 图,京东淘宝就是这样子做的。

缺点：它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显，这时候就要考虑PNG格式的了。

关键字：无损压缩、质量高、体积大、支持透明

优点: PNG是一种无损压缩的高保真的图片格式。8 位的 PNG 最多支持 256 种颜色，而 24 位的可以呈现约 1600 万种颜色。

PNG 图片具有比 JPG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。唯一的 BUG 就是体积太大。

追求质感又不在意体积大小的时候，首选24位的。但在开发中，为了规避体积的问题，我们一般不用PNG去处理较复杂的图像，会优先选择更为小巧的 PNG-8。

我们可以把这两种格式的图片分别输出，让ui看看，看png-8这种格式的会不会造成肉眼可见的质量损耗。

注意：(8 和 24，这里都是二进制数的位数,一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色，一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大)

SVG 与 PNG 和 JPG 相比，文件体积更小，可压缩性更强。

优势: 矢量图，无限放大不失真

将小图标和背景图像合并到一张图片上，然后利用 CSS 的背景定位来显示其中的每一部分的技术。一些小图标会用到。

前端性能优化网络篇（二）