原创地址，转载请注明出处。我想一开始，这个问题是实习面试的时候问的。这个问题看起来很简单，但是要想回答好，还是要下一番功夫才能理解的。不想看文章的直接翻到文末看结论。那么，在开始之前，我们先补充一些图片的基础知识。图片的类型首先，我们需要了解图片的类型。图片目前有两种：位图矢量图形位图所谓位图就是由像素点组成的图片，也叫位图。我们平时使用的png、jpg等图片都是位图。如上图所示，一张图片放大后，可以看到一个个小点，每个小点就是图片的一个像素点。矢量图形，又称向量图形。矢量图形不记录屏幕上每个点的信息，而是记录元素的形状和颜色的算法。打开矢量图时，软件会对图形对应的函数进行计算，计算出图形的形状和颜色作为计算结果。给你看。不管显示屏幕是大是小，屏幕上的物体对应的算法是不变的，所以即使屏幕被缩放了相当大的倍数，也不会像位图那样变形。最常见的是svg格式。图像压缩类型无压缩有损压缩无损压缩无压缩无压缩图像格式不对图像数据进行压缩，能够准确呈现原始图像。比如BMP格式的图片。有损压缩是指在压缩文件大小的过程中，图片的部分信息丢失，即图片质量下降（即图片模糊），这种丢失是不可逆的。一种常见的有损压缩方法是将相邻的像素按照一定的算法进行合并。压缩算法并不对图片的所有数据进行编码压缩，而是在压缩时去除图片中人眼无法识别的细节。因此，有损压缩可以在同等图像质量的情况下大大减小图像的体积。比如jpg格式的图片就采用了有损压缩。无损压缩在压缩图片的过程中，不会有图片质量的损失。我们可以随时从无损压缩图片中恢复原始信息。压缩算法对图片的所有数据进行编码压缩，可以在保证图片质量的同时减小图片的体积。例如，png和gif使用无损压缩。图片的数量通常分为8张、16张、24张、32张，至于图片的数量是多少，这里就不展开了，因为展开会很占地方。有兴趣的童鞋可以看看：图片数量8位、16位、32位图片颜色模式的区别（咬合）。大的。例如，8位图像支持256种颜色，即2的8次方。图像位数越大，颜色过渡越细腻，携带的颜色信息也越丰富。32位和24位的区别在于多了一个Alpha通道来支持半透明，其他和24位基本一样。常见的图片格式GIFGIF全称GraphicsInterchangeFormat，可译为GraphicsInterchangeFormat。它由CompuServe于1987年开发，填补了跨平台图像格式的空白。GIF使用Lempel-Zev-Welch(LZW)压缩算法，最多支持256种颜色。由于这一特点，GIF更适合色彩较少的图片，如卡通造型、公司标志等。如果遇到需要24位真彩色的场合，那么GIF的表现力就有限了。GIF格式图片最大的特点就是帧动画。与旧的bmp格式相比，体积更小，支持透明（不支持半透明，因为不支持Alpha透明通道）和动画。优点体积小支持动画缺点由于采用8位压缩，最多只能处理256色”，是一种常用的图像文件格式，由软件开发协会制定，是一种有损压缩格式，可以压缩图像存储空间小，图像中重复或不重要的数据会丢失，容易造成图像数据损坏，特别是压缩率过高，解压后恢复的图像质量会很差显着降低，如果追求高质量图片，压缩比不要太大优点有损压缩，压缩后体积更小支持24位真彩色支持渐进式加载缺点有损压缩会损害图片质量不支持transparent/translucentprogressivejpeg（渐进式jpeg）图片及其相关的progressivejpeg是什么鬼？先给大家看两张图：Ordinaryjpg:Progressivejpg:从上面两张图可以看出，普通jpg是从上到下加载图片的，尤其是网速慢的时候。渐进式jpg文件包含多次扫描，这些扫描按顺序存储在jpg文件中。在打开文件的过程中，首先会显示出整个图片模糊的轮廓，随着扫描次数的增加，图片会越来越清晰。至于如何生成渐进式图片，可以看这里，本文不再展开。PNGpng，即便携式网络图形，是一种无损压缩位图图形格式，旨在替代GIF和TIFF文件格式，同时增加了一些GIF文件格式所没有的功能。PNG采用源自LZ77的无损数据压缩算法，压缩率高，文件体积小，一般用于JAVA程序、网页或S60程序中。PNG支持8位、24位和32位。我们通常称它们为png8、png24和png32。png88-bitpng最多支持256种（2的8次方）颜色，png8有一个1位的布尔透明通道（完全透明或完全不透明）。PNG-8格式类似于GIF图像，也使用8位调色板将RGB彩色图像转换为索引彩色图像。图像中保存的不再是每个像素点的颜色信息，而是从图像中选取的具有代表性的颜色编号。每个数字对应一种颜色，图像的数据量因此减少，极大地影响了彩色图像的传播。非常优惠。有关索引颜色模式的更多信息，请参见此处。PNG24支持颜色的2的24次方，即rgb分别使用8位，不支持透明度。注意：png24是不透明的，是不透明的，是不透明的。有人会说我用PS导出的png明明是png24的，而且我还选了透明，结果出来的图是透明的？为什么png24不透明？这时候可以查看图片详情，看看你导出的图片深度是不是24？如果是透明的就是32，否则就是24，不过你导出的时候PS偷偷给你改了。PNG32在24位PNG的基础上增加了8位透明信息，支持不同程度的半透明效果。比如我们在css中设置rgba(0,0,0,0.5)。优点无损压缩支持透明和半透明最高可达24位真彩色图像和8位灰度图像，从而完全消除锯齿状边缘。缺点与jpg的有损压缩相比，png提供的压缩率较低，不支持动画。如果需要支持动画，就得用apngAPNG（AnimatedPortableNetworkGraphics）是一种基于PNG（PortableNetworkGraphics）的位图动画格式。其实就是多个png组成的动画。打开MAC电脑就可以看到组成apng的每一张图片。优点支持png的所有优点支持动画缺点浏览器支持不佳WEBPWebP最初由谷歌于2010年发布，旨在减小文件大小。它支持无损和有损压缩。它几乎综合了以上所有图片的优点，并且可以有更高的压缩比。我们可以看到下面两张图片的体积，一张是压缩后的jpg，一张是webp。jpg缩小了近50%！悲剧的是，webp支持率有些感人。SVGSVG是一种用XML定义的语言，用于描述二维矢量图和矢量图/光栅图形。SVG提供了三种图形对象：矢量图形（例如：由直线和曲线组成的路径）、图像和文本。还可以对图形对象进行分组、设置样式、转换、组合等等。该功能集包括嵌套变换、剪切路径、alpha蒙版、滤镜效果、模板对象和其他扩展。SVG图形是交互式和动态的，您可以在SVG文件中嵌入动画元素或通过脚本定义动画。SVG和上图的区别在于，它是矢量图，无论怎么放大，都不会变形；同时，SVG文件通常比JPEG和PNG格式文件小得多。优点SVG可以被许多工具（如记事本）读取和修改SVG比JPEG和GIF图像更小，更易于压缩。SVG是可缩放的SVG图像可以以任何分辨率高质量打印SVG可以按比例放大而不损失图像质量SVG可以使用JavaScript技术运行SVG文件是纯XML缺点渲染成本相对于其他格式图像相对较高，这对性能有影响。由于SVG是一种以XML定义的语言，因此存在学习成本。SVGASVGA其实就是一个动画播放引擎。这里其实有点题外话，我就简单提一下。svga的用法可以看官方文档。如果你是vue用户，可以使用我打包的vue-svga组件，它基于svga.lite包，svga.lite是SVGAPlayer的阉割版。当设计需要输出复杂的动画时，可以考虑输出svga格式的文件。与bodymovin输出的json文件相比，小了很多。优点可以控制动画的播放和暂停，也可以监控动画的播放状态。与apng相比，体积更小。您可以放大和缩小而不会失真。浏览器兼容性好。会消耗过多的性能。如何选择图片格式通过分析以上几种常见图片的优缺点，我们可以选择如下图所示的图片格式。参考链接每个前端工程师都应该了解的图片知识PNG32和PNG32的区别
