根据HTTP Archive，截至2018年12月，图像占桌面和移动设备平均网站页面权重的40%以上。那是巨大的！当谈到新的移动优先索引和性能时，图像优化对于WordPress网站的WordPress 4.5开始，他们将这一比例提高到82%，以进一步全面提高性能。如果您想知道为什么您的图像在新安装的WordPress上看起来有点像素化，这就是原因。
虽然自动压缩很棒，但我们通常看到82%远不足以真正影响您网站的性能。因此，如果需要，您可以通过将以下过滤器添加到主题functions.php文件来禁用此选项。请记住，在编辑您的网站之前，请务必先进行支持响应式图像（未通过CSS缩小）。WordPress会自动为上传到媒体库的每个图像创建多种尺寸。通过将图像的可用尺寸包含到srcset属性中，浏览器现在可以选择下载最合适的尺寸并忽略其他尺寸。请参阅下面的代码实际外观示例。
代码中的srcset响应式图像示例
因此，随着如今越来越多的HiDPI显示器，找到一个合适的媒介是件好事。假设是您网站的列或div大小的2倍或3倍，但仍小于原始大小。浏览器将根据设备的分辨率显示正确的。
谷歌推荐有损压缩
您使用文档，现在推荐使用有损压缩作为进一步加快网站速度的一种方式。
Google PageSpeed Insights优化图像警告
如果你想摆脱这些警告，最简单的方法之一就是使用有损压缩来安抚谷歌。
无损压缩
现在是时候深入研究无损压缩的第二种形式了。与有损压缩不同，无损压缩不会降低图像质量。这怎么可能？它通常通过删除不必要的元数据（由捕获图像的设备生成的自动生成的数据）来完成。但是，这种方法的最大缺点是您不会看到文件大小的显着减小。换句话说，它会随着时间的推移占用大量磁盘空间。
- RAW、BMP、GIF和PNG是无损图像格式。
- 您可以使用Photoshop、FileOptimizer或ImageOptim等工具在桌面上执行无损压缩 。
- 一些插件会将 Imagify（有损和无损）
- WP Smush（有损和无损）
- EWWW Cloud（有损和无损）
- ShortPixel（有损和无损）
注意：上面列出的所有服务器都使用自己的第三方服务器来压缩图像。出于性能原因，您应该始终在异地批量压缩图像。
下面将向您展示Imagify是如何工作的。他们有一个免费的计划，但即使是他们的专业计划的价格也非常合理。我们优化了相当多的图像，我们正在使用“精简版”计划（每月1GB）就好了。每年支付，每月不到4.25美元。
Imagify具有三个不同的优化级别：
- Normal：此模式使用无损压缩，这意味着您的图像不会丢失任何质量，但它们的大小也不会减少太多。
- Aggressive： 此模式使用有损压缩并大幅节省初始权重，同时略微降低图像质量。大多数时候它甚至不明显。
- Ultra： 此模式使用有损压缩并应用所有可用优化以实现最大图像压缩。这将大大节省初始重量，但您很可能会注意到一些图像质量下降。
Imagify设置
演示使用Aggressive模式，通常会根据图像节省 60-70%。注意：实际上我们使用的PNG比JPEG多得多，因为我们的大多数图像都是图标和插图，而不是照片。
图像压缩文件节省
您可以在上传时启用自动优化图像（我们建议您不要忘记）或在媒体库中使用它们的批量图像优化器。您也可以让它备份原始图像。这使您可以在以后实际将图像转换为其他优化级别，甚至可以恢复原始图像。如果您不使用此功能，我们建议您将其关闭以节省磁盘空间。
您通常应该事先调整图像大小，但Imagify确实具有调整更大图像的功能，以防您忘记或没有时间。除了有损压缩，这是另一个大文件大小节省程序！
Imagify调整图像大小
事实上，我们最近才在整个WordPress媒体库中使用了批量图像优化功能。如您所见，它减少了700MB以上！这在前端性能方面是巨大的。
批量图像优化节省
速度测试
让我们做一个小测试！由于我们经常看到用户上传未压缩的全分辨率图像，因此我们将对此进行一些比较，这会影响您网站的整体性能。
测试 1 – 原始未压缩
我们首先上传了10张未压缩的图像。然后我们在Pingdom上进行了5次测试并取平均值。我们可以看到总加载时间为3.04秒，总页面大小为28.4MB。
- uncompressed-1.jpg (2.82 MB)
- uncompressed-2.jpg (2.82 MB)
- uncompressed-3.jpg (2.82 MB)
- uncompressed-4.jpg (2.82 MB)
- uncompressed-5.jpg (2.82 MB)
- uncompressed-6.jpg (2.82 MB)
- uncompressed-7.jpg (2.82 MB)
- uncompressed-8.jpg (2.82 MB)
- uncompressed-9.jpg (2.82 MB)
- uncompressed-10.jpg (2.82 MB)
未压缩速度测试（Pingdom）
测试 2 – 压缩
然后我们再次上传完全相同的图像，但这次我们在 Imagify 插件中启用了“自动优化”。然后我们再次在 Pingdom 上进行了 5 次测试并取平均值。
- compressed-1.jpg (69.3 KB)
- compressed-2.jpg (69.3 KB)
- compressed-3.jpg (69.3 KB)
- compressed-4.jpg (69.3 KB)
- compressed-5.jpg (69.3 KB)
- compressed-6.jpg (69.3 KB)
- compressed-7.jpg (69.3 KB)
- compressed-8.jpg (69.3 KB)
- compressed-9.jpg (69.3 KB)
- compressed-10.jpg (69.3 KB)
我们可以看到总加载时间现在是522毫秒，总页面大小为901.4KB。因此，我们的有损压缩图像将页面加载时间减少了 82.83%！😮 总页面大小也减少了惊人的 96.83%。多亏了 Imagify，我们的图像看起来仍然是高质量的。
速度测试压缩（Pingdom）
小结
一旦确定了您网站上所需的图像质量，您就可以选择是否要使用有损或无损压缩。同样，对于那些更关心速度而不是质量的人，我们建议使用有损压缩。请记住，如果您找到正确的平衡，有损压缩图像会看起来很漂亮。如果您需要像素完美的图像，那么您应该始终使用无损压缩。
