在我们的日常开发中。必不可少会使用很多种图片。
我们需要根据业务场景来选择所使用的图片类型。
这里我整理了一些常用图片类型、他们的优缺点以及建议的使用场景。
我们使用的计算机都是以像素作为最小单位。
每一个像素在内存中需要使用 4 个字节，分别为 RGBA
1280*720*4 约等于 3.5M
图片格式，就是计算机存储图片数据的方式
顾名思义就是直接将图片数据加上元数据直接存储的方式。
代表格式：
BMP（BMP 取自位图 BitMaP 的缩写，也称为 DIB（与设备无关的位图））
这里仅仅是跟后边压缩格式做对照说明，web 开发中不要使用 bmp 格式图片。
压缩存储，就是在存储过程中通过压缩算法，将图片数据进行压缩，使得相同分辨率、相近质量的情况下。缩小图片所占空间。
既然在存储的时候压缩，那么在使用的时候，就需要先将压缩后的图片，解压然后放在内存中。
图片压缩的本质就是：以时间换空间
压缩的程度，就需要在空间成本和时间成本之间做到平衡。
再常见的场景中，相对硬盘存储成本和网络的传输能力，我们几乎不用考虑处理器的能力限制
对于图片数据的压缩，也分为两种
无损压缩：压缩和解压缩的过程是完全可逆的。
保证图片解压之后，可以完全追溯到源数据。
常用的无损压缩算是 LZ77 的衍生算法
简单说就是，在某一个缓冲区内，找到较长的重复数据。然后替换成较短的索引值。
gif、png、zip、gzip 等都是使用这个压缩算法
无损压缩的代表格式 png、gif
GIF（Graphics Interchange Format 图像互换格式）
索引模式 8 位，支持 256 色
布尔透明
支持交错
优点：
缺点：
适用场景：
PNG
全称便携式网络图形（外语全称：Portable Network Graphics）
png 格式拥有比 git 更优的算法
支持交错
png8
png24
缺点
优点
使用场景
有损压缩，就是在压缩过程中，对图片造成不可逆的质量损坏的压缩方式。
代表格式 jpg
全称联合照片专家组（外语简称 JPEG 外语全称：Joint Photographic Expert Group）
jpg===jpeg
不支持动画
可选压缩质量 JPEG 图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。 JPEG 图片在显示时候，使用 YCbCr 模式，利用人眼对亮度敏感大于色彩敏感。RGB 格式转换为 YCbCr 模式。 JPEG 的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。
支持交错 连续类似 PNG 交错，会先显示模糊轮廓
与 GIF 相比，JPEG 不适合用来存储企业Logo、线框、纯色类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件更大。
每次打开重新保存 jpg 都会造成质量的下降。
不适用场景：
适用场景
以上所述的，使用像素点来表示图形的图片格式，叫做位图。 还有一种使用点和线来描述图形的图片格式，矢量图
svg（Scalable Vector Graphics）
可缩放矢量图形（外语简称 SVG、外语全称：Scalable Vector Graphics）。
它是基于 XML，由万维网联盟进行开发的。一种开放标准的矢量图形语言，可任意放大图形显示，边缘异常清晰，文字在 SVG 图像中保留可编辑和可搜寻的状态，没有字体的限制，生成的文件很小，下载很快，十分适合用于设计高分辨率的 Web 图形页面
如果你的 logo 是特别复杂的，它可能会很耗费性能，甚至文件大小也非常大。
所以尽可能简化你的矢量形状的复杂度是很重要也很有必要的。 此外，SVG 文件是用 XML 编写的，因此可以在文本编辑器中打开和编辑。这意味着它展示的效果在运行时是可以改变的。你可以使用 JavaScript 来改变图片。
优点：
缺点：
应用场景
base64 本身不属于图片格式，是以字符串格式来保存图片数据的一种方式
标准的 ascii 字符中 0-31 及 127，属于控制字符，它们并没有特定的图形显示，但会依不同的应用程序，而对文本显示有不同的影响。
在网络上交换数据时，往往要经过多个路由设备，由于不同的设备对字符的处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这是不利于传输的。所以，我们经常讲源数据做 base64 处理
Base64 要求把每三个 8Bit 的字节转换为四个 6Bit 的字节（3*8 = 4*6 = 24），然后把 6Bit 再添两位高位 0，组成四个 8Bit 的字节（使用 A-Za-z0-9+/）等可见字符来做网络传输
Base64 适用于小段内容的编码，比如数字证书签名、Cookie 的内容等。
网页中，我们也使用 base64 来讲较小的图片转换为字符串数据，保存在 css 或者 html 中。从而减少网络请求的次数
也有些场景是讲图片或者文件转为 base64 格式，使用 post 上传到服务器实现文件上传功能
Base64 并不适合直接放在 URL 里传输，因为 URL 编码器会把标准 Base64 中的“/”和“+”字符转义
建议控制使用数量和图片大小
雪碧图也是为了减少网络请求，将小图标和背景图像合并到一张图片上，然后利用 css 的 background-positon 或者 img 的 clip 来显示需要显示的图片部分
优点
缺点
适用场景
Iconfont 是采用字体的方式来做图标。它的原理就是将很多 icon 做成字体库，通过样式或者字体对应的字符集来显示这个 icon。
优点
缺点
适用场景
保存好的图片，分为两个部分，
1、图片显示内容（我们上边所有的描述都是基于此）
2、图片的元数据 图片除了格式，宽高等基础数据之外。 相片类图片还包含了很多的文件简介内容，入创作者，时间，位置等等信息。 保存为 web 使用格式会删除掉图片元数据 这样既减小了请求消耗，又保护的用户隐私。
前端在使用图片，一定要保存为web格式。既减少网络带宽，也方式用户信息泄露。
WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。
WebP 既支持有损压缩也支持无损压缩。相较编码 JPEG 文件，编码同样质量的WebP 文件需要占用更少的计算资源。
在真实环境中，为了减小网络请求，服务端一般会开启 gzip 压缩。
因为图片相对尺寸较大，而且基本上常用的图片格式已经被做过压缩。
前端服务器 gzip 压缩时候，不要对图片类型开启
原文：https://www.cnblogs.com/shb190802/p/12791941.html