web前端图片极限优化策略

svg 是一种矢量图片，支持透明，缩放，动画，除了android 2.3的手机，其它场景都支持，是一种比较好的图片代替方案。 优势：

• 矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何
• SVG对动画的支持较好；其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画
• Javascript可以完全控制SVG Dom 元素
• SVG的结构是 XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持 ARIA 属性，使其如虎添翼。

劣势：

• DOM比正常的图形慢，而且如果其结点多而杂，就更慢了
• 不适合网页游戏等；当然，我们可以结合 Canvas + SVG来实现

bpg

http://bellard.org/bpg/ 图片画质比较 性能测试对比

BPG (Better Portable Graphics) 是一个新的图片格式。用来代替jpeg和webp的方案。这种格式主要有以下特点 优势：

• 高压缩比。在画质相同的情况下比jpeg小的多
• 使用一个很小的js解码器就可以被浏览器支持
• 基于高清视频压缩标准 (HEVC) 一个子集开发
• 支持和jpeg相同的色值，并且在有损压缩的通知支持透明，
• 单通道支持8到14位色值区域
• 支持有损压缩
• 可以添加更多的元数据编码
• 支持动画
• 相近画质前提下比webp更小

性能：

• 根据mozilla的研究，bpg使用的HEVC编码比原生的HEVC性能更好，因为BPG的头部比HEVC的头部更小
• 支持4:2:2和4:2:0的色值设置
• BPG可以用于硬件上支持HEVC编解码器

这种图片格式目前还没有被浏览器支持，需要js解码，但其优势非常明显。

另外还有mozjpg、sharpP的图片格式，由于目前仍在起步阶段，这里暂不介绍了，有兴趣的可以去跟进了解下。

二、前端的图片优化方案

使用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等新图片格式具有更好的压缩比，可以使用这类新型的图片来代替原始图片

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

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

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

三、图片压缩

压缩图片方式比较多，这里不一一列出，例如下面的部分工具平台：

Kraken (Web)主页： https://kraken.io/

智图主页： http://zhitu.tencent.com/支持原图png转为jpeg和webp(目前不支持bpg)，并提供各种压缩比压缩，目前在tx内部广泛使用。

目前bpg格式图片也有部分公司在试用。这方面也可以尝试下。

四、小结

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!