图片优化如何让网站减重60%

文章做者：Ayo

原文连接：https://freshman.tech/image-optimisation/

图片是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 上使用的过程并不那么复杂，而且能够经过减小页面加载时间来为客户带来更好的用户体验。