前端性能优化之图片优化
姜丽珍 web前端开发
很多人谈到前端性能优化，就觉得很难，好像是到了大牛级别人的人，才能够完成的工作。其实，没有大家想象的那么难，并且前端性能优化，是每一位前端开发者需要学习与掌握的技能。
而关于前端性能优化的探讨，从前端诞生以来，或者说从web出现，就已经存在了。只是之前我们对其关注度比较少，但是随着互联网的发展，用户要求也发生了改变，所以对于前端性能的关注度提升了。
那么今天，我们就一起来从一个最简单的前端性能优化之图片优化开始做起，接着一步一步深入到前端性能优化的其他点。
01、图像压缩概要
说到图片性能优化，不得不提图像压缩。
图像压缩，能够减少图像数据中的冗余信息，从而用更加高效的格式存储和传输数据。
那么，前端开发中常见的静态图片格式有哪些，它们是否都经过图像压缩？
从上面的图中，我们引入了两个概念，有损压缩与无损压缩。
简单来说，无损压缩就是不引起图片失真；有损压缩，就是损失一定的图片信息，来换取更小的图片信息，肉眼可能无法识别出。
那么，为什么会要有损压缩和无损压缩呢？图片压缩的过程又是怎样的？什么场景下该用什么样的图片格式？作为前端开发者，如果了解了这些，对你的项目性能一定带来极大的提升。
02、图片实例分析
我们先用一个格式转换工具来比较一下这几张图片转换前后大小的变化。
从图中我们可以看到 65k 的 jpg 转化成 png 后变成原来的 4.x 倍，而转化成 webp 后变成了不到一半的大小。直观上，我们可以看出 webp 的压缩率是最高的。
再从 webp 使用的一些算法等可以知道，webp 不仅压缩率高，而且解码速度快，支持 alpha 透明，且拥有着我们肉眼几乎无法识别的图像质量差异等优点，在一些需要更大压缩比的场景下被广泛使用。
那是不是jpg 和 png 等就毫无用武之地呢？显然不是。
jpg 的兼容性要比 webp 好很多，webp 目前支持的最好的是 chrome 浏览器，因为它本身就是 google 推出的图片格式。
另外，它在 Android 下也兼容的很好。所以在 ios 开发等场景下，jpg 是比 webp 更好的选择。
那么 png 呢？因为 jpg 不支持透明图片，webp 在一些场景下无法兼容，这时候，png 就上场了。
根据上面这些理论，我们再来看下大厂是怎么使用的吧。看个我们常用的 app，手机淘宝（www.taobao.com）
点击上述链接，打开淘宝，打开 chrome 开发者工具。我们可以看到，有一堆特别的图片。
如下图所示:
我们右键菜单选择 Open in new tap.然后会看到一张 webp 的图，去掉第二个 .jpg 后面的字符串，又可以打开 jpg 图片。
那么，为什么要这么做呢？很显然，在 android 上，能很好的兼容 webp 格式图片，那我们肯定首选它，如果遇到不兼容的场景，做个降级处理，图片以 jpg 形式进行加载。
不知道这样使用的童鞋们是不是有种学到的感觉啦？学到不如应用上，在未来的项目中，如果有适合的场景，你也可以采用这种做法啦~
03、特殊格式的 svg
因为 svg 不是上述说的有损和无损压缩，它是由标签组成的代码，显示时，可以任意缩放，不会有图像质量的损失。我们来稍微看看它是什么样。
上图左边这个暂停图标，就是用右边红框的一段代码表示。比如图里，浏览器会把右边的一串代码渲染成左边的图案。那么，使用这种代码来代替 jpg 那些图片的好处是什么？
在看到这里的你，可以切到手机淘宝的那张图去看，那些资源文件，全都是通过 http 请求获取到的。
而我们的 svg 图片，则不需要。在加载一个只有几KB 大小的图片，http 网络请求时间成为了加载该图片快慢的瓶颈，我们耗费一小段代码，带来的就是省去 http 请求的一大性能提升。
但是 svg 目前只支持相对较简单的图标。当然，svg还有其它优点，这里不一一列举啦~
04、4种格式图片的统一对比
4种格式图片的统一对比
通过上述表格的对比，你对不同图片格式的了解更加直观了呢？
05、补充与总结
其实，除上述说的 svg 可以减少小图片带来的 http 请求时间消耗外，css 雪碧也可以。
css 雪碧，也就是我们常说的雪碧图所用到的技术，把多个小图标和背景图像合并到一张图片上，利用 css 背景定位来显示需要显示的图片部分。
如上所说，多个小图标放在一张图片上，那么显然，这多个图标只需要 1 次 http 请求。
但是，我们在使用过程中也应注意，不要把一堆小图标全部放在一起组成雪碧图，因为一旦图片没加载出来，你的网站就四处空白了。
以上，就是今天我与大家分享的内容。
最后总结一下，我们通过正确使用图片格式从而就可以给前端带来性能上的优化，大大提升了前端界面加载速度。而现阶段，很多网站都开始使用大图来提升网站的整体视觉效果，而获取用户的注意力，如果你能够了解并学习到今天的小技巧，从而把它应用到工作项目中，这个也会提升你的专业度。
今天，我们就分享到这里，如果你觉得今天的小技巧对你有用的话，记得分享给你身边的小伙伴。
后面我还会跟大家分享一些关于何时使用图片懒加载，预加载，以及使用webpack 配置打包图片压缩的经验技巧等相关内容。（好吧，我又开始给自己挖坑了~，）
最后，非常感谢你的阅读，如果有不足之处，也欢迎留言指正，与你一起交流学习。