如何优化网站加载速度：合理选择 PNG

在面试时候，经常被问到，优化网站加载速度的方法。

很多人都能回答一些 ——

• 压缩 JS/CSS
• 使用 CDN
• 使用雪碧图
• 图片采用懒加载
• 对图片进行压缩
• ...

毫无疑问，这些都是正确答案。

但同时我也发现，很少人会留意图片的格式会对图片的体积有相关性。

而选用正确的图片格式，在丰富网站内容的同时，也能避免对网页的加载速度造成负面影响。

下面简单介绍几种通用格式的特性。

JPG/JPEG

JPEG 是一种有损的压缩格式，支持多达 1600 万种不同颜色。

它特性是在压缩过程中丢失的细节，人眼难以发现。

这样使得保存的图片，在保持图片质量的同时，它的体积也不会太大。所以适合摄影照片、banner图等颜色过度平滑的场景。

PNG

PNG 是一种无损的压缩格式，有三种不同的形式，分别是：

• 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 的基础上，添加了透明度。

SVG

SVG 属于矢量图片格式，和其他几种不同的是，它是从数学上描述图形的属性，而不是通过像素点。

所以，它保存的图形在任何分辨率下，都保持清晰度。但是，也由于它是矢量的，所以不能保存照片等图像。

对于图标等单调的图形，则是非常适合。另外，由于它还能被 JavaScript 操作，所以也能制作动态图标或者有交互的动画。

比较有名的操作 SVG 类库有 svg.js。

小结

通过简单介绍，显而易见：

颜色连续且丰富，不含透明度，对体积有一定要求，使用 JPEG。

颜色连续且丰富，不含透明度，要求图片质量高，对体积无要求，使用 PNG-24。

颜色连续且丰富，含透明度，使用 PNG-32。

颜色单调，图片对比度明显，含透明度，使用 PNG-8。

简单图标，logo等，使用 SVG。