vue项目中存放大量图片如何优化处理

Question

在VUE项目中有一个功能模块叫 使用帮助 （有图有文字），
可能之前考虑到项目会被部署到没有网络的环境下，所以。。。所有图片全被放在了前端，
现在我看了一下里面图片有将近30M，请问各位大佬，如果这些图片非要放在前端，有啥优化的方法吗？

Answer 1

https://tinypng.com/ tinypng压一下基本就能优化掉9成。其他无非是缩一下分辨率什么的，没啥了

Answer 2

楼上说的压缩办法。其实不应该会有这么大的图片，看看是不是类型有问题。

• 比如说纯色图片用 png 会小很多。
• 复杂图片用 jpg 会小很多。
• webp 不考虑兼容性会比上面两个更小。

Answer 3

项目中难免使用静态资源（大部分就是为了解决内网使用的问题），不用打包到代码用，通过new CopyWebpackPlugin将静态资源目录复制，代码里路径写绝对路径就好。
图片压缩难免失真，30M不大，又不是一张图片30M，业务需要这么做，就不要纠结打包后包的大小,静态资源大小只会影响发版的速度，可以忽略不计。