共计 4097 个字符，预计需要花费 11 分钟才能阅读完成。
1. 为什么进行图片优化
对于大多数前端来说，图片兴许就是 UI 设计师 (或者本人) 切好的图，咱们只是把图片丢进我的项目中，而后用以链接的形式出现在页面上，而且咱们也常常把精力放在我的项目的打包优化构建上，如何分包，如何抽取第三方库等等。但有时咱们会忘了，图片才是一个网站最大头的那块加载资源，HTTP Archieve 有个统计，图片内容曾经占到了互联网内容总量的 62%，也就是说超过一半的流量和工夫都用来下载图片。从性能优化的角度看，图片也相对是优化的热点和重点之一。雅虎军规和 Google 官网的最佳实际都将图片优化列为前端性能优化必不可少的环节——图片优化的优先级可见一斑。优化图片，相对能够让网站的体验晋升一个品位。
所以咱们要在图片上下功夫，通过优化后，缩小加载工夫和缩小 HTTP 申请数。
2. 罕用图片格式介绍
其中 APNG 和 WebP 格局呈现的较晚，尚未被 Web 规范所驳回，只有在特定平台或浏览器环境能够预知的状况下加以采纳
1.JPG/JPEG
JPEG（Joint Photographic Experts Group）即联结图像专家组，是用于间断色调动态图像压缩的一种规范，文件后缀名为.jpg 或.jpeg，是最罕用的图像文件格式。其次要是采纳预测编码（DPCM）、离散余弦变换（DCT）以及熵编码的联结编码方式，以去除冗余的图像和黑白数据，属于有损压缩格局，它可能将图像压缩在很小的贮存空间，肯定水平上会造成图像数据的伤害。尤其是应用过高的压缩比例，将使最终解压缩后复原的图像品质升高，如果谋求高品质图像，则不宜采纳过高的压缩比例。
2.PNG
PNG（可移植网络图形格局）是一种无损压缩的高保真的图片格式。8 和 24，这里都是二进制数的位数。依照咱们前置常识里提到的对应关系，8 位的 PNG 最多反对 256 种颜色，而 24 位的能够出现约 1600 万种色彩。
PNG 图片具备比 JPG 更强的色调表现力，对线条的解决更加细腻，对透明度有良好的反对。它补救了上文咱们提到的 JPG 的局限性，惟一的毛病就是 体积太大。
3.GIF
图像调换格局（英语：Graphics Interchange Format，简称 GIF）是一种位图图形文件格式，以 8 位色（即 256 种颜色）重现真彩色的图像。它实际上是一种压缩文档，采纳 LZW 压缩算法进行编码，无效地缩小了图像文件在网络上传输的工夫。
4.SVG
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于形容二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的凋谢网络规范，SVG 可能优雅而简洁地渲染不同大小的图形，并和 CSS，DOM，JavaScript 和 SMIL 等其余网络规范无缝连接。实质上，SVG 绝对于图像，就好比 HTML 绝对于文本。
SVG 图像及其相干行为被定义于 XML 文本文件之中，这意味着能够对它们进行搜寻、索引、编写脚本以及压缩。此外，这也意味着能够应用任何文本编辑器和绘图软件来创立和编辑它们。
和传统的点阵图像模式，像 JPEG 和 PNG 不同，SVG 格局提供的是矢量图，这意味着它的图像可能被有限放大而不失真或升高品质，并且能够不便地批改内容。
5. WebP 和 APNG
WebP 是谷歌引入的一种绝对较新的格局，它的指标是通过以无损和有损格局编码图像来提供更小的文件大小，使其成为 JPEG 和 PNG 的一个很好的代替计划。WebP 图像的清晰度通常能够与 JPEG 和 PNG 等量齐观，而且文件大小要小得多。能减小到四分之一以下甚至更小。
APNG（Animated Portable Network Graphics）格局是 PNG 的位图动画扩大，但未获 PNG 组织官网认可。其扩大办法相似 GIF 89a，仍对原版 PNG 放弃向下兼容。这里先不谈。
它们尽管很优良但不能齐全代替 JPEG 和 PNG，因为浏览器对 WebP 反对并不广泛。
3. 图片优化的办法
1. 图片压缩与替换
a. 图片压缩
压缩图像就是在图片放弃在可承受的清晰度范畴内同时缩小文件大小。JPG 最大的特点就是有损压缩。这种高效的压缩算法使它成为了一种十分笨重的图片格式。另一方面，即便被称为“有损”压缩，JPG 的压缩形式依然是一种高质量的压缩形式：当咱们把图片体积压缩至原有体积的 50% 以下时，JPG 依然能够放弃住 60% 的品质。此外，JPG 格局以 24 位存储单个图，能够出现多达 1600 万种色彩，足以应答大多数场景下对色调的要求，这一点决定了它压缩前后的品质损耗并不容易被咱们人类的肉眼所觉察——前提是你用对了业务场景。<br/>
在线图片压缩
b. 应用更小体积的图片格式
依据利用场景，咱们能够选用 PNG,JPG 或 WebP，这里次要以 WebP 解说。
上面是一张图片转换位 WebP 格局后大小的比照，能够发现 WebP 文件的大小是 jpg 的三分之一。<br/>webp 转换器
JPG 图像：
WebP 图像：
简直看不出差异。然而其利用场景无限。
应用 webp-converter 来进行 WebP 转换。
“ 命令行下 npm init - y 而后
npm i webp-converter 装置 webp 转换工具 “
const webp=require('webp-converter');// 转化为 webp 文件
webp.cwebp('52.jpg',"output.webp","-q 80",function(status,error){
// 参数（）console.log(status);
});2.base64
图片的 base64 编码就是能够将一副图片数据编码成一串字符串，应用该字符串代替图像地址。
每一个图片相当于一次 http 申请，图片多了的话，耗性能比较严重。而将 jpg 转化成 base64 格局的图片，则极大地缩小了申请数 ，因为 base64 是文本格式，能够间接放在 body 里。<br/> 在线 base64 图片转换
京东的首页就有大量应用 base64 图片编码，个别是小图标之类的应用 base64 编码。大图片不倡议。
base64 的应用：成果：
3. 雪碧图
所谓的雪碧图是一种 CSS 图像合并技术，该办法是将小图标和背景图像合并到一张图片上，而后利用 css 的背景定位来显示须要显示的图片局部; 简略说就是在一整张图片中宰割出本人想要的局部，也可了解为图片截取显示（坐标的挪动)。<br/>
在线雪碧图制作 <br/>
上面的是我从京东首页找到的一张雪碧图：
应用实例：(背景定位办法使一张图用于多个图标)
<style>
.box_hd_arrow{
width: 16px;
height: 16px;
background-color:rgb(131, 118, 118);
display: inline-block;
background-image: url('./sprite.png');
background-position: 0 0;
/*background-position 背景定位。这里先应用左上角第一个图标 */
}
.box_hd_arrow:hover{
background-position: -16px 0;
/* 当鼠标移上去后，就向右挪动 16 像素，失去另一个图标 */
}其用于小图标较多
4. 各个场景下的举荐办法
- 这里援用一张网上的图片，该图片很清晰的分类了各种格局的应用场景。
- JPG 实用于出现色调丰盛的图片，在咱们日常开发中，JPG 图片常常作为大的背景图、轮播图或 Banner 图呈现。
京东就是应用 jpg 作为 banner 图应用（京东也应用本人推出的 dpg 图片，但实质上就算 jpg，这里先不讲）。
- 依据 PNG 在解决线条和色彩对比度方面的劣势，咱们次要用它来出现小的 Logo、色彩简略且比照强烈的图片或背景等。
京东首页的小图标根本是 PNG 图片。
- 此外依据利用场景（可兼容 WebP 的）还能够选用优良的 Webp 格局（解码速度和编码速度都比 jpg 慢很多，但因为缩小了文件体积，缩短了加载的工夫，页面的渲染速度放慢了。同时，随着图片数量的增多，WebP 页面加载的速度绝对 JPG 页面增快了。所以，应用 WebP 根本没有技术妨碍，还能带来性能晋升以及带宽节俭。）。
京东首页也有大量应用 WebP 图片。
- 对于一些小图标还能够应用 base64 或雪碧图形式，都能极大的缩小 HTTP 申请数。（上文也给出了示例，京东首页对 base64，与雪碧图的应用
5. 总结
优化 web 上应用的图像的过程并不简单，只须要开发者对图像的应用稍加留神，解决图片要掂量，就能通过缩小页面加载工夫，为客户带来更好的用户体验
同时图片懒加载也是图片性能优化的一大点，我会在下一篇文章具体介绍，图片懒加载的应用和其的节流。
参考文章：MDN 中 SVG 形容
菜鸟教程：Web 性能优化：图片优化
FunDebug：图片该如何优化来进步网站的性能，这里提供几种办法