页面优化小总结 （图片类型）

兔兔这么可爱，拿来当首图确定更招人喜欢

图片在网页中十分常见。高质量的图片可以使你的网站更加出色，同时也伴随着必定的性能损耗。图片文件较大，会减缓页面的加载。若是是一个带宽较低的用户，用户体验将会特别差。因此，开发一个高质量的网页，须要掌握一些图片优化的方法。

下面是对图片相关知识的整理，以及一些图片相关的优化技巧。

图片的类型（矢量图和位图）

图片的压缩方式（有损压缩和无损压缩）

常见图片格式

JPEG

• 有损压缩，不支持透明，不支持动画；
• 能够经过压缩控制图片的大小；
• 经常使用压缩比例60%~80%；
• 适用于存储摄影，写实图像；
• 不适用于有文字及线条的图片压缩；

PNG

PNG可分为三种格式:PNG8，PNG24，PNG32。后面的数字表明这种PNG格式最多能够索引和存储的颜色值。”8″表明2的8次方也就是256色，而24则表明2的24次方大概有1600多万色。

关于透明：

• PNG8支持索引透明和alpha透明，体积小，用的比较多
• PNG24不支持透明;
• 而PNG32在24位的PNG基础上增长了8位的alpha通道透明，也就是说能够存储从彻底透明到彻底不透明一共256个层级的透明度（即所谓的半透明）。

PNG的特性：

• 无损压缩；
• 存储灰度图像时，深度可多到16位；
• 存储彩色图像时，深度可多到48位；
• 而且能够存储多到16位的α通道数据；
• 对于复杂的图像，png图片文件较大，不适用用web网页；

JPEG和PNG的比较

• 色彩层次丰富，颜色较多的图像用JPEG存储；
• 颜色简单对比强烈的用PNG存储；
• 对品质要求较高的图片能够用PNG存储，如按钮，导航背景等；
• 要求不是过高的能够用JPG存储下降图片的大小；
• 特殊状况，图片颜色丰富但尺寸较小能够尝试用PNG存储；

GIF

无损压缩，支持全透明，支持动画； 8位图片格式，最多支持256色； 隔行扫描，加载较快； 适用于颜色不太复杂的图片，如Logo,icon图标；

APNG

• 无损压缩，支持透明度，支持动画；
• 24位图片格式，显示图像更清晰；
• 兼容较差，仅支持部分浏览器；

WebP

在以前的文章“图片的新型格式：webP的工做原理”中已经介绍过；

WebP是一种支持有损压缩和无损压缩的图片文件格式，支持动画和透明度，根据Google的测试，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减小了25％~34%的体积，大大减小了页面的加载时间。

GIF、APNG、WEBP比较

（截图来源：aotu.io/notes/2016/…

经过两张图片对比GIF和APNG，图一是GIF，图二是APNG

GIF：

最多支持 8 位 256 色，色阶过渡很差，图片具备颗粒感 不支持 Alpha 透明通道，边缘有杂边

APNG：

支持 24 位彩色图片 支持 8 位 Alpha 透明通道 向下兼容 PNG（若是浏览器不支持，显示静图）

对比中发现APNG比gif和webp体积小，加载快；

SVG

概念：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个总体

与其余图像格式相比，使用 SVG 的优点在于：

SVG 可被很是多的工具读取和修改（好比记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不降低的状况下被放大 SVG 图像中的文本是可选的，同时也是可搜索的（很适合制做地图） SVG 能够与 Java 技术一块儿运行 SVG 是开放的标准 SVG 文件是纯粹的 XML

雪碧图

将许多的小图标合并到一张图片上，请求一张图片，经过截取获取图标； 减小HTTP请求次数，提升页面加载速度

base64

• 以“data:image/png;base64”开头的字符串代理src的url
• 优势：减小网络请求；
• 缺点：生成的字符串的体积可能大于原来的图片，形成CSS体积增大，可读性变差，兼容性较差，IE8如下不兼容，IE8以上限制了URL的大小；
• 对于极小或者极简单的图片，例如只有几像素的图片不用考虑跨域问题不想页面的图片缓存，能够用base64编码

选择图片格式

优化总结：

1.使用其它技术代替图片，如边框，圆角，阴影，渐变等能够用CSS设置； 2.能够用矢量图代替； 3.选择合适的图片格式； 4.使用雪碧图，base64图片减小http请求； 5.预加载 6.懒加载