常见图片分类及适用场景

图片优化–质量与性能的博弈

无论是作者还是《高性能网站建设指南》的作者，都认为图片的优化优先级高于js和css的优先级，因为这是用户可感知的。

图片压缩我们通常会选择压缩图片的体积来减少网络加载时长，但一般会牺牲一些图片成像效果。

目前主要的图片分类有JPEG/JPG、PNG、WebP、Base64、SVG

JPEG/JPG

关键词：有损压缩、体积小、加载快、不支持透明

JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。

当在处理颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。且JPEG不支持透明图片。

PNG-8 与 PNG-24

关键字：无损压缩、质量高、体积大、支持透明。

PNG是一种无损压缩的高保真的图片格式。跟JPG相比，有更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。唯一的缺点就是体积有点大。

主要使用场景：主要用来处理小logo、背景图等。

SVG

关键字：文本文件、体积小、不失真、兼容性好

SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述

SVG 与 PNG 和 JPG 相比，文件体积更小，可压缩性更强。
当然，作为矢量图，它最显著的优势还是在于图片可无限放大而不失真这一点上。这使得 SVG 即使是被放到视网膜屏幕上，也可以一如既往地展现出较好的成像品质——1 张 SVG 足以适配 n 种分辨率。

此外，SVG 是文本文件。我们既可以像写代码一样定义 SVG，把它写在 HTML 里、成为 DOM 的一部分，也可以把对图形的描述写入以 .svg 为后缀的独立文件（SVG 文件在使用上与普通图片文件无异）。这使得 SVG 文件可以被非常多的工具读取和修改，具有较强的灵活性。

SVG 的局限性主要有两个方面，一方面是它的渲染成本比较高，这点对性能来说是很不利的。另一方面，SVG 存在着其它图片格式所没有的学习成本（它是可编程的）。

Base64

作为雪碧图的补充而存在。雪碧图主要是将很多小图合并到一张透明背景上再结合css定位显示特定部分减少网络请求的一种优化方式。
base64把图片进行编码可以将结果写入到html和css中从而减少网络请求。base64编码之后图片会膨胀至原来的40%。

在我的开发中实际遇到过一个问题就是7M的图片经过压缩后再进行base64存入前端存储localsorage中，经常会出现卡顿等现象。

总结

图片常见格式有JPG/JPEG, PNG-8/PNG-24, SVG,Base64。

JPG/JPEG有损压缩图片，体积小，加载快。不支持透明。适合色彩丰富的图片如轮播图等.

PNG-8与PNG-24无损压缩图片，质量好但体积大。支持透明，一般的logo、背景图都会采用此图片。

svg可缩放矢量图，体积小不失真兼容性好。svg的渲染成本高于前两者

Base64作为雪碧图的补充出现，通过对图片进行base64编码可以直接将编码结果写入html和css，可以减少网络请求。大图不适合用base64 因为编码之后会膨胀。

现在跟后端交互过程中，很多图片都会采用base64编码后传给后端。此时需要注意图片的大小问题。

从场景上区分，如果轮播图我们一般会使用jpg图片，logo和背景图一般会使用png图片，如果是小图标可以采用雪碧图，或svg .base64可以用在小图上减少网络请求。