图像：最简单的网页速度取胜方式

2022-10-19 09:50:40

对于排名和用户体验页面速度很重要，但是专栏作家克里斯汀·沙金格（Kristine Schachinger）指出，许多公司在这一领域缺少改进的机会：图像优化。

过去几年中，页面速度在网站流量和排名方面变得非常重要。人们想使用速度快的网站 - 不仅用户这么想，Google也一样。 Google搜索引擎排名中速度快的网站比慢的更好，其他都相同。

现在，一些与页面速度有关的领域需要技术开发人员，由他们更改堆栈的加载方式和优化服务器性能。但是，不是所有的页面加载问题都是复杂的或需要很多技术知识。在这种情况下，我们所强调的就是图像重量了。对于网页载入速度较慢的网站来说，图片通常是一个主要问题。

幸运的是，优化图像很容易做成功。

图片和页面加载

每当我们审核速度慢的网站时，图像几乎总是最主要的原因。那些创建网站的人似乎忘记了在上传前调整和压缩图像，而是将其留给了CMS或服务器压缩软件。

今天，我们经常看到有大量图像的页面，也就是兆字节。一个页面不应该大于1兆，更不用说几兆，但这是常见的。事实上，许多网站甚至每页都超过了10 MB。按说网页不应该这么大 - --就算大，也应该对图像进行优化。

只要知道如何正确地调整/压缩/保存图像，并确保这样做能解决大部分页面重量问题就可以了。

那么我们什么时候出错了呢？

大约20年前，我开始网页开发时，网站本不该承受太多沉重的负担，但是仍然希望获得一些流量。页面中包括html，图像，脚本和所有的内容可以在100-250 KB以内完全加载，并且也必须这么做。浏览器和连接的速度很慢。

这与搜索引擎无关，网站不能正常加载巨大的重量。我知道的一个每页1 MB的网站加载就花去了15多分钟。是的，是15分钟。 

现在我们正处于快速连接的时代，网站在监控页面重量方面变得非常松懈，导致每页网站可能达到了25 MB（这是真的）。问题是，在某些方面，这些加载缓慢的页面现在变得更重要了。

今天，我们不仅有像移动设备一样限制性的参数，而且Google中的排名也会受到页面加载缓慢的影响。

互联网初期页面加载非常重要，因此公司曾经将图形用户专门用于图像优化。然而，现在大多数是依靠CMS（内容管理系统）进行图像调整和压缩。这意味着，大多数情况下，图像都是先上传再优化。这就导致图像过大、文件容量过大，从而降低了页面速度 - 如果对整个站点进行推广，可能会使站点定位变低。

为什么不能依靠CMS来调整/压缩图像？

使用CMS调整图像大小时，通常只会更改图像大小，而不是压缩图像，或是用服务器“调整大小”。

如果压缩图像（使用WordPress），速率是预先设定的; 这意味着，即使它做得很好，文件仍然比上传之前放大了15％到30％。如果CMS即时调整图像大小，这意味着它们在投放时被调整了，那么（即使有）压缩的也就很少了。

每页有多个图像的网站，可能是有问题的。

通常情况下，图像平均占页面重量的40％至60％，如果上传之前处理了图像，则可以节省30％至50％的图像重量。

那么，在上传图片之前，您需要做些什么？

为您的网站准备图像调整图像大小

调整图像大小非常重要。如果有一个宽2400像素的图像，并且在网站上所需要的是宽500像素的图像，即使在CMS内调整大小也需要压缩2400像素图像中的所有信息。这使您的图像一开始就更大了。

现在，大多数团队没有专门负责图像调整和压缩的人员。这意味着，尽管我们应该为桌面电脑，平板电脑和移动设备提供多种优化的图像尺寸，但您可能没有资源来执行此操作。

如果是这种情况，那么在网站上最重要的是把图像保存为所需的最大物理尺寸，但不要过大。这意味着如果您需要三个图像，800 x 600像素是所需的最大尺寸，那么请确保在像Photoshop这样合适的程序中将原始图像调整到800 x 600。然后，即使您仍然需要在CMS内部进行调整大小，那么也需要从头开始处理较小的文件大小。

文件类型

首先必须调整图像大小、压缩，然后上传。然而，不仅上传问题之前无法调整大小并进行压缩，就连单纯地选择正确的文件类型都变成了问题。许多处理网站图像的人往往没有图像体验，所以应该使用PNG时，他们却使用JPG，反之亦然。

为什么文件类型这么重要？如果用了错误的文件类型，文件重量就会增加，有时甚至增加很多。应该使用什么样的文件类型呢？

有几种诸如JPG，GIF，PNG和WebP等最常见的文件类型。其中最常用的是JPG和PNG。



那么GIF和WebP呢？

除非设置动态图像，没有人会用GIF，而WebP的高品质，无损压缩算法充满希望，但是现在还不是很受欢迎，并且必须用特殊的编程使它与支持的浏览器（如Opera和Chrome）之外的浏览器配合使用。

这并不意味着不能用，但是如果不创建不支持浏览器的解决方法，那就没办法用。大多数情况下，遵守JPG和PNG的标准格式更容易。只要我们完善了支持，WebP就很可能成为标准。它以更高的质量更低的文件重量保存图像。

提示：如果想使用WebP，Google将提供图像转换器。

选择正确的文件类型

图像程序中，人们常常用默认值的方式选择文件类型。但是，选择了错误的文件类型可能会导致您的图像大于需要的图像。

如上面的表格所示，有很多因素会影响你选择JPG或者PNG，但最简单的方法就是问问自己：你是以欣赏艺术品或标志一样看照片或其他的东西吗？任何时候保存照片，都要使用JPG; 对于其他（标志，线条艺术品，作品等），可以用PNG。

我们使用错误的格式时，可以增加重量和尺寸。此外，使用有损压缩模型（数据丢失），线条艺术可能不清晰，就像使用JPG一样。

JPGs vs. PNGs

JPG使用所谓的“有损”压缩。这意味着进行文件压缩时，某些数据会永久丢失。通常肉眼不会轻易察觉到丢失的数据，所以得到的是一个更小的有损文件。 

当然，这有赖于JPG的保存质量。质量越低，丢失的数据就越多。如果保存的质量太低，图像就可以开始“重影”，这意味着假象会出现在最终的图像中。如果想避免这个问题，就不要使图像保存的质量率低于50％。现在使用的显卡，50％的速率应该保证质量足够好，让人看起来顺眼，低质量时又能节省大量的文件内存。

提示：保存JPG时使用渐进式设置，加载浏览器时，就像“淡入”文档一样，用户不会遇到页面跳跃等问题，更有可能感知页面时加载速度更快。

PNG使用“无损”压缩。无损意味着保存文件时数据不会丢失。图像重新采样，并且编译数据时可能会用“最近邻”（相似的颜色），但数据不会从文件中删除。

有两种类型的PNG：一种是24位，一种是8位。尝试减少文件大小时，需要8位PNG设置。也可以进一步去除PNG文件中的颜色。

提示：Photoshop中保存PNG时，使用导出>保存为Web（遗留）。可以选择较少的颜色或黑白颜色，这可以将PNG文件减少50％至90％。

为了说明这一点，下面我用同一个文件 - 一个标志，并保存为PSD，PNG 8位和PNG 8位黑白色。用PNG 8位去除颜色时，我们可以看到仅使用所需的颜色，文件就大幅减小了。

原始文件110KB



标准Photoshop导出 - PNG8位 - 13.8KB



Web Legacy Photoshop导出 - PNG8位- 4.56KB



Web Legacy Photoshop导出 - PNG8位(灰度4色) - 1.41KB



所以，可以看到，使用合适的PNG-8降色，我们可以将图像的尺寸减小95％以上。 110 KB图像可以减少到1.41 KB。

看起来这可能不是很多，因为它是一个图像，但是如果页面上有10个赞助商徽标，则可能在该页面上节省40kb到100kb的空间。

正如我们在这里看到的，可以在上传前简单地执行调整大小和压缩保存来节省大量的页面权重。

为什么不提SVG？

SVG是一种将图像编码到页面中的技术。 SVG的问题在于，它需要专业的人创建和实现，它创建了巨大的代码块，不能很好地处理复杂的图像元素，并且在旧浏览器上可能很难兼容。

但是，如果这些参数中没有一个是您的问题，则可以非常好的解决图像，例如显示在所有页面和所有设备类型上的网站标识，或创建简单的图表。 请注意，创建数千行代码显示图像不一定能节省页面重量。

如果你在使用SVG，这里有一些建议：

培养一些工作人员或签订一些合同能正确地创建/实现他们。

确保SVG图像比保存的图像更轻（可以更大）。

确保正确实现标签，以便在需要时获得常规图像中“alt”的标签。 

例如，调用SVG文件并在代码中使用alt标签：

<img src=”logo.svg” alt=”Website Logo” />

如果社交共享对于您的图像很重要，那么就需要提供一个传统的图像文件进行社交分享。

如果大量或大部分用户在使用旧浏览器，请不要使用SVG。这些都不能很好的兼容SVG。

提示：创建SVG图像好用的工具是Inkscape。 

一些真实的例子

我们可以看到使用WebPageTest.org时，图像尺寸是如何影响大品牌的。（注1000 ms = 1秒）

对于这个测试，我选择了以下站点。一个品牌成名后唯一的要求就是一个重图像的主页：

塔吉特

异视异色

赫芬顿邮报

全球之声

视觉进步的时间

在这里我们可以看到文档在视觉上完成所需的时间。令人惊讶的是，在这里，HuffingtonPost很快就加载了大约2秒钟，而Mashable则需要18.2秒的时间。



以下是根据类型细分的主页每个网站的请求数量。我们发现请求数量最多的网站都是由图像带来的。



以下是每个站点正在下载的每页的字节数。 有趣的是，尽管拥有最大的图像重量，Huffington Post的载入速度也要快得多。 这可能是他们在图像上使用的一个很好的懒惰负载的技术，不需要Google索引的图像。 （谷歌已经表示，他们通常会忽略懒惰的项目 - 所以，如果你使用这种技术，你必须非常小心，如果这对您的网站很重要，仍然可以获得图像索引。）


我们还可以看到，Mashable没有用最小化页面加载的脚本技术，如果一个页面上有2.5 MB的图像和另外2.5 MB的“其他”图像，适当优化之后该页面的重量比优化之前的页面大约重30％到50％ 。

很显然，这是一个真实的问题。 然而这仅仅是一个简单的解决方案。

上传之前，要确保服务器和站点能提供合适的压缩，并且把图像进行优化。 这样做将会大大提高页面和下载速度。

SEO，手机优先和图像重量  

Google表示今年晚些时候，将转移到手机首次索引，这也就是说他们会根据移动网站确定网站定位。但是，目前我们不知道他们如何评估桌面用户和页面速度。此外，网站速度慢仍然给用户带来了一些问题，因此加快速度只能解决网站粘性、降低跳出率方面的问题。

记住，对于用户来说，页面速度非常重要，而在移动设备上更是意义重大。如果不能竭尽全力优化网页获得最快的下载速度，那么你的业务只会昙花一现，并且丢失用户丢掉排名。

进行图像优化修复是比较容易。过去三年，我审核的网站中，几乎每一个都有图片问题。那你的呢？如果可以节省20％至40％的网页加载时间，那这样做是不是值得呢？