本篇博客转载：聊聊几种常见的图片格式Webp、GIF、PNG、JPG。
关于图片，算是前端性能优化的一个核心，所以这里就不自己整理，而是尽可能的采用其他大佬整理好的标准答案了。
文中的内容我根据自己的经验确认了一下，基本没什么问题，可以放心食用。
正文
前端开发中经常和图片打交道，那么熟悉各种图片格式的应用场景以及优劣势对于我们尤为重要。
基础的那些老古董问题让人心生烦躁，相比那些问题，图片这个问题虽然基础且老旧，但是在前端开发中确实频繁出现。
时至今日，在性能优化这里，图片的压缩依旧是一个避不开的问题。
关于网页中对图片的性能优化，后续会单独出一张内容，本次只是简单整理这些图片的格式，做个基础的了解。
关于压缩
- 无损压缩：对文件的数据存储方式进行优化，采用某种算法表示重复的数据信息，能在保证图片的质量的同时降低图片的尺寸，png是其中的代表，但尺寸相比原图减少不多。
可以还原 - 有损压缩：在压缩的时候，去除了人眼无法识别的图片细节，图片质量会下降，图片尺寸能得到很大程度的压缩。
不可还原 - 无压缩：不会对图片进行任何压缩处理，能够精准的呈现原图片，例如：BMP。开发中我们考虑到加载性能问题，几乎不会考虑这种图片
GIF图
优点
- Gif图采用
LZW压缩算法进行编码，采用无损压缩，这意味着图片在压缩后质量不会受损。 - Gif图1987年提出的，距今发展了几十年了，
兼容性好。 支持透明度，GIF允许图像中的像素具有不透明和透明属性，这使得它在创建带有透明背景的图像时非常有用。支持动画，GIF支持简单的动画，可以用来创建循环播放的短动画，这在网页设计和用户界面方面非常有用。
缺点
- 只能存储8位颜色索引，
色彩复杂、细节丰富的图片不适合。
使用场景
- 适合简单的动画或者图标，例如：Logo、Icon、动图。
- 上报埋点时采用1 * 1像素的透明Gif图。
避免跨域，用图片上报而不是采用fetch或ajax去上报，用Image的src不会存在跨域行为并且也会触发请求兼容性好，所有浏览器都支持Image对象，即便浏览器不支持XMLHttpRequest(例如古董级的IE)，也能进行上报。相比与navigator.sendBeacon兼容性更好。体积最小，1*1的透明PNG是67字节，而Gif只需要43个字节。同样的性能比PNG图片减少35%的流量。支持透明，用Gif上报埋点最好是透明的，一是避免影响页面展示，而是可以不用存储颜色索引，减少图片大小。避免请求取消，ajax请求过程中离开页面会导致请求中断，最终导致上报失败。然而Image的src不会中断。
PNG图
PNG默认是PNG-24格式
png-8
- png-8相比gif对透明的支持更好，同等质量下，尺寸也更小。
- 非常适合作为gif的替代品。但png-8也一个明显的不足就是不支持动画。
- 这也是png-8没办法完全替代gif的重要原因。如果没有动画需求推荐使用png-8来替代gif。
png-24、png-32
- 图片质量和bmp差不多，在尺寸是比bmp更小。
- 尺寸上比JPG、GIF更大，当然质量更高。
优点：
支持透明度：PNG支持透明通道，允许创建带有透明背景的图像。无损压缩：可以保持图片质量不损失细节。广泛支持：PNG是一种通用格式，计算机或移动设备都支持。
缺点
- 复杂、色彩丰富图片尺寸大
- 不支持动画
适合场景
- 适合图形设计，可以保存文本、线条图案等高质量、透明图像。
- 相机设备，适合后期对图片进行处理。
JPG图
优点
有损压缩:JPG格式具备出色的压缩性能，可以显著的减少图像文件的大小。这使得它在Web上显示一些质量要求不高的图像非常有用，减少加载时间广泛支持：是一种通用格式，在计算机以及手机设备上都广泛支持。色彩丰富：JPG支持24位颜色深度，因此可以显示百万种颜色。可调质量：用户可根据使用场景来调图片质量，较高的图片质量，会导致图片尺寸较大。
缺点
不支持透明：不能够创建带有透明背景的图像，PNG或GIF更适合这种情况。损失性压缩：JPG是有损压缩，而且一旦压缩无法还原，会丢失一些细节。不适合带有文本或线条的图片： JPG压缩在处理文本和线条方面不如其他格式好，可能会导致图像出现锯齿或模糊情况。不适合Icon或者Logo：相对于PNG或GIF图，在尺寸上没有优势
WEBP图
兼容性
关于兼容性查询，想必大家或多或少都看过，这里我就不像他们那样放图浪费资源了。
想要查询图片的兼容性问题，直接访问： Caniuse.com，或者直接点击：“webp” | Can I use… Support tables for HTML5, CSS3, etc。
总之，IE11依然不支持Webp，需要额外引入一些JS工具来进行解决，如果你的项目需要兼容IE11，那么就要注意这个问题了。
使用场景
- 当Web要求图片加载速度和图片显示质量时，可以适当的降低下图片质量减少图片尺寸来满足场景。
- 是用于要求
色彩丰富的场景。
介绍
WebP（Web Picture）是一种现代的图像格式，由Google开发，旨在提供高质量的图像压缩和更快的加载速度。WebP支持有损和无损压缩，以及透明度，是一种灵活的图像格式，适用于Web和移动应用程序。
对于前端来说，该图片格式常用于一种优化网页加载速度的手段之一。
优点
高压缩率：WebP 图像通常具有更小的文件大小，相对于传统格式如JPEG和PNG，可以减少带宽使用和加速页面加载速度高质量：即使在较高的压缩率下，WebP 图像通常能够保持较高的图像质量，减少了压缩损失。透明度：WebP支持透明通道，可以用于创建带有透明背景的图像，类似于PNG格式。动画：WebP还支持动画图像，允许创建小型、高质量的动画。广泛支持：大多数浏览器都已经支持，但是目前低版本的Safri以及IE还不支持。
缺点
兼容性：考虑到目前还不能完全放弃IE以及旧版本Safri，所以还不能完全切到该图片格式。
使用场景
- WebP 格式适用于网页开发，特别是那些需要快速加载的网站和移动应用程序。
- 它适合用于图像库、图标、按钮、背景图像、动画以及需要高质量和小文件大小的图像。
- WebP 的无损压缩特性使它适用于医学图像、卫星图像、地图和其他需要高质量和完整性的图像应用。
开发兼容
考虑到Webp格式还存在兼容性问题，开发中如何应用Webp图片格式？
- 如果图片资源存储在服务端，可以设计一套通用方案，在服务端根据Accept请求头判断是否支持Webp格式，如果支持返回Webp格式，否则返回PNG格式。
- 如果你无法说服后端去实现上述方案还想采用Webp图片优化页面加载，可以考虑维护两个格式的图片，然后使用picture标签去实现
1 | <picture> |
结语
整理图片格式这个面试题相对来说我倒不是那么抗拒，这个问题虽然基础但是在开发中，如果专注性能优化的朋友可能会很熟悉。
早年我在优化小程序的时候，曾经在处理图片问题上废了不少功夫，那时候对图片相关的知识了解了很多，但是不成体系。
如今花了些时间整理了一下，心理倒也颇为感慨。
只是时间不够，不然我大概率还会整理一下矢量图和像素图的区别，还有一些性能优化的点。
后续在整理性能优化的相关文章的时候，我会着重整理相关内容。