关于前端:图片优化如何让网站减重60

文章作者：Ayo

原文链接：https://freshman.tech/image-o…

图片是 web 上提供的最根本的内容类型之一。他们说一张图片值一千个字，但如果你不小心的话，它也能够值几兆大小。

因而，只管 Web 图像须要清晰明快，但也必须以可治理的大小进行展现，以使加载工夫放弃较小，数据使用率放弃在可承受的程度。

在我的网站上，我留神到我的主页页面分量超过 1.1 MB，图片占了其中的 88%。我也意识到我所提供的图片比它们须要的尺寸要大(就分辨率而言)。显然，还有很大的优化空间。

我浏览了 Addy Osmani 杰出的 Essential Image Optimization 电子书之后，在我的网站上施行了他的倡议。而后，我对响应图像进行了一些钻研，并将其利用在了我的网站。

这使得页面分量缩小到 445 KB。页面分量缩小 62%

这篇文章是对于形容我采取的步骤，使我的主页页面分量达到更易于治理的程度。

什么是图像压缩？

压缩图像就是要减小文件体积，同时放弃可承受的视觉品质程度。为了压缩我网站上的图像，imagemin 是我抉择的工具。

要应用 imagemin，请确保装置了 Node.js，而后关上一个终端窗口，cd 到您的我的项目文件夹中，并运行以下命令

npm install imagemin

而后新建文件imagmin .js，并粘贴以下内容

const imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
const output = 'build/images';

您能够随便更改 PNGImages、JPEGImages 和输入的值，以匹配您的我的项目构造。

要执行任何压缩，都须要依据要压缩的图像类型引入几个插件。

用 MozJPEG 压缩 jpeg

为了压缩 JPEG 图像，我应用了Mozilla 的 MozJPEG 工具，它能够通过imagemin- MozJPEG 作为imagemin 插件应用，您能够通过运行以下命令装置它

npm install imagemin-mozjpeg

而后将以下内容增加到 imagmin .js 文件中

const imageminMozjpeg = require('imagemin-mozjpeg');

const optimiseJPEGImages = () =>
  imagemin([JPEGImages], output, {
    plugins: [
      imageminMozjpeg({quality: 70,}),
    ]
  });

optimiseJPEGImages()
  .catch(error => console.log(error));

您能够通过在终端中运行 node imagemin.js来运行脚本。这将解决所有 JPEG 图像，并将优化的版本搁置在 build / images 文件夹中。

我发现，在大多数状况下，将品质设置为 70 能够产生足够好的图像，但成果可能会有所不同。你能够依据本人的理论状况进行试验。

MozJPEG 默认状况下会生成逐行JPEG，这会导致图像从低分辨率逐步加载到高分辨率，直到图片齐全加载为止。因为它们的编码方式，它们也往往比基线 JPEG 略小。

您能够应用 Sindre Sorhus 的这个丑陋的命令行工具来查看 JPEG 图像是否是渐进式的。

Addy Osmani 曾经具体阐明了应用渐进 jpeg 的优缺点。对我来说，我感觉利大于弊，所以我保持应用默认设置。

如果您更喜爱应用基线 JPEG，则能够在 options 对象中将 progressive 设置为false。另外，请确保拜访 imagemin-mozjpeg 页面，以查看其余可用的设置。

用 pngquant 优化 PNG 图像

pngquant 是我优化 PNG 图像的首选工具。您能够通过 imagemin-pngquant 应用它

npm install imagemin-pngquant

增加以下内容到 imagemin.js 中：

const imageminPngquant = require('imagemin-pngquant');

const optimisePNGImages = () =>
  imagemin([PNGImages], output, {
    plugins: [imageminPngquant({ quality: '65-80'})
    ],
  });

optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .catch(error => console.log(error));

我发现 quality 参数为 65-80，能够在文件大小和图像品质之间获得良好的均衡。

通过这些设置，我能够失去一个从 913 KB 到 187kb 的网站截图，并且没有任何显著的视觉品质损失。79% 的降幅！

上面是同一个文件。看一看，本人判断

• Original Image (913 KB)
• Optimised Image (187 KB)

为反对 WebP 图像的浏览器提供服务

WebP 是 Google 推出的一种绝对较新的格局，旨在通过以无损和有损格局对图像进行编码来提供较小的文件大小，使其成为 JPEG 和 PNG 的现实替代品。

WebP 图像能够与 JPEG 和 PNG 的视觉品质媲美，但能够大大减小文件大小。例如，当我从上方将屏幕截图转换为 WebP 时，我失去了一个 88 KB 的文件，其品质与原始图像的 913 KB 相当。缩小 90%！

看以下所有三个图像。你能说出区别吗？

• Original PNG image (913 KB)
• Optimised PNG image (187 KB)
• WebP image (88 KB, can be viewed in Chrome or Opera)

就集体而言，我认为视觉品质是可比的，而且您所节俭的老本也难以漠视。

既然咱们曾经确定了尽可能应用 WebP 格局的价值，则须要留神的是，因为大部分浏览器对 WebP的反对并不好，因而它目前不能齐全代替 JPEG 和 PNG。

然而，依据 caniuse.com 的数据，寰球有 70%以上的用户应用反对 WebP 的浏览器。这意味着，通过提供 WebP 图像，您能够使大概 70%的客户的网页浏览速度更快。

让咱们看看在网络上投放 WebP 图像的具体步骤。

将您的 JPEG 和 PNG 转换为 WebP

应用 imagemin-webp 插件，将 JPEG 和 PNG 图像转换为 WebP 非常容易。

在终端中运行以下命令来装置它

npm install imagemin-webp

在 imagemin.js 中增加一下内容：

const imageminWebp = require('imagemin-webp');

const convertPNGToWebp = () =>
  imagemin([PNGImages], output, {
    use: [
      imageminWebp({quality: 85,}),
    ]
  });

const convertJPGToWebp = () =>
  imagemin([JPGImages], output, {
    use: [
      imageminWebp({quality: 75,}),
    ]
  });

optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(error => console.log(error));

我发现，将 quality 参数设置为 85 时，产生的 WebP 图像，在品质上与 PNG 图像类似，但会大大放大。对于 jpeg，我发现将 quality 参数设置为 75 时，能够让我在视觉品质和文件大小之间找到一个很好的均衡。

诚实说，我仍在尝试这些值，因而请勿将其作为倡议。并确保您查看 imagemin-webp 页面以查看其余可用选项。

在 HTML 中应用 WebP 图像

一旦你有了 WebP 图像，你能够应用上面的标记将它们提供给那些能够应用它们的浏览器，同时为那些不反对 WebP 的浏览器提供等价的(优化的) JPEG 或 PNG 回退。

<picture>
    <source srcset="sample_image.webp" type="image/webp">
    <source srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</picture>

应用此标记，反对 webp 媒体类型的浏览器将下载 WebP 进行转换并显示它，而其余浏览器将改为下载 JPEG 变体。

任何不了解 <picture> 的浏览器都会跳过所有<source>，并加载底部 img 标记的 src 属性中定义的内容。因而，咱们为所有类型的浏览器提供了反对，从而逐渐加强了咱们的页面。

请留神，在所有状况下，img 标签都是页面上理论出现的内容，因而它的确是语法的必须局部。如果省略 img 标签，则不会渲染任何图像。

<picture> 标签和其中定义的所有源均位于此处，以便浏览器能够抉择要应用的图像变体。抉择起源图片后，其网址就会馈送到 img 标签，这就是显示的内容。

这意味着您无需设置 <picture> 或 <source> 标签的款式，因为它们不是由浏览器出现的。因而，您能够像以前一样仅对 img 标签进行款式设置。

总结

如您所见，优化图像以在 Web 上应用的过程并不那么简单，并且能够通过缩小页面加载工夫来为客户带来更好的用户体验。