前端性能优化-图片处理

图片格式介绍

当页面中的图片太多或者图片体积过大就会影响页面的加载速度而影响用户体验，所以对图片的优化很重要。

JPEG

JPEG图片最大的特点是有损压缩，JPG的压缩方式是一种高质量的压缩方式，把图片压缩至原有体积的50%以下时，仍可保持住60%的品质。JPG以24位存储单个图，可呈现多达1600万种颜色，这一点决定它压缩后的损耗不易被肉眼察觉。

优点：
可呈现百万种颜色，适合网站需要呈现色彩丰富的图片。有损压缩，可通过压缩减小图片体积，压缩等级60%比较合适，超过75%会使图片质量明显下降。无兼容性问题。
使用场景：
适用于色彩丰富的图片，可用作大背景图，轮播图或banner。但是当处理矢量图形和logo等线条感较强、颜色对比强烈的图像时，压缩的图片模糊会相当明显。JPEG不支持透明度处理，透明图片可使用PNG

PNG

PNG是一种无损压缩的高保真图片格式。它支持8位和24位的。8位的PNG最多支持256种颜色，24位可支持1600万种颜色。PNG相比于JPEG有更强的色彩表现力，对线条的处理更加细腻，对透明度的支持很好，弥补了JPEG的局限性，唯一的缺点就是体积太大。

应用场景：
PNG在处理线条和颜色对比度上有优势，我们主要用它来呈现小logo，颜色简单且对比强烈的图片或背景等。支持透明度处理。

GIF

GIF是一种最多支持256种颜色的8位无损图片格式。这个限制让GIF格式对于多颜色或者摄影图片的展示无能为力。

优点：
支持256种颜色，文件体积通常较小，支持透明
应用场景：
支持动画，适合去做一些无限循环的动画，比如图标、表情、广告栏等。对于一些只有简单色彩的图片非常合适

WebP

WebP是一种同时提供了有损压缩与无损压缩的图片文件格式。集合以上三种格式，色彩丰富、支持透明、动态等优点于一身。虽然webP有诸多优点，但是不能完全替代JPEG和PNG，因为浏览器对webP支持并不普遍。特别是移动端IOS系统基本不支持。

图片太大直接导致加载时间过长，所以对于体积过大的图片，在保持图片在可接受的清晰度范围内可适当对图片大小进行压缩

压缩方式

有损压缩：
指在压缩文件大小的过程中，损失了一部分图片信息，也降低了图片质量（模糊了），这种损失是不可逆的。常见的有损压缩就是按照一定的算法将临近的像素点进行合并。算法不会对图片所有数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此可以在同等图片质量的情况下大幅度降低图片体积。例如jpg图片就是有损压缩。

无损压缩：
指在压缩图片的过程中，图片质量没有损耗。我们任何时候都可以从无损压缩的图片中回复原来信息。压缩算法对图片的所有数据进行编码压缩，能在保证图片质量的同时降低图片的体积。例如png、gif就是无损压缩。

• 工具压缩
• webpack压缩
  工程化的项目可以在webpack里面配置image-webpack-loader 进行图片压缩。
• 使用雪碧图
  雪碧图，CSS Sprites，