值得信赖的WordPress教程,当你最需要的时候。
WordPress入门指南
WPB杯
2500万+
使用我们插件的网站
16+
多年WordPress经验
3000+
WordPress教程由专家提供

WebP vs.PNG vs.JPEG:WordPress的最佳图像格式

编者按:我们从WPBeginner上的合作伙伴链接中赚取佣金。委员会不会影响我们编辑的意见或评价。了解有关的更多信息编辑过程.

不知道在你的WordPress网站上是使用WebP、PNG还是JPEG图像?

图像为您的内容增添活力WordPress网站更具吸引力。然而,选择正确的文件格式对性能很重要。如果你的图片需要很长时间才能加载,那么你的网站将无法提供良好的用户体验。

在本文中,我们将比较WebP、PNG和JPEG,并帮助您为WordPress选择最佳图像格式。

WordPress的最佳图像格式

WebP vs.PNG vs.JPEG–简介

让我们首先看一下所有3种图像格式,并了解它们各自的工作原理。

什么是WebP?

与PNG和JPEG相比,WebP是一种相对较新的图像格式。由谷歌创建的WebP为互联网上的图像提供了卓越的无损和有损压缩。这允许您创建较小的图像以帮助提高网站性能.

无损压缩意味着图像中的所有数据在解压缩后仍然保留。另一方面,有损压缩通过永久消除图像文件中的信息来减小文件大小。

WebP的一个突出特点是它支持基于运动的图像,这在PNG或JPEG中是不可能的。这也使得WebP成为GIF的绝佳替代品。

WordPress在5.8版本中引入了对WebP图像格式的支持。以前,您必须安装WordPress插件以在WordPress中使用WebP图像.

所有现代web浏览器,包括Google Chrome、Firefox、Safari、Edge等,都支持WebP图像格式。许多图像编辑工具还支持WebP并允许您以这种格式导出图像。

WebP也具有与PNG类似的功能。您可以在WebP图像中实现与PNG相同的透明度级别。

赞成的意见:

  • 与PNG和JPEG相比,提供更小的文件大小
  • 受流行web浏览器支持
  • 获得与PNG相同的图像透明度
  • 支持有损和无损压缩
  • 用于创建基于运动的图像

欺骗:

  • 需要第三方工具和插件将图像转换为WebP格式
  • 照片编辑软件的支持有限

什么是PNG?

便携式网络图形(PNG)是互联网上最流行的图像格式之一。它支持数百万种颜色,因此图像更清晰、更逼真。

使用PNG的主要优点是其无损压缩算法。当图像被压缩时不会丢失任何数据或质量这使得PNG成为WordPress网站的一种很好的格式,如果你需要较小的图像文件,并希望保留图片中的细节。

使用PNG的另一个好处是它支持透明背景。这就是为什么你会发现许多PNG格式的网站徽标文件和其他元素。

例如,这里有一个PNG格式的WPBeginner徽标。

WPBeginner徽标

赞成的意见:

  • 压缩时不会丢失图像质量
  • 与JPEG相比,图像文件的大小更小
  • 提供高质量的图像透明度
  • 受所有主要浏览器和图像编辑工具支持
  • 低颜色徽标和图形的理想格式
  • 支持无损压缩

欺骗:

  • 它不支持有损压缩
  • 有限的颜色深度,不适合复杂的彩色图像

什么是JPEG?

JPEG是联合摄影专家组(Joint Photographic Experts Group)的缩写,是1986年创建的一种图像格式。它是许多设备的标准图像格式,包括数码相机和智能手机。许多WordPress网站建设者图像库插件还支持JEPG图像。

使用JPEG的优点之一是它可以提供生动的图片并包含数百万种颜色。所有web浏览器都支持这种格式,图像大小相对较小。

例如,这是一个JPEG格式的蝴蝶图像。它有很多颜色和细节,在其他图像格式中不太明显。

JPEG图像预览

如果您有多种颜色的复杂图像,JPEG通常是最佳格式。在上面的JPEG图像中,颜色是鲜明和突出的。

然而,在优化时,您可能会注意到图像质量有一点下降,特别是当图像的颜色数据较低时。此外,JPEG图像很容易转换。您可以将它们更改为任何其他格式,包括PNG和WebP。

赞成的意见:

  • 它支持数百万种颜色
  • 适用于复杂和彩色图像的优秀格式
  • 可高度转换为其他图像格式
  • 受流行的web浏览器和图像编辑工具支持

欺骗:

  • 压缩后会丢失图像细节
  • 它不支持分层图像
  • 不支持图像透明度

WebP vs.PNG vs.JPEG–图像文件大小

当要比较WebP、PNG和JPEG的图像文件大小时,很大程度上取决于您选择的压缩级别优化图像.

也就是说,WebP无损图像通常比PNG小26%。类似地,当比较WebP和JPEG有损图像时,WebP图像比JPEG图像小25-34%。

例如,Google Developers的一项比较显示了JPEG和WebP格式之间的图像文件大小的显著差异。

JPEG与WebP格式

这表明,与PNG和JPEG相比,WebP图像的文件大小要小得多。使用较小的图像文件,可以提高WordPress的速度,并确保网页加载速度更快。

因此,您还将看到WordPress搜索引擎优化谷歌将页面加载速度视为排名因素。如果您的站点加载速度快,那么您将比加载速度慢的站点具有优势。

WebP vs.PNG vs.JPEG–图像质量

根据图像质量为WordPress选择最佳图像格式将取决于您的网站类型。

例如,如果你是一名摄影师,在WordPress网站上发布彩色图片,那么JPEG是最好的图像格式。JPEG图像具有较高的压缩比,有助于保留颜色数据。

另一方面,如果您发布截屏或者使用颜色最少的单个图片,那么最好使用PNG格式。PNG提供高质量的图像,可以无缝地处理复杂和简单的图像。

如果您想压缩站点上的图像以保持高性能,WebP格式将起作用。如果将WebP与JPEG进行比较,则WebP的压缩比JPEG平均多30%。但是,如果您有摄影或平面设计,我们不建议您使用WebP投资组合网站.

WordPress的最佳图像格式是什么?

在比较了WebP、PNG和JPEG之后,最佳图像格式实际上取决于您的需要。

WebP据说是未来的格式,很快将被所有网站使用。当我们将WebP与JPEG进行比较时,WebP提供了最小的图像文件大小,这节省了存储空间并缩短了网站加载时间。但是,您需要确保您的网站生成器或图像编辑工具支持WebP格式。

另一方面,JPEG是专业摄影师以及需要彩色准确图像的网站所有者。

PNG是共享屏幕截图和其他没有很多颜色的图像的最佳格式。它是一种非常通用的格式,可以提供具有相对较小文件大小的高质量图像。

在WordPress中使用图像的额外提示

图片在你的内容中起着关键作用,许多网站所有者不会花时间在他们的博客文章和页面中添加高质量的图片。

除了为WordPress选择正确的图像格式外,这里还有一些提示可以帮助您创建令人惊叹的图像并优化其性能:

  • 使用图像压缩插件–大图像会降低网站的速度。你应该使用图像压缩插件优化WebP、JPEG和PNG图像以提供快速性能。
  • 添加图像替换文本–Alt text或alternative text是描述图像的HTML图像标记。它允许搜索引擎机器人和具有屏幕阅读器的用户理解您的图片。在优化站点进行SEO时,添加alt文本可以帮助您的照片出现在图像搜索结果中。
  • 为您的站点选择正确的图像大小–初学者通常不确定图像大小他们应该在自己的网站上使用。选择合适的尺寸可以提供一致性和流畅的用户体验。
  • 使用水印或禁用右键单击–如果您不希望他人未经许可使用您的图像,则可以添加水印并禁用右键单击图像。要了解更多信息,请参阅我们的指南防止WordPress中的图像被盗.

我们希望本文能帮助您了解WebP、PNG和JPEG,以找到WordPress的最佳图像格式。您可能还想查看我们的最佳设计软件和我们的图像SEO初学者指南.

如果你喜欢这篇文章,那么请订阅我们的YouTube频道用于WordPress视频教程。您也可以在上找到我们推特脸谱网.

披露:我们的内容是读者支持的。这意味着如果你点击我们的一些链接,那么我们可能会赚取佣金。请参阅WPBeginner的资金来源,为什么重要,以及您如何支持我们。以下是我们的编辑过程.

编辑人员

WPBeginner的编辑人员是由Syed Balkhi领导的WordPress专家组成的团队,在WordPres、Web托管、电子商务、SEO和市场营销方面拥有超过16年的经验。从2009年开始,WPBeginner现在是业界最大的免费WordPress资源站点,通常被称为WordPressWikipedia。

终极版WordPress工具包

免费访问我们的工具包-每个专业人士都应该拥有的WordPress相关产品和资源的集合!

读者互动

16条评论留下答复

  1. 赛义德·巴尔基

    嘿,WP初学者读者,
    你知道你可以通过评论WPBeginner获得激动人心的奖项吗?
    每个月,我们的顶级博客评论员都会获得丰厚的奖励,包括高级WordPress插件许可证和现金奖励。
    你可以获得有关比赛的更多详细信息从这里开始.
    开始在下面分享你的想法,有机会获胜!

  2. 丹尼斯·穆索米

    嗯……我通常以PNG格式上传图像,然后我的缓存插件会自动将其转换为WebP。
    我喜欢这种设置,因为WebP图像非常轻量级,这确实提高了我的网站的速度和性能
    如果浏览器不支持WebP,插件只会显示PNG版本,而不是作为备用。我发现这种设置在不牺牲兼容性的情况下提供了极佳的速度

    • 吉·范克(Jiři Vaněk)

      嗨,丹尼斯。我正在寻找与wpboorner上建议的完全相同的解决方案。请问您使用什么插件来转换为.webp?这将大大帮助我找到与你描述的相同的解决方案。

  3. 吉·范克(Jiři Vaněk)

    关于WordPress的最佳格式问题。由于网站的大小和加载速度,只上传WebP更好吗?还是上传PNG,然后使用插件转换为WebP更好?我担心的是我的网站上只有WebP。然而,我被提醒,当有人出于某种原因使用非常旧的浏览器访问我的网站时,这不是最佳做法。因此,他们的浏览器不支持这种格式,这意味着他们不会在我的网站上看到图像。因此,我考虑将PNG与一个插件一起使用,该插件将为新浏览器提供WebP,为旧浏览器提供PNG。

    • WP初学者支持

      如果您有用户使用较旧的浏览器查看您的站点,那么最好有一个回退图像,最简单的方法是上传您希望用户加载的文件类型,并使用插件转换为WebP,为您设置回退。

      行政

      • 吉·范克(Jiři Vaněk)

        这是一个好主意。我首先将图像转换为webp,然后将其上传到网站。所以我会按照你的建议做相反的尝试。上传jpeg或png,然后使用插件进行转换。谢谢你的建议。

  4. 奥瓦杜德·布伊扬

    据我所知,PNG格式通常用于透明图像。

    然而,大多数人倾向于使用JPEG。

    我说得对吗?

  5. 拉尔夫

    我早在几年前就听说过这种webp趋势,但从未在意过。我知道网站越快越好。然而,它不是在对抗收益递减吗?

    我所有主要博客文章照片的jpegs都是1920×1280,在没有任何优化的情况下,它是150-250kb,大部分在220kb左右。我使用更大的分辨率,因为屏幕越来越好,所以我以后不必升级它。

    我知道在webp中,这些相同的图片可能尺寸较小。也许是150kb?120 kb?
    考虑到我们在世界各地的互联网变得越来越好、越来越快,而在我国,多年前互联网还不错,基础设施真的很好,真的值得吗?

    我需要花费大量时间将每个jpg转换为webp,但没有看到REAL WORLD(网站测试应用程序之外)的升级。

    我希望我能在5分钟内做到这一点,但这样做真的不值得吗?

    • WP初学者支持

      需要考虑的一件事是,移动数据用户可能无法获得较大图像的最佳连接。为了确定这种改变是否值得,唯一能决定它是否适合您的站点的人是您,因为它目前是一个可用的新选项,但不是一个要求。

      行政

  6. 彼得罗·Z

    你对图片和网站的谈论让我思考,因为我最近开始写自己的博客。当我写博客时,我不知道我使用的图片类型会影响网站的加载速度。所以,我做了一些测试,发现我的“重”照片引发了问题。就在那时,我了解了图片格式的差异。

    JPEG就像变小图片和加快网站速度的魔法。它可以比常规图片(如PNG)收缩图片更多。我使用了转换器插件来帮助我实现这一点,结果非常好。

    现在,在WebP之间进行选择。像Canva这样的流行工具,甚至一些手机应用程序默认可以转换成这种格式吗?或者我需要找到WP插头?

    谢谢你解释这件重要的事情!

    • WP初学者支持

      图像编辑工具通常应该有创建WebP图像的方法,我们还没有测试移动应用程序的该功能。

      行政

  7. 奥马尔

    谢谢你的详细解释。
    实际上,我正面临着WebP图像的问题,我想知道什么是WebP。
    现在很清楚了,甚至我也可以从中受益。
    但我的问题是,我能把peg和png改成WebP吗?我该怎么做?
    谢谢你

  8. 阿克波博尔·约瑟夫

    感谢WPBeginner撰写本文。事实上,在我看到这个通知之前,我刚刚完成了对这个主题的快速研究。老实说,我在网上的旅程中得到了你们团队的很多帮助。

    我真的很感激你的出色工作。

    • WP初学者支持

      不客气,很高兴我们的指南有所帮助,我们希望我们的团队和文章继续对您有所帮助:)

      行政

留下答复

感谢您选择发表评论。请记住,所有评论都是根据我们的评论策略,并且不会发布您的电子邮件地址。请不要在名称字段中使用关键字。让我们进行一次有意义的私人对话。