网站图片优化

[xwchris]

图片在网站中会占用很大一部分流量，如何优化图片一直以来是一个有趣且必要的话题。

图像选择

图片分为矢量图形和光栅图形，矢量图形和像素与分辨率无关，所以在合适的条件下首选矢量图片。

如果图片较为简单，且包含几何图形，使用矢量图形是一种很好的方案。如果图片较为复杂，使用图片图形可能会用到很多几何图形，文件大小暴增，但表现质量可能还不如光栅图形。这个时候选择光栅推行比矢量图形更好。

光栅图形有很多种类，普遍支持的有GIF、PNG、JPEG。一些较新的格式（例如Webp和JPEG PR），他们的总体压缩率更高，提供的功能也更多。

如果需要动画GIF是唯一的选择，GIF的调色板最多为256色。对于调色板较小的图片，PNG-8的压缩效果更佳。除了选择调色板大小，PNG不采用任何有损压缩算法，因此它能生成最高质量的图片，但是代价是比其他格式尺寸大很多。JPEG组合使用有损和无损优化来减少图片的大小。

图像压缩

矢量图形压缩

对于矢量图形svg来说，里面有时候会包含很多元数据，包括图层信息，舒适和命名空间等，在浏览器中渲染，我们通常不需要这些参数。因此可以使用svgo工具对svg图片进行压缩。

光栅图形压缩

光栅图形是由一个个像素组成的，每个像素由RGBA四种通道组成，而每个通道都由8位来表示，所以单个像素（css）的大小为4字节，一个100X100的图片的大小为100 * 100 * 4 / 1024 = 39KB。如果图片像素更多，那么我们的文件大小会迅速暴增。

压缩的手段有很多：

• 删除图像多余的元数据如地理信息和相机信息
• 减少每个通道位数（位深）即减少调色板大小。
• 增量编码即只记录相邻像素的差异部分

任何类型的图像都可以通过有损和无损压缩来减少他们的大小，实际上这些类型之间的差异就在于压缩使用的有损和无损压缩的算法不同。使用有损压缩，去除某些像素数据。使用无损压缩，压缩像素数据。

图像优化总结

总的来说，图像的优化有以下几个步骤：

1. 选择合适的图像格式
2. 选择合适的图片尺寸（让图片更接近自然尺寸）
3. 对图像进行合理压缩
4. 自动化处理以上这些

图片优化工具

sharp

node端使用，用来减少图片分辨率和压缩图片。github地址

svgo

node端使用，用来优化svg图形。github地址

图片在手机上的表现

通常，我们在手机上用图片的时候需要用到2倍图，甚至3倍图，否则图片会变的很模糊这是为什么那。

为了解答以上问题先来说说什么是DPR。DPR即Device Pixel Radio它通过DPR = 设备实际像素 / 设备无关像素来得出，通常DPR的值就是我们要使用的图片的倍数。设备实际像素指的是设备实际的物理像素。以iphone6为例，它的分辨率即实际的物理像素为750X1334。我们平时开始所用的iphone6的尺寸375X667指的是它的css像素大小，css像素又被称为设备无关像素。所以我们公式就改为DPR = 分辨率 / CSS像素

为了让图片清晰，我们需要让图片的每一像素都能对应一个实际的物理像素。如果我们使用375X667的图片，那么图片被拉伸到750X1334会导致每个图片像素对应了四个物理像素，对于物理像素无法确认颜色就会取周围的值来填充，造成图片看起来很模糊。因此为了让每个像素都能对应一个实际的物理像素，我们需要多倍图。

这就是为什么在移动端上通常使用2倍，3倍图的原因。

参考文章

Google develop
图像优化