乐趣区

关于前端:图片优化如何让网站减重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';

您能够随便更改 PNGImagesJPEGImages 和输入的值,以匹配您的我的项目构造。

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

用 MozJPEG 压缩 jpeg

为了压缩 JPEG 图像,我应用了MozillaMozJPEG 工具,它能够通过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 图像的浏览器提供服务

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

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的反对并不好,因而它目前不能齐全代替 JPEGPNG

然而,依据 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 的浏览器提供等价的(优化的) JPEGPNG 回退。

<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 上应用的过程并不那么简单,并且能够通过缩小页面加载工夫来为客户带来更好的用户体验。

退出移动版