关于前端:前端性能优化之图片优化

丽珍

起源 | web 前端开发（web_qdkf）

很多人谈到前端性能优化，就感觉很难，如同是到了大牛级别人的人，才可能实现的工作。其实，没有大家设想的那么难，并且前端性能优化，是每一位前端开发者须要学习与把握的技能。
而对于前端性能优化的探讨，从前端诞生以来，或者说从 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，关上淘宝，关上 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 申请。
然而，咱们在应用过程中也应留神，不要把一堆小图标全副放在一起组成雪碧图，因为一旦图片没加载进去，你的网站就到处空白了。