一、图片保存阶段
ps 或 sketch 等图片,保存时或保存后,使用photoshop
.jpg 图片选择 “连续”
.png图片选择 “优化”
二、 图片压缩
访问 对所有图片进行压缩,后替换(图片质量不变,可多图一起压缩)三、 单色icon 使用iconfont
访问 / 上传和使用iconfont四、制作雪碧图
1.一个网页可能有很多很多的小图标,就需要向服务器发送很多次访问请求,一是造成资源浪费,二是会导致访问速度变慢。这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题。
显示雪碧图的条件:
1)需要一个设置好宽和高的容器
2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置。
调试方法:可以用浏览器自带的调试工具进行调试(如chrome浏览器按f12即可进行调试,慢慢移动background-position的值来达到理想的效果)
我们把表情放在一张图片上,图片的背景色为透明!
操作步骤:将图片向左移X个单位,然后向上移Y个单位,其中XY的具体数值是需要个人调试至合适位置得出的!
代码为:background-position:-xpx -ypx;
五、webpack打包、小图直接转base64
图片的处理
安装url-loader安装file-loader
1. 小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。2. 大于的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否则会有问题
cnpm install url-loader file-loader --save-dev
新建 vue.config.js 配置如下:
chainWebpack: config => {config.module.rule('images').use('url-loader').loader('url-loader').tap(options => Object.assign(options, {limit: 6800,esModule: false}))}
注意:修改里面的limit的数值即可修改图片进行base64转换文件的大小限制