常见图片分类及适用场景

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

无论是作者还是《高性能网站建设指南》的作者，都认为图片的优化优先级高于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 即使是被放到视网膜屏幕上࿰