切换菜单

WordPress 的最佳图像压缩工具 – 无损、有损、JPEG 和 PNG

已发表: 2018-03-29

Beaver Builder 产品 25% 折扣!快点促销结束...精益更多!

Image Compression Solutions for WordPress
  • WordPress

WordPress 的最佳图像压缩工具 – 无损、有损、JPEG 和 PNG

今天,我们要讨论一个我很关心的话题,图像压缩!我是半开玩笑的,但是在不降低任何质量的情况下大幅削减图像文件大小会让人感到奇怪的满足。

这篇文章的灵感源于 Beaver Builders Facebook 群组中一个非常受欢迎的帖子。我刚刚拍摄了一个关于在 ImageOptim 中启用和使用 Google 新 Guetzli 算法的视频教程,我对之前不熟悉的所有其他选项感到震惊。在本文中,我们将讨论一些用于压缩网络图像的技巧和工具。

初始术语

在深入研究之前,让我们先建立一些常用术语。

JPEG、PNG、SVG – 这是网络上最流行的三种图像文件类型。在本教程中,我们将主要关注 JPEG 和 PNG,因为它们从压缩和优化中获益最多。

JPEG通常更适合高保真图像,例如没有任何透明度的照片和网页图形。

PNG非常适合图标、徽标或任何需要透明度的内容。 PNG 在从 Photoshop 或您选择的图形编辑工具中出来后,还可以进行显着优化。

无损和有损——这些是压缩方法。无损压缩意味着您的图像不会损失任何质量。从字面上看,根本没有。这涉及从图像或任何不影响质量的内容中剥离元数据。

有损意味着压缩算法会降低图像质量。您将获得更好的压缩结果,但会牺牲图像质量。大多数有损压缩工具都提供百分比滑块,以便您可以选择质量与文件大小的平衡。

专业提示:对于大图像背景,我经常会稍微模糊图像或在照片上添加不透明的颜色层。减少细节和/或标准化颜色是一个很好的美学风格选择,可以显着减小文件大小。您可以在我们的职位页面上看到这一点。

我应该将图像压缩多少?

图像压缩的目标是在不牺牲太多质量的情况下尽可能减小文件大小。这与其说是一门科学,不如说是一门艺术,“可接受的质量”水平将根据具体情况而有所不同。

摄影工作室可能希望以最高质量突出他们的作品,而房地产网站可能愿意牺牲质量以换取在页面上显示更多图像。

大多数图像编辑软件允许您以不同的质量导出图像。不过,如果您使用专用的图像压缩工具,有时最好为该软件提供尽可能最好的质量,并让其压缩算法从那里开始工作。

图像压缩工具选项

正如我最近发现的,在图像压缩工具和服务方面并不缺乏选择。

图像优化

我开始使用 ImageOptim,并且仍然更喜欢它。 ImageOptim 仅适用于 OSX,但它支持 JPEG 和 PNG 文件的有损和无损压缩。它还可以配置为使用 Google 相对较新的压缩算法 Guetzli。 Guetzli 平均可以比其他算法减少 20-30% 的文件大小。

ImageOptim 是一个位于 Mac Dock 中的程序,您只需将图像拖放到程序图标上,它就会压缩它们。我倾向于一次优化一两个图像,所以这个解决方案非常适合我。但是,如果您正在处理大量图像或文件大小较大的图像,那么其他一些选项可能是大型作业的更好选择。

来自 WPMU Dev 的 Smush

Smush 是 WPMU Dev 的一款免费 WordPress 插件,可配置为优化 WordPress 安装中和/或上传到 WordPress 时的现有图像。 Smush 很棒,因为繁重的工作是由 WPMU Dev 的服务器完成的,它们可以优化图像并调整图像大小。

如果您正在为客户构建网站(尤其是那些喜欢直接从数码相机上传数兆字节图像的客户),Smush 是一个设置好后就可以忘记的绝佳选择。

小PNG

TinyPNG 是一个基于网络的图像压缩器。您可以上传图像(最多 5bm)并下载压缩版本。这会耗尽带宽,因此如果您的互联网连接速度较慢或按使用付费,这可能不是最佳选择。它支持 JPEG 和 PNG 文件类型。它是免费的。它似乎没有提供对压缩质量级别的任何控制。

使用 TinyPNG 后,我想我仍然更喜欢 ImageOptim,但对于 Windows 用户、快速一次性工作或专门寻找基于 Web 的压缩器的用户来说,这将是一个不错的选择。或者,如果您尝试将处理卸载到云而不是本地计算机。

想象

Imagify 是另一个基于 Web 的 SASS 选项,它提供了专用的 WordPress 插件,可以在您上传图像时或直接从 WordPress 管理区域优化图像并调整图像大小。 Imagify WordPress 插件拥有令人印象深刻的 4.5 星平均评价,许多评论指出,使用 Imagify 实现的图像质量比其他替代方案更好。

Imagify 有一个免费计划,允许您上传和优化 2mb 以下的图像。图像的优化版本将在 24 小时内从其服务器上保持下载状态。

JPEG迷你

JPEGMini 是一项 SASS 服务,应该会吸引那些寻求主力解决方案的人们。想象一下,您的任务是为电子商务商店优化数以万计的高分辨率产品图像。 JPEGMini 将使您能够将所有处理工作转移到他们可能是快速且优化的云服务器上。

短像素

ShortPixel 是另一个基于 Web 的 SASS。如果您希望将图像压缩卸载到云服务器,那么这是一个不错的选择。他们的免费计划允许您每月优化最多 100 张图像,他们还提供高级计划,起价为每月 5 美元,还可提供更多图像。 ShortPixel 还有一个 WordPress 插件,它们是 BB 团队其他成员中最受欢迎的。

想象

你最喜欢什么?

如果您访问启发这篇文章的原始 Facebook 帖子,您会看到其他几个选项,以及出于各种原因更喜欢其中一个的人们。我们错过了你最喜欢的吗?请在评论中告诉我们它是什么以及您喜欢它的原因。

此外,如果你是那种吃、睡、呼吸都注重绩效的人,那么这篇采访乔恩·布朗关于现代绩效最佳实践的文章可能会很有吸引力。

罗比·麦卡洛的简介

26 条评论

  1. Raygun 设计于 2018 年 3 月 28 日下午 1:31

    我们投票给Tinypng。我们喜欢他们的插件,它可以在您上传到您的网站时进行优化 - 我们也喜欢 Panda!当我们使用 Mac 时,我们也会看看 ImageOptim。很棒的名单伙计们。



    • 罗比·麦卡洛2018 年 4 月 30 日上午 11:35

      哈哈。是的,大多数有动物吉祥物的公司都相当可靠。



  2. 保罗·斯蒂尔2018 年 3 月 28 日下午 4:30

    Tinypng 还有一个 Wordpress 插件 https://wordpress.org/plugins/tiny-compress-images/,如果您需要在服务器端进行设置,它们的 API 非常适合使用。



  3. 托比2018 年 3 月 28 日晚上 8:45

    杰出的。我刚刚开始使用 ShortPixel。设计精良、插件友好(启用媒体替换)且具有成本效益。

    我真的很想看到一篇将 S3 Offload 与 Beaver 集成的文章,bb 插件缓存使其变得特别困难。



  4. 克里斯于 2018 年 3 月 29 日上午 9:02

    我用EWW。对于拥有大量图像的网站,可以使用 CDN 进行无限许可。一次 10 个,请使用 https://ewww.io/online-image-optimizer/



  5. 米海2018年3月29日上午10:51

    我已经为我的 20 多个 WordPress 网站测试了所有 WordPress 图像压缩/优化插件,其中一些包含用户生成的内容(即大图像),对我来说,迄今为止最好的选择是 ShortPixel。我发现他们的压缩具有一流的质量/尺寸比,并且他们的定价模型很公平。另外 - 我不受文件大小的限制,即使您使用免费计划,它们也会完全优化。



  6. 迪拉杰·达斯 (Dhiraj Das)于 2018 年 3 月 31 日晚上 11:05

    我一直在使用TinyPNG,它们似乎在上传后使图像膨胀然后压缩它(我可能是错的,但我看到上传后的图像尺寸比实际尺寸更重)从不知道ImageOptim看起来非常方便工具。



  7. 卢卡斯2018 年 4 月 4 日上午 5:58

    不错的评论。在上传之前,我使用 webresizer.com 作为 TinyPNG 的替代品。它们可以让您很好地控制最终产品。他们有一个批量缩放器/压缩器,但它最好与大量大小相同的图像一起使用。
    在我们的网站上,我发现 Imagify 运行良好。



  8. a305587于 2018 年 4 月 10 日上午 10:17

    这些服务非常棒,感谢您整理这份列表。

    我想指出的是,如果您已经在使用 Photoshop,您也可以通过 Photoshop 来完成此操作。不要“另存为...”,而是转到:

    文件 –> 导出 –> 保存为 Web(旧版)

    然后在预设中更改为 JPEG 高、JPEG 中或 JPEG 低压缩。然后点击“保存”。这达到了与上述服务相同的结果。



    • 罗比·麦卡洛2018 年 4 月 10 日下午 3:11

      令人惊讶的是,其中许多工具和服务在减小文件大小方面比 Photoshop 更好。



    • 汤姆·阮 (Tom Nguyen)于 2018 年 5 月 2 日凌晨 3:07

      我对 Photoshop 也做了同样的事情,但我相信 ImageOptim 和 Smush 会进一步减小文件大小,而不会明显降低质量。



  9. 杰克·霍克斯2018 年 4 月 11 日上午 7:56

    我认为人们应该更认真地考虑 IMGIX 和 Cloudinary 等内容优化工具。



  10. 安·亚辛 (Ann Iashin)于 2018 年 4 月 15 日上午 8:56

    你最好使用压缩器!它不使用互联网,仅是网站



  11. dmergus于 2018 年 4 月 19 日上午 6:52

    我们倾向于为客户使用 Smush 和 Short Pixel。短像素提供更好的压缩,但 Smush 也不错,设置后就不用管它了。



  12. 格雷格·凯悦2018 年 4 月 23 日上午 7:25

    我非常喜欢在 OSX 上使用 ImageOptim!我在发送到网络的每张图像上都使用它,无论它将在哪个平台上显示!



  13. Sridhar Katakam于 2018 年 4 月 26 日晚上 7:10

    关于 ImageOptim 中的设置更改,您是否将优化级别保留为默认值 Extra?



    • 罗比·麦卡洛2018 年 4 月 30 日上午 11:34

      在大多数情况下,是的。



  14. 奥马尔2018 年 4 月 26 日晚上 9:56

    我很惊讶没有人提到 Kraken.io (https://kraken.io/)。它可以从他们的网络界面使用或作为 WordPress 插件。



    • 罗伯特·拉特利奇2018 年 5 月 3 日上午 10:07

      我使用 Chromebook,它看起来是一个不错的选择。我一直在使用http://guetzliconverter.linuxadm.hu/



  15. gelform于 2018 年 4 月 29 日上午 6:06

    我发现的最好的 PNG 库是 PNGQuant,但很难让它在本地工作。所以现在我通过使用 PNGQuant 的 http://compresspng.com/ 运行所有图像。比 ImageOptim 有了巨大的改进。



  16. 汤姆·阮 (Tom Nguyen)于 2018 年 5 月 2 日凌晨 3:05

    我使用过 ImageOptim 和 Smush 免费版本。我特别喜欢斯马什。除了能够一次优化更多图像之外,升级到付费版本还有其他好处吗?



    • 罗伯特·拉特利奇2018 年 5 月 3 日上午 10:04

      在我看来,这比 Smush 的优化要好得多。



  17. BuildupYouth于 2018 年 10 月 26 日凌晨 2:07

    感谢您提供的列表.. 目前正在使用 WPMU Dev 的 Smush,并且运行良好..



  18. 罗纳德·E·福特2018 年 11 月 21 日晚上 8:01

    我知道我可能已经过时了,但我可以通过 Fireworks 很好地控制图像压缩。以我的拙见,这是最好的光栅/矢量程序。



  19. 杰克·霍克斯2018 年 11 月 22 日下午 1:09

    烟花曾经是一个很棒的节目。我已经很多年没有使用它了,但是,也许是时候重新打开它,看看我有多么想念它。



  20. Himani Bhardwaj于 2018 年 12 月 18 日晚上 10:46

    感谢这篇好文章!我正在为我的网站使用图像优化器插件。



我们的时事通讯

我们的时事通讯是亲自撰写的,大约每月发送一次。这一点也不烦人,也不是垃圾邮件。
我们保证。

加入时事通讯

立即尝试 Beaver Builder

Beaver Builder