聊一下前端常见的图片格式

1. JPEG (JPG)

• 概述 ：是一种有损压缩的图像格式，它通过去除图像中一些人类视觉不易察觉的细节来减小文件大小。它支持数百万种颜色，能够很好地呈现照片等色彩丰富的图像内容。

• 优点：

  • 压缩率高：可以在保持相对较好的图像质量的情况下，使文件大小大幅减小，便于存储和网络传输。
  • 广泛支持：几乎所有浏览器和设备都能显示JPEG格式图像。

• 缺点：

  • 有损压缩：压缩过程中会丢失一些图像质量，特别是在压缩率高时，细节会丢失。
  • 不支持透明度：不能处理透明背景。

• 使用场景：

  • 适用于网页中的图片展示，像新闻网站、电商网站上的产品图片等，在保证视觉效果的同时，能够加快网页加载速度。例如淘宝的这些：

2. PNG

• 概述 ：PNG是一种无损压缩图像格式，支持透明度，特别适合用来存储需要透明背景的图像或图标。

• 优点：

  • 无损压缩：不会丢失任何图像质量。
  • 支持透明度：可以有透明背景，适合做图标、徽标等。

• 缺点：

  • 文件较大：相比JPEG，文件通常更大，尤其是在图像内容复杂时。
  • 不适合照片：由于文件大小问题，较不适合存储照片等复杂图像。

• 使用场景：

  • 图标、按钮、网页元素、图形设计中的透明背景图像。
  • 需要无损压缩的场景，如存储LOGO、截图。例如百度的logo：

我们同样放大500倍，看一下jpg（上）和png（下）的区别，很明显png会更清晰一些。 ​

3. BMP (Bitmap)

• 概述：BMP是一种未压缩的图像格式，每个像素的颜色值由特定的比特表示。通常不进行压缩，图像文件较大。

• 优点：

  • 无压缩：保存原始像素数据，质量最高。
  • 易于编辑：没有压缩损失，便于编辑和处理。

• 缺点：

  • 文件庞大：由于没有压缩，存储的图像文件非常大。
  • 支持度差：相比其他格式，BMP在网络中的使用较少，兼容性差。

• 使用场景：

  • 编辑和存储高质量图像文件，通常在设计、图形处理软件中使用。

• 例子 ：图像处理软件中的中间文件格式，历史遗留图像。例如我们存储三个同样的图片，bmp是最大的。

4. GIF

• 概述：GIF是一种支持动画的图像格式，使用8位颜色深度（256种颜色），支持透明背景，但只能支持单一的透明色。

• 优点：

  • 支持动画：GIF最著名的特性是支持多帧动画。
  • 透明性：支持透明背景（但仅能有单色透明）。

• 缺点：

  • 颜色限制：最多只支持256种颜色，适用于简单的图形。
  • 文件较大：动画GIF可能会产生较大的文件，尤其是帧数较多时。

• 使用场景：

  • 动画、表情包、短小动画，简单的图形或网页小图标。

• 例子 ：社交媒体上的表情包、简短的广告动画。例如jd：

5. WEBP

• 概述：WEBP是一种现代的图片格式，由Google开发，旨在提供比JPEG更高效的压缩，且支持透明度和动画。

• 优点：

  • 高压缩率：相同质量下，WEBP的文件比JPEG和PNG更小。
  • 支持透明度和动画：支持无损和有损压缩，适合动态图像和透明图像。

• 缺点：

  • 浏览器兼容性较差：部分旧版浏览器不支持WEBP。
  • 支持的工具较少：不像JPEG和PNG那样广泛支持，部分设计工具和图片查看器可能不支持。

• 使用场景：

  • 高效的网页图像、背景图、网站上的图片。
  • 图片质量要求高但又想优化加载速度的场景。

• 例子 ：Google Chrome 中的网页图片，支持WebP的现代网站图像。例如掘金的图片格式：

• 这里补充一下：.awebp 是一种与 .webp 格式相关的图像扩展名，通常指的是 WebP 格式的 动画 版本（即 WebP 动画）。与普通的 .webp 文件不同，.awebp 文件包含多帧图像数据，支持图像动画效果，类似于 GIF 格式。

6. Base64

• 概述：Base64并不是一种图像格式，而是一种将图像数据转化为ASCII编码的方式，使其可以嵌入到HTML、CSS或JavaScript中。

• 优点：

  • 减少HTTP请求：将图像嵌入到网页中，减少对外部资源的请求，提升页面加载速度。
  • 适合小文件：对于小文件来说，Base64编码可以减少请求时间。

• 缺点：

  • 文件变大：Base64编码会将图像的大小增加约33%。
  • 处理复杂：对于大型图像，Base64的效果不明显，可能会影响性能。

• 使用场景：

  • 用于小图标、图像和内联样式（如嵌入CSS中的图像）。

• 例子 ：网页内嵌图标或CSS背景图像。base64的格式如下 豆包的logo：

7. SVG

• 概述：SVG是一种基于XML的矢量图像格式，不同于像素图，SVG是由点、线和路径构成，适用于图形和图标。

• 优点：

  • 无失真缩放 ：可以无限缩放，不会丢失任何质量。
  • 小文件体积：对于图标和简单图形来说，文件体积通常非常小。
  • 可编辑性：可以直接编辑SVG文件，且可以通过CSS和JavaScript进行动态修改。

• 缺点：

  • 复杂性高：对于复杂图像（如照片），SVG不适用。
  • 浏览器支持：虽然现代浏览器支持SVG，但一些老旧浏览器可能不完全支持。

• 使用场景：

  • 用于网站图标、图形元素、矢量图和动画。

• 例子 ：Logo图标、Web上的矢量图、互动动画。例如掘金的logo：