每个前端工程师都应该知道的图片知识据统计，网站60%的流量来自于网站图片。可见，对图片进行合理的优化可以极大的影响网站流量，减少带宽消耗和服务器压力。有时你花很多精力配置webpack来减少打包体积。最好优化几张图片。这篇文章就是让你知道如何选择合适的图片，让你了解这么多图片格式，在哪些场景下使用哪种格式，想看答案就滑到文末看图片。我的更多文章可以在GitHub博客上找到。基本概念在进入正题之前，先说说图片相关的一些基本概念。一张照片（位图）不断放大后，你会看到小格子。这些小网格称为像素。一个格子（像素点），在计算机中是用二进制表示的，二进制位数越多，像素点的颜色就越丰富。比如🌰，如果一个像素点用一个二进制数表示，它可以有多少种颜色？二、一个二进制位，要么放0（表示黑色），要么放1（表示白色）如下图它表示一个像素二进制中的位数可以显示多少种颜色。对图片有了基本的了解之后，接下来就是对图片进行分类，这有利于了解各种格式图片的特点。按图像类型分类位图（bitmap）矢量位图（bitmap）位图，也叫位图、像素图。构成位图的最小单位是像素。位图是通过像素阵列的排列来实现的。每个像素都有自己的颜色信息。在编辑位图图像时，可操作的对象是针对每个像素点，我们可以改变图像的色调、饱和度、透明度，从而改变图像的显示效果。前面介绍的不断放大会出现小格子的图片就是位图。常见的如：jpg、png、webp等。我们平时遇到的大部分都是位图。矢量图形，又称向量图形。矢量图形不记录屏幕上每个点的信息，而是记录元素的形状和颜色的算法。打开矢量图时，软件会对图形对应的函数进行计算，计算出图形的形状和颜色作为计算结果。给你看。无论显示屏幕是大是小，屏幕上的物体对应的算法都是不变的。因此，即使将屏幕放大到很大倍数，显示效果仍然一样（无失真）。最常见的是svg格式。按压缩分类无压缩。无损压缩。有损压缩。无压缩图像格式不对图像数据进行压缩，可以准确呈现原始图像。BMP格式就是其中之一。有损压缩是指在压缩文件大小的过程中，图片的部分信息丢失，即图片质量下降，这种丢失是不可逆的。我们不可能从有损压缩图片中恢复。原图。一种常见的有损压缩方法是将相邻的像素按照一定的算法进行合并。压缩算法并不对图片的所有数据进行编码压缩，而是在压缩时去除图片中人眼无法识别的细节。因此，有损压缩可以在同等画质的情况下，大大减小图片的体积。代表之一是jpg。无损压缩在压缩图片的过程中，不会有图片质量的损失。我们可以随时从无损压缩图片中恢复原始信息。压缩算法对图片的所有数据进行编码压缩，可以在保证图片质量的同时减小图片的体积。png就是其中的代表。总结使用有损压缩来处理图像，就是去掉一些像素数据，无法找回原图。使用无损图像处理就是对像素数据进行压缩，可以找回原图。常见图像格式分析GIF关键词：无损压缩、索引颜色、透明度、动画GIF（GraphicsInterchangeFormat）本义是“图像交换格式”，是一种基于LZW算法连续色调的无损索引颜色压缩格式。它的压缩率一般在50%左右，不属于任何应用程序，所以几乎所有的相关软件都支持它，并且在公共领域有大量使用GIF图像文件的软件。GIF是一种无损压缩，所以它只压缩像素数据。LZW算法其实只是一种压缩数据的算法。如果您了解哈夫曼算法，可能更容易理解压缩数据的情况。GIF的特点是帧动画。与旧的bmp格式相比，体积更小，支持透明（不支持半透明，因为不支持Alpha透明通道）和动画。优点优秀的压缩算法，可以在一定程度上保持图像质量，同时将体积缩小到很小的体积。可以为动画效果插入多个帧。可以设置透明颜色以提供对象出现在背景之上的效果。缺点由于使用8位压缩，最多只能处理256色，所以不适合真彩色（文末附录有说明）图片。适用于标志、图标、线框、文字输出等颜色简单的场景。JPG/JPEG关键词：有损压缩，直接上色，适合大图，体积小。JPEG格式是最常见的图片格式，文件后缀名为“.JPEG”或“.jpg”，JPEG可以说是大家最熟悉的图片文件格式了。相信在数码相机普及的今天，几乎所有的数码相机和照相手机都可以（甚至只能）输出JPEG格式的图像。文件。JPEG是一种典型的使用有损压缩的图像格式，这意味着用户每次进行JPEG归档时，都会破坏图像文件的一些内容细节，尤其是压缩率过高，会使得最终的质量解压后恢复的图像明显缩小。如果你追求高质量的图像，你不应该使用太高的压缩率。JPEG图像格式的设计目标是在不影响人类可识别的图像质量的情况下，尽可能地压缩文件大小。BaselineJPEG和ProgressiveJPEGJPEG有两种保存方式：BaselineJPEG（标准类型）和ProgressiveJPEG（渐进类型）。两种格式的大小和图像数据相同，扩展名也相同，区别在于显示方式不同。BaselineJPEGBaselineJPEG文件以从上到下的扫描方式存储，每行按顺序存储在一个JPEG文件中。当打开这个文件显示它的内容时，数据会按照存储的顺序从上到下逐行显示，直到读取完所有数据，完成整张图片的显示。如果文件较大或者网络下载速度较慢，会看到图片逐行加载的效果。这种JPEG格式没有任何优势。因此，一般推荐ProgressiveJPEG。渐进式JPEG不同于基线扫描。渐进式JPEG文件包含多个扫描，这些扫描按顺序存储在JPEG文件中。在打开文件的过程中，首先会显示出整个图片模糊的轮廓，随着扫描次数的增加，图片会越来越清晰。这种格式的主要优点是在网络慢的时候，可以看到图片的轮廓，知道即将加载的图片是什么。在某些站点上打开较大的图像时，您会注意到这种技术。渐进式图片的好处是用户不用下载图片就可以看到最终图片的大概轮廓，一定程度上可以提升用户体验（Waterfall推荐的网站还是使用标准类型）。有关BaselineJPEG和ProgressiveJPEG的更多信息，请参阅本文：使用ProgressiveJPEG改善用户体验。优点可以支持24bit真彩，一般用在色彩丰富的图片、照片等需要连续色调的图像中；可变压缩比可用于控制文件大小；支持隔行扫描（渐进式JPEG文件）；缺点JPEG不适合存储企业标志和线框图。有损压缩会导致图像模糊，选择直接颜色会导致图像文件比GIF大。有损压缩会降低原始图像数据的质量。JPEG图片不支持透明处理，透明图片需要调用PNG渲染。适用于场景JPG适合呈现色彩丰富的图片。在我们日常开发中，JPG图片经常以大背景图、轮播图或banner图的形式出现。GIFvsJPEG由于GIF和JPEG具有如此不同的特点，我们可以很容易地选择何时使用哪种格式来输出我们需要的图像文件：当图像色彩丰富且没有明显鲜明的对比边缘线条时，选择JPEG即可得到输出效果不错，照片是例子；当图片是线条图，边缘清晰，不使用太多颜色，甚至可能需要透明背景，文件体积小，画质精美时，GIF是一个不错的选择。PNG关键词：无损压缩、索引颜色、支持透明、大尺寸PortableNetworkGraphics（简称PNG，英文全称：PortableNetworkGraphics）。PNG可以提供长度比GIF小30%的无损压缩图像文件。它同时提供24位和32位图形支持以及许多其他技术支持。由于PNG的优良特性，PNG格式的图片可以称为“网页设计专用格式”。PNG最初是作为GIF的替代品开发的。作为一种新发展起来的图像传输文件格式，PNG也采用了一种无损压缩格式。其实PNG的发展是因为GIF使用的无损压缩格式的专利问题而诞生的。的。PNG一共有三种形式，下面分别介绍它们的区别。PNG-8PNG-8是PNG的索引颜色版本。PNG-8是无损的、索引颜色的位图。PNG-8是GIF的一个很好的替代品。在可能的情况下，应使用PNG-8而不是GIF，因为PNG-8在相同图像效果下的文件体积更小。另外，PNG-8还支持透明度的调整，而GIF则不支持。现在，除非需要动画支持，否则没有理由在PNG-8上使用GIF。PNG-24PNG-24是PNG的直接彩色版本。PNG-24是无损的，使用直接颜色，位图。使用直接颜色的无损位图，听起来很像BMP，是的，PNG-24在显示效果上和BMP没有区别。PNG-24的优点在于它对图片的数据进行了压缩，使得同样效果的图片，PNG-24格式的文件大小比BMP小很多。当然，PNG24图像仍然比JPEG、GIF、PNG-8大得多。不过，PNG-24的一大目标是取代JPEG的使用。但是，一般来说，PNG-24的文件大小是JPEG的五倍，而且显示质量通常只有很小的改进。因此，只有在不关心图片文件大小，但希望显示效果好的时候，才应该使用PNG-24格式。此外，PNG-24和PNG-8一样，支持图像透明度。理论上来说，追求好的显示效果，不在意文件大小的情况下推荐使用PNG-24。在实践中，为了避免体积问题，我们一般不会使用PNG来处理更复杂的图像。当我们遇到适合PNG的场景时，我们也会优先选择较小的PNG-8。PNG-32PNG-32和PNG-24的区别在于多了一个Alpha通道来支持半透明，其他和PNG-24基本相同。优点：支持高级无损压缩；支持alpha通道透明度；支持256色调色板技术制作小批量文件；支持24位和8位灰度图像。支持图像亮度的伽玛校准信息。支持存储附加文本信息，保留图片名称、作者、版权、创建时间、备注等信息。渐进式显示和流式读写适用于网络传输时快速显示预览效果，然后显示全图。缺点较旧的浏览器IE6-和程序可能不支持PNG文件；与JPEG的有损压缩相比，PNG提供的压缩率更低；与GIF格式相比，不提供对多图像文件或动画文件的任何支持。适用于logo小的场景、图片或颜色简单、对比强烈的背景等。关于PNG的小知识PNG分为两种，一种是Index，一种是RGB。Index记录了相同颜色的值和位置（简单的说，比如一张2px*2px的超小图片，从左到右，从上到下的颜色分别是红，白，白，红，那么记录的方法就可以了是“红色-1,4；白色-2,3”）；而RGB图则按顺序记录所有像素点的颜色值（即“红、白、白、红”）。对于同一张图片，Index格式的大小总是小于RGB格式的大小。其中PNG-8是Index，称为索引色，而PNG-24和PNG-32是RGB形式，也可以称为直接色。由于PNG是无损压缩并保留了图像所需的所有信息，因此索引颜色可以转换为直接颜色。WebP关键词：年轻、有损、无损、兼容性WebP是谷歌开发的一种新的图像格式，WebP是一种位图，同时支持有损和无损压缩，使用直接颜色。从名字就可以看出它是为Web而生的。什么为网络而生？也就是说，同样质量的图片，WebP的文件体积更小。现在的网站充斥着大量的图片，如果能够减小每张图片的文件大小，浏览器与服务器之间的数据传输量将大大减少，从而降低访问延迟，提升访问体验。在无损压缩的情况下，同等质量的WebP图片文件大小比PNG小26%；在有损压缩的情况下，相同图像精度的WebP图片文件大小比JPEG小25%~34%；WebP图片格式支持图片透明。无损压缩的WebP图像只需要22%的额外文件大小来支持透明度。可以看出WebP结合了多种图片文件格式的优点，所以在图片质量和性能上，WebP无疑是赢家。然而，WebP有一个缺点使其无法大规模使用，那就是兼容性。这是我2019年5月拍的图，可以看到所有版本的IE和Safari都不支持（这是个缺陷），Firefox最近几个版本才开始支持。年轻人有小年纪。此外，与JPG相比，WebP的编码速度慢了10倍，解码速度慢了1.5倍。在大多数网络应用中，图片都是静态文件，用户只需要关心解码速度即可。但实际上，虽然WebP会增加额外的解码时间，但由于文件大小的减小和加载时间的缩短，文件的渲染速度实际上更快了。使用场景WebP结合了多种图片文件格式的优点，所以基本上适用于各种场景。但是由于兼容性不好，如果大规模应用WebP，就必须在Safari和IE中进行降级。这是我在Chrome中打开的一张淘宝商品图片示例。可以看到图片的后缀是.jpg_.webp。如果这张图片在Safari中打开，后缀会变成.jpg。这是一个降级解决方案。读者自行研究，本文不做讨论。APNGAPNG（AnimatedPortableNetworkGraphics），顾名思义，是一种基于PNG格式扩展的动画格式。它增加了对动画图像的支持，并增加了对24位图像和8位Alpha透明度的支持，这意味着动画将具有更好的质量，它是为取代旧的GIF格式而诞生的，但目前还没有被官方认可巴布亚新几内亚组织。APNG的第一帧是标准的PNG图片，其余的动画、帧率等数据都放在PNG扩展数据块中，所以只支持原始PNG的软件会正确显示第一帧。在兼容性方面，大部分浏览器还是支持的。如果你以前因为动画而使用GIF，现在使用APNG是一个不错的选择。其他特性与PNG相同，因为APNG只是PNG的扩展。.更多APNG相关信息，请查看APNGSVG关键词：无损矢量图形，体积小，不失真，兼容性好ScalableVectorGraphics英文ScalableVectorGraphics（SVG），是无损的，矢量图形。SVG是一种以XML定义的语言，用于描述二维矢量图和矢量图/光栅图形。SVG提供了三种图形对象：矢量图形（vectorgraphicshape，例如：由直线和曲线组成的路径）、图像（image）和文本（text）。图形对象也可以进行分组、样式化、变换、组合等。功能集包括嵌套变换、剪切路径、alphamasks、滤镜效果、模板对象（templateobjects）和其他扩展（extensibility）。SVG不同于上面的图像格式，因为SVG是矢量图。这意味着SVG图像由直线和曲线以及绘制它们的方法组成。当您放大SVG图像时，您仍然看到直线和曲线，而不是像素。这意味着SVG图像在放大时不会变形，因此非常适合绘制公司徽标、图标等。优点：SVG可以通过许多工具（如记事本）读取和修改。SVG比JPEG和GIF图像更小且更易于压缩。SVG是可扩展的。SVG图像中的文本是可选的，也是可搜索的（非常适合地图）。SVG可以与JavaScript技术一起运行。SVG图形格式支持多种滤镜和特效，可以在不改变图像内容的情况下实现类似于位图格式文本阴影的效果。SVG图形格式可用于动态生成图形。例如，SVG可用于动态生成交互式地图，将它们嵌入网页，并显示给最终用户。缺点：渲染成本比较高，对性能有影响。SVG的学习成本相对较高，因为它是可编程的。适用场景1.高保真复杂矢量文档现在是并将继续是SVG点。它非常详细，适合查看和打印。它可以是独立的，也可以嵌入到网页中。2、WEB项目中的平面绘制，如画线、多边形、图片等。3、数据可视化。SVG只是Web开发中常用的一种矢量图形。其实矢量图有几种常见的格式：BW格式、AI格式、CDR格式、ICO格式。小结本文详细介绍了常见的图片格式：GIF、JPEG、PNG、WebP、APNG、SVG，它们是什么，有什么用途，优缺点，使用场景。由于图片方面的知识确实太多了，所以就把一些我认为有必要的写出来。下面我在网上找了一张选图过程的表格和图解。下次不知道选什么图片格式，看图就好了。其中APNG和WebP格式出现较晚，尚未被Web标准采纳。只有在可以预测特定平台或浏览器环境时，才能采用它们。图片格式选择过程如下：图片格式支持透明动画，支持压缩方式。浏览器支持相对于原始图像大小来适应场景。baseline-jpeg不支持也不支持有损。所有常见场景都是由图像质量决定的，progressiveloadinggif支持无损都是由帧数和每帧大小决定的图片简单颜色，动画png支持不支持无损都是由png颜色值的数量决定的需要透明时webp支持不支持yesLossy和lossless全部（IE和Safari除外）由压缩率决定复杂的颜色和形状，浏览器平台可以预测apngsupportlossless全部（IE和Opera除外）决定通过图片的每一帧需要半透明效果的动画svg支持全无损（IE8及以上）简单的图形由内容和特效的复杂程度决定，需要良好的缩放体验，需要动态控制图片特效补充内容以下大部分内容来自于网上，因为我在写这篇文章的过程中看到了这些，觉得有必要去了解一下，所以贴出这些，与文章的内容关系不大。您可以忽略位图图像属性索引颜色/颜色表。一种常见的位图压缩方法。从位图图片中选取几种最有代表性的颜色（一般不超过256种）编制色表，然后用色表的索引表示图片中的原始颜色。这样就可以对原图进行极大的有损压缩。适合压缩网页图形等颜色较少的图形，不适合压缩照片等颜色丰富的图形。Alpha通道在原有图片编码方式的基础上，增加了像素的透明度信息。在图形处理中，RGB三色信息通常被称为红色通道、绿色通道和蓝色通道，透明度被相应地称为Alpha通道。大多数使用颜色表的位图格式都支持Alpha通道。颜色深度颜色深度也叫颜色位，即位图中用多少二进制位来表示每个点的颜色，是分辨率的重要指标。常用的有1位（单色）、2位（4色、CGA）、4位（16色、VGA）、8位（256色）、16位（增强色）、24位位（真彩色）和32位等等。色深为16位以上的位图，可以根据代表RGB三基色或CMYK四基色的位数（有的还包括Alpha通道）进一步分类。位不携带任何信息），R4G4B4A4等等。8位色，所谓8位色并不是图像只有8种颜色，而是2^8，即256种颜色，8位图像是指用8位来表示颜色；16位色，2^16，对于人眼来说，16位色基本可以满足视觉需求；24位色，也称为“真彩色”。大约有1600万种，这个数字几乎是人类视觉分辨颜色的极限；32位色，不是2^32，其实是2^24色，只是增加了2^8级颜色的灰度，也就是8位透明度，所以指定为32位色。在制作网站页面图片时，设计师一般会选择24位图片。32位图片虽然画质更好，但也带来了更大的图片尺寸（实际上肉眼很难区分24位图片和32位图片的区别）。此外，放大和缩小原始位图会使图像效果失真，因为它们减少了图像中有效像素的数量或密度，因此在制作过程中应尽可能避免对图像进行多次编辑。真彩色、假彩色和直接彩色是利用图像的属性来描述图像的。图像的属性包括分辨率、像素深度、表示和类型等。本节介绍前三个功能。弄清真彩色、假彩色和直接彩色的含义，对于编写图像显示程序和理解图像文件的存储格式，具有直接的指导意义，不会出现这样的现象：本来是用真彩色图像表示的，但是VGA显示器上显示的图像颜色不是原始图像的颜色。各种花里胡哨的东西我这里就不以图文的形式介绍了，我就用最简单的，作为一个程序员的角度去理解吧。TrueColorTrueColor是一种使用三个或更多字节来描述像素的计算机图像存储方法。一般来说，前三个通道各用一个字节表示，如红、绿、蓝（RGB）或蓝、绿、红（BGR）。第四个字节的存在表示图像具有alpha通道。但实际系统中往往使用8位以上（即1个字节）来表示一个通道，如48位的扫描器。这样的系统统称为真彩色系统。对于伪彩色索引图像，每个像素值存储的不是直接基色强度，而是存储的索引。就像js中的引用变量一样，变量只是一个地址，变量指向的值才是真正的值。直接色直接色也称为假色。它与假色的区别在于前者需要对每个原色强度进行索引，才能找到真正的原色强度。总结将直接彩色系统产生的颜色与真彩色系统进行比较。相同的是，R、G、B分量用于确定基色的强度。不同的是，前者的基色强度由R、G、B直接决定，而后者的基色强度由R、G、B经过变换后决定。因此，两种系统产生的颜色存在差异。与伪彩色系统相比，相同的是直接彩色系统使用了查找表。不同的是前者是分别对R、G、B分量进行变换，后者是将整个像素点作为查找表的索引值进行颜色变换。
