JPG/JPEGJPEG是一种有损的压缩格式，支持多达1600万种不同颜色。PNGPNG是一种无损的压缩格式，有三种不同的形式，分别是：PNG-8PNG-24PNG-32PNG-8：PNG-8只支持256种颜色和支持透明度。选用PNG-8是一个很好的选择。但是，现在图标格式逐渐被SVG取代。所以，如果对图像质量要求非常高，同时不在意图片大小的前提下，可以选用PNG来保存颜色丰富的图片。比较有名的操作SVG类库有svg.js。颜色连续且丰富，不含透明度，要求图片质量高，对体积无要求，使用PNG-24。
在面试时候，经常被问到，优化网站加载速度的方法。
很多人都能回答一些 ——
- 压缩 JS/CSS
- 使用 CDN
- 使用雪碧图
- 图片采用懒加载
- 对图片进行压缩
- ...
毫无疑问，这些都是正确答案。
但同时我也发现，很少人会留意图片的格式会对图片的体积有相关性。
而选用正确的图片格式，在丰富网站内容的同时，也能避免对网页的加载速度造成负面影响。
下面简单介绍几种通用格式的特性。
JPG/JPEGJPEG 是一种有损的压缩格式，支持多达 1600 万种不同颜色。
它特性是在压缩过程中丢失的细节，人眼难以发现。
这样使得保存的图片，在保持图片质量的同时，它的体积也不会太大。所以适合摄影照片、banner图等颜色过度平滑的场景。
PNGPNG 是一种无损的压缩格式，有三种不同的形式，分别是：
- PNG-8
- PNG-24
- PNG-32
PNG-8：
PNG-8 只支持 256 种颜色和支持透明度。所以，如果颜色比较单调，具有高对比度、大色块。选用 PNG-8 是一个很好的选择。
例如，以前会使用 PNG-8 作为保存图标的格式，还可以合成雪碧图。但是，现在图标格式逐渐被 SVG 取代。
PNG-24：
PNG-24 则可以支持多达 1600 万种不同颜色，不支持透明。而它保存出来图片的精细度，要比 JPEG 高，但是它的体积也比 JPEG 要大。
所以，如果对图像质量要求非常高，同时不在意图片大小的前提下，可以选用 PNG 来保存颜色丰富的图片。例如一些海报制作等。
PNG-32：
PNG-32 则在 PNG-24 的基础上，添加了透明度。
SVGSVG 属于矢量图片格式，和其他几种不同的是，它是从数学上描述图形的属性，而不是通过像素点。
所以，它保存的图形在任何分辨率下，都保持清晰度。但是，也由于它是矢量的，所以不能保存照片等图像。
对于图标等单调的图形，则是非常适合。另外，由于它还能被 JavaScript 操作，所以也能制作动态图标或者有交互的动画。
比较有名的操作 SVG 类库有 svg.js。
小结通过简单介绍，显而易见：
颜色连续且丰富，不含透明度，对体积有一定要求，使用 JPEG。
颜色连续且丰富，不含透明度，要求图片质量高，对体积无要求，使用 PNG-24。
颜色连续且丰富，含透明度，使用 PNG-32。
颜色单调，图片对比度明显，含透明度，使用 PNG-8。
简单图标，logo等，使用 SVG。
