首页 » WP教程 » 主题插件 » WordPress网站图像优化终极指南：有损和无损压缩

WordPress网站图像优化终极指南：有损和无损压缩

2018/08/14

根据HTTP Archive的数据，截至2018年，图像占桌面和移动设备平均网站页面权重的50％以上。那太大了！？在新的移动优先索引和性能方面，图像优化在您的WordPress网站加载速度方面起着至关重要的作用。图像压缩是您可以实施的最简单的优化之一，反过来也会产生最大的影响。从本质上讲，这需要通过使用两种流行的压缩形式来减小图像的文件大小：有损和无损。

本文将通过图像的有损和无损压缩的深入比较，极可能为您的WordPress网站图像优化提供指南。

本文涉及的内容包括：

有损压缩
在线压缩
无损压缩
哪种压缩方法更好？

有损压缩

第一种形式的压缩是有损的。有损压缩涉及消除图像中的某些数据。因此，这意味着您可能会看到降级（质量下降或某些内容被像素化）。最直观的理解就是图像变得比原来模糊了。所以这要小心处理降级的数量。不过这有个好处，就是图像大小减少很多，当然速度也提升了。

JPEG和GIF都是有损图像格式。
JPEG非常适合需要快速加载网页的网站，因为您可以调整质量级别以实现质量和文件大小的良好平衡。

我们可以通过四种方式进行有损压缩：WordPress自动压缩，插件压缩，图像处理软件压缩和在线压缩

WordPress自动压缩图像

您是否知道WordPress在将JPEG上传到媒体库时会自动压缩您的JPEG？默认情况下，WordPress会自动压缩图像，最高可达原始大小的90％。但是，从WordPress 4.5开始，他们将此增加到82％，以进一步提高整体性能。如果你想知道为什么你的图像在新的WordPress安装上看起来有点像素化，这就是原因。

虽然自动压缩效果很好，但我们通常会看到，82％对于真正影响您网站的性能并不大。因此，如果需要，可以通过向主题functions.php文件添加以下过滤器来禁用此选项。

add_filter( ‘jpeg_quality’, create_function( ”, ‘return 100;’ ) );

当然如果想要使用图像质量的70%，只需要添加下面的过滤器：

add_filter( ‘jpeg_quality’, create_function( ”, ‘return 70;’ ) );

注意：这不会对已上传的图像起作用，如果要影响已上传的图像，请使用Regenerate Thumbnails这个插件重生成图像。

使用Wordpress插件进行压缩

如果担心在函数文件里使用过滤器会出错，我们还可以通过一些优秀的图像优化WordPress插件来应用有损压缩，下面是我们经常用到的Wordpress图像优化插件：

Imagify （有损和无损）
WP Smush （有损和无损）
EWWW Cloud （有损和无损）
ShortPixel （有损和无损）

这些列出的几个插件都是使用它们自己的第三方服务器来压缩图像。这里可能会在压缩时，存在速度卡顿问题（如果网络不畅通的话。），但是对我们自己的服务器没有负荷的。

下面我们介绍一下Imagify，这是和大名鼎鼎的wp rocket插件同一个公司出品的。

Imagify有三种不同的优化级别：

NORMAL：此模式使用无损压缩，这意味着您的图像不会丢失任何质量，但它们的大小也不会减少。
AGGRESSIVE： 此模式使用有损压缩，可大幅减少图像尺寸，同时图像质量略有降低。大多数时候，它甚至都不明显。
UlTRA： 此模式使用有损压缩，并应用所有可用的优化以实现最大图像压缩。这将大大减少图像尺寸，但您很可能会注意到一些图像质量下降。

建议使用AGGRESSIVE 选项。通常可以看到60-70％的节省，具体取决于图像。

您可以在上传时启用自动优化图像或在媒体库中使用批量图像优化器。您也可以备份原始图像。这使您可以在以后将图像实际转换为其他优化级别，甚至还原原始图像。如果您不使用此功能，我们建议您将其关闭以节省磁盘空间。

一般我们在上传图像之前会调整图像大小。但是这个插件却有一个Resize Large images功能，可以防止您上传超大图像。

图像处理软件压缩

您可以使用Adobe Photoshop，Affinity Photo，Affinity Designer或其他图像编辑器等工具调整图像的质量设置（如下所示）。在大多数工具中，这都在“存储为Web格式”或“导出设置”下。

通过这种方式的压缩可以把一个原始1.11M的图像，在不到200k的大小下就有不错的表现。

不同的图像软件，压缩选项可能不尽相同。

在线压缩

现在市场上提供了很多可以在线免费压缩图像的应用。tinypng就是一个著名的图像压缩在线应用。

我们是可以重复压缩的，视具体质量而定。

但请记住，您可能不希望一直将图像缩小，因为从WordPress 4.4开始，它现在支持响应式图像（不按CSS缩小）。WordPress会自动为上传到媒体库的每个图像创建几种尺寸。通过将图像的可用大小包含到srcset属性中，浏览器现在可以选择下载最合适的大小而忽略其他大小。请参阅下面的代码实际示例。