图片优化

2019-08-09 本文已影响0人逆风飘游的鱼

总结优化的地方有几个地方：

1、降低图片的大小

压缩图片，选择更小kb的图片格式，以达到最优的显示效果

可以通过服务器图片资源配置命名规则来获取图片

通过css定义来加载不同的背景bg图片

Img的srcset和sizes的方法

picture标签实现

通过媒体查询的方式，根据页面宽度（当然也可以添加其他参考项）加载不同图片，具体picture详情点击查看

CSSSprites(背景精灵图/雪碧图)：一种网页图片应用处理方式，将一个页面涉及到的所有零星图片或者图标都包含到一张大图里面，这样就只需要加载这个一个图片，而不是很多个图片了，这样就减少了很多http的请求

如何制作精灵图？自己通过ps制作，或者UI设计师制作的过程中，做好这个精灵图，注意图片直接的间隔，以防css操作的时候出现显示的问题

怎么使用精灵图？利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置

css和css3制作简单的图标和动画（代替gif图片）

SVG技术替换图片

html5 canvas绘画图形

目前我认为毕竟好的就是 Iconfont ,最近的几个react项目，我都在使用这个来定制自己的一些图标库，用起来也很简单

如果不想放在服务器上，还有一种方法可以使用，这个时候我们需要一个工具来辅助一下 transfonter,将解压出来的ttf字体文件转化成base64格式，生成的文件里面替换css里面的代码，使用和直接引入字体图标是一样的

有个页面会很大很长很多的图片素材，这样全部加载就会变的很慢，因此需要修改一下加载方案，只加载窗口内的图片，我们大家浏览网站的时候会经常看到会有默认图，图片加载成功之后会替换默认图

比如常用的lazyload.js用于图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的，。

能有效的提高页面加载速度

有时候可以帮助减少服务器负载

用法：lazyload.js