图片该如何优化来提高网站的性能

结构。

此外要执行图片压缩，还需要根据要压缩的图像类型安装对应的插件。

JPEG/JPG

JPG 的优点

JPG 较大的特点是 有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。另一方面，即使被称为“有损”压缩，JPG的压缩方式仍然是一种高质量的压缩方式：当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质。此外，JPG 格式以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求，这一点决定了它压缩前后的质量损耗并不容易被我们人类的肉眼所察觉——前提是你用对了业务场景。

JPG 使用场景

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

JPG 的缺陷

有损压缩在上文所展示的轮播图上确实很难露出马脚，但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。

此外，JPEG 图像不支持透明度处理，透明图片需要召唤 PNG 来呈现。

使用 MozJPEG 压缩 jpeg

这里使用 Mozilla 的 MozJPEG 工具，该工具可以通过 imagemin-mozjpeg 作为 Imagemin 插件使用。你可以通过运行以下命令来安装它:




 

使用 Sindre Sorhus 提供的这个命令行工具来检查JPEG图像是否是渐进式的。

Addy Osmani 已经很好地总结了使用渐进式 jpeg 的优缺点。对我来说，我觉得利大于弊，所以我坚持使用默认设置。

如果你更喜欢使用原始的jpeg，可以在 options 对象中将 progressive 设置为 false。另外，请确保 imagemin-mozjpeg 版本的变化，请重新查看对应文档。

PNG (PNG-8 与 PNG-24)

PNG 的优缺点

PNG(可移植网络图形格式)是一种无损压缩的高保真的图片格式。8 和 24，这里都是二进制数的位数。按照我们前置知识里提到的对应关系，8 位的 PNG 最多支持 256 种颜色，而 24 位的可以呈现约 1600 万种颜色。

PNG 图片具有比 JPG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。它弥补了上文我们提到的 JPG 的局限性，唯一的缺点就

（编辑：四平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!