常见的图片格式及其使用场景

JPG/JPEG 有损压缩格式

• 兼容性强

• 色彩丰富

• 压缩率高，图片小

• 不支持透明

使用场景：色彩丰富的图片/渐变图像

GIF 无损压缩格式

• 高兼容性

• 支持动画

• 灰度表现佳

• 支持渐进

• 最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感

• 支持透明，但不支持半透明，边缘有杂边

使用场景：色彩简单的 logo、icon、动图

PNG

• 兼容性强

• 像素丰富

• 支持透明

• 支持交错

• 压缩时几乎不失真

• 文件较大

使用场景：logo/icon/透明图

BASE64

• 不需要额外的 HTTP 请求

• 适用于极小或简单图片

• 没有跨域问题，无需考虑缓存、文件头或者 cookies 问题

• 相对于其他图片格式，要大至少 1/3

• 不适用于中等以上图片

SVG 矢量图

• 放大缩小不失真

• 支持动画

• 体积小

• html,js,css 都可以对其操作，更灵活，与 DOM 无缝衔接

• 渲染时间较长，尤其是在它较复杂时

• 不适用于游戏等高互动动画

webP

• 体积更小

• 压缩后质量无明显变化

• 支持无损图像

• 支持动画

• 相对 jpg,png,gif 兼容性相对较差

使用场景：支持 webp 格式的 app 和 webview

ICO

使用场合：微软桌面图标、网站图标

关于图片类型、压缩

• 光栅图： 是基于 pixel 像素构成的图像。JPEG、PNG，webp 等都属于此类
• 矢量图： 使用点，线和多边形等几何形状来构图，具有高分辨率和缩放功能. SVG 就是一种矢量图。
• 无压缩： 无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP 格式就是其中之一。
• 无损压缩： 压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png 是其中的代表。
• 有损压缩： 压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是 jpg。