前端优化之图片优化

一、基础知识

有损压缩——一张JPG图片的解析过程
png位数与格式

• png8 —— 256色 + 支持透明
• png24 —— 2^24色 + 不支持透明
• png32 —— 2^24色 + 支持透明

每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要

• jpg有损压缩，压缩率高，不支持透明
• png支持透明，浏览器兼容好
• webp压缩程度更好，在ios webview有兼容性问题
• svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

二、压缩方式

0x1 雪碧图

把你的网站上用到的一些图片整合到一张单独的图片中，减少你的网站的HTTP请求数量。
缺点：一次性加载很大的图片，一次加载有点慢。

0x2 Image inline

将图片的内容以base64的形式内嵌到html当中，减少你的网站的HTTP请求数量

0x3 矢量图

使用SVG进行矢量图的绘制
使用iconfont解决icon问题

0x4 webp

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。