在网页的浏览过程中，图片的展示无疑对用户的使用体验有很大的影响。画质、加载速度，是两个非常重要的点。
毫无疑问，画质越清晰，一般图片的大小就越大，所以这两者有一些关联。但我们可以从这两个角度考虑，来使用一些优化手段。
01 画质
首先我们要考虑图片的用途，并通过用途来决定要使用哪一种格式的图片。不同的图片有其自身的特性。
-
.png，它支持透明背景，一般用来做图标、徽标等，一般采用的是无损压缩，相对来说要大一些；
-
.jpg通常用于显示照片，具有较高的压缩比率和丰富的颜色呈现；
-
.webp支持无损压缩和有损压缩，一般来说，较低的质量丢失就可以大幅减少图片的大小，非常适合用在网页中。
-
svg图片，即矢量图，可缩放不失真，适合图标和简单的图片。
除了考虑用途，还要考虑图片类型的浏览器兼容性。
进一步的，我们可以根据屏幕的大小来决定要使用哪一种类型的图片，做一些响应式层面的优化。
02 加载速度
除了图片的大小，我们还可以采用一些技术手段来提高加载速度，或者说在用户感知层面的加载提速。
-
延迟加载是一种很有意思的做法，即当图片出现在视窗时才进行加载，以减少初始网页网页转圈圈的时间，通常需要配合预加载进行使用。
-
使用css sprites，即将网页不同位置的会用到的图片进行拼接，然后用css进行局部展示，以达到减少图片下载次数的目的；
-
预加载，即在图片即将进入视窗时进行加载，一般和延迟加载配合使用。
-
使用图片CDN，CDN服务器一般会离用户更近些，可以减少网络io的时间。
网页中图片的优化除了上述内容，还有很多其它的方法。欢迎留言，说说你的想法。
原文始发于微信公众号（架构师手札）：前端性能优化-图片优化技巧
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/234593.html
