通过压缩图片来达到站点速度优化

引言

记得蛮久之前，图片上传之前没有对它们进行压缩的习惯，导致了站点加载过慢，因为图片大，加载起来自然慢，网站优化其实有很多方面，这篇文章是关于图片方面的因素的优化，简单来说，尽量压缩图片，减少图片的大小，文件小了加载自然比原来快一点。

TinyPNG

在线无损压缩网站：https://tinypng.com/

一般来说，设计软件比如PS、Sketch等都有图片压缩导出的功能，但对于透明的PNG图片，压缩过后仍然很大，特别是对追求前端性能的开发者来说，图片在不影响画质的情况下把它压缩到最小，而TinyPNG是目前我用的压缩工具，图片保真率最好，体积最小的工具，一直在用

不需要注册就能用的在线图片压缩应用，虽然是国外网站，但跟国内网站没差多少，访问速度很快，这对于上传下载体验很好，使用也非常简单方便，上传图片后，会压缩然后返回下载链接，压缩效果完爆PS等设计软件。

压缩

压缩前 压缩后

压缩前后对比

Demo图片为网站首页的截图，尺寸为1920*1080，可以看到没有压缩之前图片大小为1.4M，而压缩后变成了436KB，压缩了69%，这个效果是非常理想的，压缩前后画质的话，其实肉眼是看不出的，可以自行打开图片放大进行对比。

全国节点的加载速度：

压缩后 压缩前

数据可能要仔细对比，速度方面还是有提升的，毕竟1.4M和436KB的加载，毋庸置疑，小图片的加载肯定比大图片快，为了更直观的感受到两张图片加载速度的差异，简单做了个HTML页面，引入这2张图片，查看加载速度情况：

本地测试

在禁止缓存的情况下，可以看到压缩前加载耗时801MS，而压缩后耗时399MS，所以，养成图片压缩的习惯，不管你是将图片上传到对象存储还是直接上传到服务器，在上传之前对图片体积进行压缩，图片的加载速度自然也就快了一些。