1.为什么要进行图像优化？对于大多数前端来说，图片可能是UI设计师（或者你自己）裁剪出来的图片，我们直接把图片扔掉就行了。进入项目，然后以链接的形式呈现在页面上，而我们往往关注的是项目的打包优化，如何分包，如何提取第三方库等等。但有时我们忘记了图片是网站最大的加载资源。根据HTTPArchieve的统计，图片内容已经占到互联网总内容的62%，这意味着超过一半的流量和时间都花在了下载图片上。从性能优化的角度来说，图片绝对是优化的热点和重点之一。雅虎军规和谷歌官方的最佳实践都将图片优化列为前端性能优化的重要组成部分——图片优化的优先级可见一斑。优化图片绝对可以让网站的体验更上一层楼。所以我们要在图片上下功夫，经过优化，减少加载时间，减少HTTP请求次数。2、常用图片格式介绍其中APNG和WebP格式出现较晚，没有被Web标准采用。它们只能在可以预测特定平台或浏览器环境时使用。1.JPG/JPEGJPEG（联合图像专家组）是联合图像专家组是连续色调静止图像压缩的标准。文件扩展名为.jpg或.jpeg，这是最常用的图像文件格式。它主要采用预测编码（DPCM）、离散余弦变换（DCT）和熵编码的联合编码方法去除冗余图像和颜色数据。它是一种有损压缩格式，可以在很小的存储空间内压缩图像。空间在一定程度上会对图像数据造成损坏。特别是，使用过高的压缩率会降低最终解压后恢复图像的质量。如果你追求高质量的图像，你不应该使用过高的压缩率。2、PNGPNG（PortableNetworkGraphicsFormat）是一种无损压缩的高保真图像格式。8和24，这里是二进制数的位数。根据我们前置知识中提到的对应关系，8位PNG最多支持256种颜色，而24位PNG可以显示大约1600万种颜色。PNG图片比JPG有更强的色彩表现力，线条处理更细腻，对透明度有很好的支持。弥补了我们上面提到的JPG的局限性，唯一的缺点就是 太大了。3、GIF图像交换格式（英文：GraphicsInterchangeFormat，简称GIF）是一种以8位颜色（即256色）再现真彩色图像的位图图形文件格式。它实际上是一个压缩文件，采用LZW压缩算法编码，有效减少图像文件在网络上的传输时间。4.SVG可缩放矢量图形（ScalableVectorGraphics，SVG）是一种基于XML的标记语言，用于描述二维矢量图形。SVG作为一种基于文本的开放网络标准，可以优雅简洁地渲染不同大小的图形，并与CSS、DOM、JavaScript和SMIL等其他网络标准无缝对接。本质上，SVG之于图像就像HTML之于文本。SVG图像及其相关行为在XML文本文件中定义，这意味着它们可以被搜索、索引、编写脚本和压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件创建和编辑它们。与传统的位图图像模式（如JPEG和PNG）不同，SVG格式提供矢量图形，这意味着它的图像可以无限放大而不会失真或降低质量，并且可以轻松修改内容。5.WebP和APNGWebP是谷歌推出的一种相对较新的格式，旨在通过以无损和有损格式对图像进行编码来提供更小的文件大小，使其成为JPEG和PNG计划的良好替代方案。WebP图片的清晰度通常可以与JPEG和PNG相媲美，而且文件大小要小得多。它可以减少到不到四分之一甚至更小。APNG（AnimatedPortableNetworkGraphics）格式是PNG的位图动画扩展，但尚未得到PNG组织的正式认可。其扩展方式类似于GIF89a，仍然向后兼容原来的PNG。我们先不在这里说。它们非常好，但不能完全替代JPEG和PNG，因为对WebP的浏览器支持并不普遍。三、图像优化方法1、图像压缩与替换a．图像压缩压缩图像是为了减小文件大小，同时使图像保持在可接受的清晰度范围内。JPG最大的特点就是有损压缩。这种高效的压缩算法使其成为一种非常轻量级的图像格式。另一方面，虽然被称为“有损”压缩，但JPG的压缩方式仍然是一种高质量的压缩方式：当我们将图片体积压缩到原始体积的50%以下时，JPG仍然可以保持60%。％质量。另外，JPG格式以24位存储单张图片，最多可以呈现1600万种颜色，足以满足大部分场景下的色彩需求，这决定了压缩前后的质量损失不易被察觉。我们人眼看到的Perceived——前提是你用对了业务场景。
在线图像压缩b．使用较小的图像格式。根据应用场景的不同，我们可以选择PNG、JPG或WebP。这里我们主要使用WebP来进行讲解。下面是一张图片转换成WebP格式后的大小对比。可以发现WebP文件的大小是JPG的三分之一。
webpconverterJPGimage:WebPimage:几乎没有明显的区别。但其应用场景有限。使用webp-converter进行WebP转换。``命令行npminit-y然后npmiwebp-converter安装webp转换工具``constwebp=require('webp-converter');//转换成webp文件webp.cwebp('52.jpg',"output.webp","-q80",function(status,error){//参数()console.log(status);});2、base64图片的base64编码就是将一对图片数据编码成一个字符串A来代替图片地址使用。每张图片相当于一个http请求。如果图片太多，性能消耗会很严重。将jpg转成base64格式的图片大大减少了请求次数，因为base64是文本格式，可以直接放在body中。
在线base64图片转换京东首页有大量的base64图片编码，一般小图标之类的都使用base64编码。不建议使用大图像。base64的使用：效果：3.Sprite图片所谓Sprite图片是一种CSS图片合并技术，就是将小图标和背景图片组合成一张图片，然后利用CSS的背景定位来显示图片中需要显示的部分被展示；简单的说就是在整个画面中划分出自己想要的部分，也可以理解为画面截取显示（坐标的移动）。
在线精灵图制作
下面是我从京东首页找到的一张精灵图：使用示例：（背景定位方式使一张图片用于多个图标）16px;高度：16px；背景颜色：RGB（131、118、118）；显示：内联块；背景图片：url('./sprite.png');背景位置：00；/*background-position背景定位。这里先用左上角第一个图标*/}.box_hd_arrow:hover{background-position:-16px0;/*鼠标上移时，向右移动16个像素，得到另一个图标*/}用于小图标很多4.各种场景下的推荐方法下面是网上的一张图，分类很清楚，用法各种格式的场景。JPG适合呈现色彩丰富的图片。在我们日常开发中，JPG图片经常以大背景图、轮播图或banner图的形式出现。京东用的是jpg作为banner图片（京东也用自己的dpg图片，但本质上是jpg，这里就不说了）。根据PNG在处理线条和颜色对比方面的优势，我们主要用它来呈现小Logo、颜色简单、对比强烈的图片或背景等。京东首页的小图标基本都是PNG图片。另外，根据应用场景（兼容WebP），也可以选择优秀的Webp格式（解码速度和编码速度都比jpg慢很多，但是因为文件体积变小了，加载时间也缩短了，而且页面渲染速度加快，同时随着图片数量的增加，WebP页面的加载速度比JPG页面更快，所以使用WebP基本没有技术障碍，可以还带来了性能改进和带宽节省。）。京东首页也大量使用了WebP图片。对于一些小图标，也可以使用base64或者sprite图片，这样可以大大减少HTTP请求的次数。（上面也给出了例子，京东首页使用base64和Sprite图片，可以通过减少页面加载时间给客户带来更好的用户体验。同时图片的懒加载也是图片的一大亮点性能优化，我会在下篇文章详细介绍图片懒加载的使用和节流。。参考文章：MDN新手教程中的SVG说明：Web性能优化：图片优化FunDebug：如何优化图片提高网站性能，这里有几种方法
