前端图片优化技巧-变化吧

二叶草

1214
文章

0
评论

2020年2月3日22:10:03优化评论阅读模式

1:降低图片大小

常见的图片格式png，jpg，gif关于图片格式的区别这里就不在阐述可以自行搜索了解额，降低图片大小很多人会想到压缩图片来解决，所以第一种方法就是在线压缩图片网站

2:选择适当的图片尺寸（尤其是做些响应式网站的时候）

方法一：可以把图片分为不同的尺寸进行命名保存
例如bg-480.jpg和bg-360jpg

然后通过css 的media判断屏幕的尺寸选择加载不同的图片

@media only screen and(max-width : 480px){
    .img{background-image:url(bg-480.jpg)}

}

@media only screen and(max-width : 360px){
.img{background-image:url(bg-360.jpg)}

}

方法二：利用图片的scrset和sizes

方法三：picture标签

3:减少图片的http请求

Sprites相对来说估计很多人都接触到，把页面需要用到的小图标和图片汇总在一张图片上

利用css写一些三角形，四边形，箭头，阴影和渐变效果
利用SVG技术替换图片

4:用字体库代替图标

比如常见的font图标网站和阿里的iconfont字体图标

5:小程序怎样使用

直接引入字体也可以，但是要把字体文件放在服务器上，并且允许跨域的情况下，在css文件里面远程地址引入字体文件即可
如果不想放在服务器上，还有一种方法可以使用，这个时候我们需要一个工具来辅助一下 transfonter,将解压出来的ttf字体文件转化成base64格式

生成的文件里面替换css里面的代码

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,这里省略了) format('truetype');
    font-weight: 500;  
}

6:图片延迟加载

有个页面会很大很长很多的图片素材，这样全部加载就会变的很慢，因此需要修改一下加载方案，只加载窗口内的图片，我们大家浏览网站的时候会经常看到会有默认图，图片加载成功之后会替换默认图
比如常用的lazyload.js用于图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。