概念网络 开启企业建站营销新时代、免费建站平台倡导者  站长学院
热线:18651068070
您现在的位置:首页 > 站长学院 > 建站资讯 > 策划

Web前端的图片优化方案

作者:概念网络 日期:2016-02-17 16:45:12 人气:45

  

使用base64编码代替图片

场景:适用于图片大小小于2KB,页面上引用图片总数不多的情况

原理:将图片转换为base64编码字符串inline到页面或css中

优势:减少http的请求次数,并可以放到后台数据库中,只传输字符串,有较多的构建工具可以直接实现

劣势:这种方法仅限于图片总数较少,而且图片大小小于2KB的情况。否则图片字符串会变得很长很长

合并图片sprite(雪碧图)

场景:任何用到页面图片的场景

原理:将多个页面上用到的背景图片合并成一个大的图片在页面中引用

优势:可以有效的较少请求个数,而且,而不影响开发体验,使用构建插件可以做到对开发者透明。适用于页面图片多且丰富的场景。

劣势:生成的图片体积较大,减少请求个数同时也增加了图片大小,不合理拆分将不利于并行加载

使用css、svg、canvas或iconfont代替图片

css代替图片

场景:适用于移动端或较高级的浏览器,而且绘制的图案较为简单。

原理:css方式可以用来绘制相对简单的团来代替图片,一般使用before或者after伪元素来丰富图案的复杂度。

优势:具有实现简单,图片体积小的特点,可以实现简单的动态效果

劣势:也受限于css的兼容性特点,绘制复杂图案困难

svg的描述和适用场景上文已说明。

canvas代替图片

场景:需要高性能的图片或动画

原理:适用html5的canvas元素绘制创建图片

优势:整个就是画2D图形时,页面渲染性能比较高,页面渲染性能受图形复杂度影响小,性能只受图形的分辨率的影响,画出来的图形可以直接保存为 .png 或者 .jpg的图形,适合于画光栅图像或者不规则图形

劣势:没有dom操作,必须依赖定时器,文字渲染性能差,不能添加描述(title属性什么的),兼容性限制

iconfont是一种web字体来代替图片的解决方案: 场景:代替页面上色彩单一的图片 优势:兼容性好,应用广,目前使用也很广泛 劣势:但是由于字体的颜色设置单一,只能用于代替颜色单一的图片,对于色彩复杂的图片,iconfont处理起来比较困难

响应式图片

场景:不同终端对同一个图片需求不一样,可以根据终端加载不同的图片来节省没必要的流量

原理:通过picture元素,picturefill或平台判断来为不同终端平台输出不同的图片

优势:减少没必要的图片加载,灵活控制,慢速用户加载小图片不至于加载失败,移动端没必要加载大尺寸图片等,可以通过不同方式兼容所有浏览器

劣势:无法避免图片的加载过程,图片本身没优化

图片压缩

场景:在不得不加载图片的前提下,要进一步提升优化效果,只能通过有损或无损压缩来减少图片的大小。

原理:对图片进行无损、有损压缩,转为压缩后图片来实现

优势:减少图片加载流量,效果比较明显

劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持

更好的图片格式

场景:之前说到webp、bpg、sharpP等新图片格式具有更好的压缩比,可以使用这类新型的图片来代替原始图片

原理:对图片格式转换,在画质可以接受的情况下达到更好的压缩比效果

优势:减少图片加载流量,效果比较明显

劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持,格式转换要考虑浏览器的兼容性


回到顶部