有损压缩和无损压缩

有损压缩

指在压缩过程中，损失了一部分图片的信息，即降低了图片的质量，并且这种损失是不可逆的。

无损压缩

在压缩过程中，图片的质量没有任何损耗，任何时候都可以从无损压缩过的图片中恢复出原来的信息。

位图和矢量图

位图

位图（bitmap），称为点阵像，是由像素的单个点组成。这些点可以进行不同的排列和染色以构成图样。当放大位图时，会导致失真，可以看见构成整个图像的无数单个方块。用数码相机拍摄的照片、扫描仪扫描的图片以及计算机截图等都属于位图。常见的位图处理软件有photoshop。

Alpha通道

阿尔法通道是指一张图片的透明和半透明度。在图形处理中，通常把RGB三种颜色信息称为红通道、绿通道和蓝通道，透明度称为Alpha通道。多数使用颜色表的位图格式都支持Alpha通道。

色彩深度（色彩位数）

位图中用多少个二进制位来表示每个点的颜色，是分辨率的一个重要指标。常用有1位（单色），2位（4色，CGA），4位（16色，VGA），8位（256色），16位（增强色），24位（真彩色）和32位等。

图像分辨率

位图输出的图像质量高低取决于图像分辨率的高低，图像分辨率越高，所包含的像素就越多，图像就越清晰，印刷或显示的质量也就越好。

矢量图

矢量图也称向量图，也称为面向对象的图像或绘图图像，是计算机图形学中用点、直线或者多边形等基本数学方程的几何图元表示图像。

矢量图最大的优点是无论放大、缩小或旋转等都不会失真。缺点是难以表现色彩层次丰富的逼真图像效果。

矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。这意味着它们可以按最高分辨率显示在输出设备上。

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

位图和矢量图的区别

• 位图受分辨率的影响，缩放和旋转容易失真，同时文件容量较大，当图片放大时，位图清晰度会变低。而矢量图不受分辨率影响，清晰度不变。
• 位图的组成单位是像素，而矢量图的组成单位是数学向量。
• 位图适合色彩丰富的图片，只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图像。而矢量图文件容量较小，在进行放大、缩小或旋转等操作时图像不会失真，却不适用于色彩丰富的图片。
• 位图常用于网页中的照片等，容量较大；矢量图常用于印刷行业、网页logo或矢量插图中。

栅格图像（点阵图像）（位图）

JPEG

JPG是JPEG格式的扩展名。JPEG是一种有损压缩的光栅图像文件格式，如果减小图片文件大小，在一定程度上也会降低图像质量。

优点

• 压缩更好，更小的文件，通用浏览器和操作系统支持。
• 浏览器兼容支持较好。
• 可以支持24bit真彩色，普遍应用于需要连续色调的图像如色彩丰富的图片、照片等。

缺点

• 有损图像压缩会导致较差的文本可读性。
• 不支持透明图片透明度。
• 每当编辑和重新保持JPEG文件时，JPEG会混合原始图片数据的质量下降。这种下降是累积性的、永久性的。

应用场景

• 博客和文章图像（如用户头像，产品图片等）是不错的选择。

PNG

便携式网络图形（Portable Network Graphics），PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供了24位和32位真彩色图像支持以及其他诸多技术性支持。

PNG 最初的开发目的是为了作为 GIF 的替代方案的，作为做新开发的影像传输文件格式，PNG 同样使用了无损压缩格式，事实上 PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的。

PNG分为PNG-8和PNG-24两种格式，PNG-8 的特性很接近 GIF ，支持 256 色以及透明背景的特性。而 PNG-24 则支持了多达 160 万个色彩。

优点

• 支持高级别无损耗压缩。
• 支持Alpha通道透明度。
• 支持伽玛校正、支持交错。

缺点

• 与 JPEG 的有损耗压缩相比，PNG 提供的压缩量较少。
• 与 GIF 格式相比，对多图像文件或动画文件不提供任何支持。

GIF

GIF是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右。GIF最高支持图像深度8bit也就是256种色彩。GIF另一个特点是支持存多幅色彩图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。GIF不支持Alpha透明通道。

GIF 非常适合用来表现图标、UI接口、线条插画、文字等部分的输出。

当图片拥有丰富的色彩时，并且没有明显锐利反差的边缘线条时，选择 JPEG 可以得到最好的输出结果，像是照片就是最好的例子；当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能需要透明背景时，GIF 是很完美的选择，档案小、画质又精美。

优点

• 更小的文件体积。
• 无损压缩。
• 动画支持
• 支持透明背景。

缺点

• 最高只支持8bit。
• 不支持Alpha通道。

WebP

WebP格式，谷歌2010年开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。

从网页中加载图片时，WebP 比 PNG 快 45%。PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩；转换后的 WebP 体积大幅减少，图片质量也得到保障；支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题；WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；

WEBP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍，而绝大部分的网络应用中，图片都是静态文件，所以对于用户使用只需要关心解码速度即可。但实际上，webp虽然会增加额外的解码时间，但是由于减少了文件体积，缩短了加载的时间，实际上文件的渲染速度反而变快了。

优点

• 更小的文件体积，更大的压缩率。
• 支持Alpha通道和24bit色彩深度。
• 支持有损和无损压缩模式。
• 支持动画。

缺点

• 兼容性较差。

矢量图像

SVG

可缩放矢量 图形（Scalable Vector Graphics）。它是基于XML以类似于数学方程式计算勾勒形状和线条获得图形，由万维网联盟开发。因为SVG是被设计用于互联网，所以通过JavaScript和DOM访问它就是最重要的应用模式。

可任意放大图形显示，边缘异常清晰，文字在SVG图像中保留可编辑和可搜寻的状态，没有字体限制，生成的文件很小，下载很快。

SVG支持透明，缩放，动画。

优点

• 矢量图形，不受像素影响。
• 对动画的支持较好，可以通过JavaScript控制，从而轻松的实现动画。
• SVG的结构是 XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持 ARIA 属性，使其如虎添翼。

缺点

• DOM比正常的图形慢，如果其结点多而杂，就更慢。
• 不能动态的修改动画内容。
• 对于图像或复杂图形而言，不是理想的格式。

前端的图片优化方案

WEB网页设计中对于图片格式其它一些技巧总结

• 尽量通过较小的视觉牺牲来换取较大的性能提升；
• 对于写实的摄影图像或是颜色层次非常丰富的图像采用JPEG的图片格式保存一般能达到最佳的压缩效果；而处理一些logo、banner、需要透明效果、色调单一或简单线条构图的时候，适合使用PNG格式；GIF格式通常只适合表达动画效果；
• 不要保存为100%品质的JPEG格式图片。因为100%并不一定是最高的品质，而是一个优化算法的极限值，所以会增加不必要的文件大小。建议存储95%品质的图片就可以最大限度的降低失真度；
• 谨慎使用50%品质以下的压缩率。使用50%以下品质存储时会采用额外的压缩算法而导致图片失真更严重，尤其是对于有高对比度的图片；

使用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或平台判断来为不同终端平台输出不同的图片
• 优势：减少没必要的图片加载，灵活控制，慢速用户加载小图片不至于加载失败，移动端没必要加载大尺寸图片等，可以通过不同方式兼容所有浏览器
• 劣势：无法避免图片的加载过程，图片本身没优化

图片压缩

• 场景：在不得不加载图片的前提下，要进一步提升优化效果，只能通过有损或无损压缩来减少图片的大小。
• 原理：对图片进行无损、有损压缩，转为压缩后图片来实现
• 优势：减少图片加载流量，效果比较明显
• 劣势：服务器和浏览器压力增大，而且服务器需要额外的服务支持