前端优化图片

项目中往往占用大小的是图片，那么如何优化？

方法一：

使用tiny https://tinypng.com/

来张图片测试下~

压缩前

压缩后

这里压缩后不会造成图片失真，但是如果静态图片非常多的情况下，还是会占用很大的空间，因此这种方式也不完美 ~

方法二：

cdn的形式
把你本地的图片发给自家后台，让他给你处理，然后反你一个链接，后面拼上图片名就ok了

示例：<img src="https://cdn.b******op/topic/images/11.png" alt="">
链接：https://cdn.b******op/topic/images
图片名：11.png

这样就不占用前端的大小了，打开网页的时候也是秒打开

拿来优化前优化后的包对比一下

优化前 24.2M 优化后 857.3K

这样在打开App中的h5页面时就秒打开了加载的时候就占用857.3k 这还没涉及到路由懒加载等各大优化呢~