# Web中的常规图片及其应用场景
目前应用比较广泛 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等，每一种格式的图片既然出现，必定会有其应用场景， 下面一起详细了解一下各个格式图片的故事。
# JPEG/JPG
特点：有损压缩、体积小、加载快、不支持透明 JPG 最大的特点是有损压缩。JPG 格式以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求，这一点决定了它压缩前后的质量损耗并不容易被我们人类的肉眼所察觉——前提是你用对了业务场景。
# 适用场景
JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。
# JPG 的缺陷
1、当使用矢量图片和LOGO等线条感比较强时，人为压缩的图片相当明显。
2、JPEG不支持透明度处理。
# PNG-8与PNG-24
关键字：无损压缩、质量高、体积大、支持透明
# 适用场景
主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。
支持透明的图片
# SVG
关键字：文本文件、体积小、不失真、兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。
SVG 与 PNG 和 JPG 相比，文件体积更小，可压缩性更强。
# 适用场景
可以当做DOM处理，支持编程化
# Base64
关键字：文本文件、依赖编码、小图标解决方案
Base64 是一种用于传输 8Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数。
# 适用场景
- 比较适合图片的实际尺寸很小
- 无法以雪碧图的形式与其他小图结合。
- 图片的更新频率非常低
# WebP
关键字：年轻的全能型选手 WebP 是今天在座各类图片格式中最年轻的一位，它于 2010 年被提出， 是 Google 专为 Web 开发的一种旨在加快图片加载速度的图片格式，它支持有损压缩和无损压缩。
# 优点
与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。 无损 WebP 支持透明度（也称为 alpha 通道），仅需 22％ 的额外字节。对于有损 RGB 压缩可接受的情况，有损 WebP 也支持透明度，与 PNG 相比，通常提供 3 倍的文件大小。
# 缺点
兼容性不好
WebP 还会增加服务器的负担——和编码 JPG 文件相比，编码同样质量的 WebP 文件会占用更多的计算资源。
在安卓或者谷歌类型产品上放心适用
在其他平台上，使用其他的