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

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

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

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

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

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

常见图片格式

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请求次数，提高页面加载速度