哪种图像格式最适合您的 WordPress 网站

已发表: 2022-04-21

在您的 WordPress 网站上拥有引人入胜、清晰且快速加载的图像是吸引用户/客户的最有效方式之一。汽车经销商花费大量时间确保新车型一尘不染和闪闪发光是有原因的。 产品的视觉影响通常可以决定成败之间的成败。 在线陈列室也不例外,此外还有图像如何影响加载速度的复杂性。 这是一个使用广泛且著名的指标,如果加载时间超过 3 秒,用户将离开网站。 如果一个网站的加载时间确实超过了 3 秒,那么您网站上的图片很可能是该原因的一部分。

因此,作为 WordPress 网站所有者,您可以做些什么来确保您网站上的图片既能吸引用户又能让您的网站快速加载。 您最初的直觉可能只是将图像从 1800×1400 大小的图像缩小到 300×200 大小的图像。 这将是错误的做法,因为虽然您的图像文件大小现在可能要小得多,但图像质量和用户体验会因此受到影响。 例如,如果您有一个汽车陈列室销售网站,客户将希望能够很好地了解汽车并能够看到所有功能和细节。 通过使图像变得如此之小,现在不可能对汽车进行任何详细检查——这让潜在客户感到沮丧并转向别处。

那么你有什么选择呢? 值得庆幸的是,您可以选择数十种不同的图像文件选项,从高质量但大文件大小的 BMP、久经考验的 JPEG 到广为人知的新 WebP 格式。 除了选择正确的格式外,重要的是要记住,无论您选择哪种格式,您都可以通过WP-Optimize使用称为“压缩”的过程来额外减小图像文件的大小。

网站速度是爬取您网站的谷歌机器人在搜索结果中对您的网站进行排名时观察到的十大最重要因素之一。 加载速度不佳会严重影响您网站的排名,并且很容易将您的网站从首页带到无法被 Google 索引。 谷歌对他们如何在搜索算法中对网站进行排名非常严格,如果他们发现该网站由于加载时间慢而提供了糟糕的用户体验,他们甚至可能不会费心去抓取它并使其可以通过谷歌搜索发现.

您应该选择哪种图像格式?

由于高质量的图像对于任何现代 WordPress 网站都非常重要,因此您需要知道使用哪种格式、它们如何影响您的网站性能以及如何充分利用您的文件选择。

两种最流行的网站图像文件格式是 PNG 和 JPEG/JPG。 w3techs 称,超过 70% 的网站使用这些文件类型。 大约 30% 的网站使用 SVG,22% 使用 GIF。

这是图像文件类型发挥作用的地方,因为您用于上传图像的文件类型起着重要作用。 由于有很多不同的文件类型,我们将在下面介绍最受欢迎的文件类型及其优缺点:

在我们进入文件类型之前,我们需要先了解一些概念,比如什么是光栅图像和位图图像? 什么是压缩? 有损压缩和无损压缩有什么区别?

压缩——有损与无损

这两种压缩类型都旨在减少文件大小,但真正重要的是它们删除的内容。 在有损压缩中; 删除与图像质量相关的重要数据。 在某些情况下,这可能会反映在被像素化的图像中,因为您的计算机可能无法重建图像。

在无损压缩中,图像中存在的不相关数据(例如元数据)被减少,这有助于减小文件大小。 在此过程中,图像质量完全不受影响。

光栅与矢量

最常用的图像文件类型通常是基于光栅的。 这意味着它们具有与每个像素相关联的固定 RGB 颜色值,并且所有这些像素被组合并用于创建整个图像。

此类文件格式的示例包括 jpg、png 和 gif。

或者,使用可以无限缩放而不会被像素化的形状和线条创建矢量图像。 矢量是使用数学公式创建的,允许用户更改值,同时不影响图像的质量。

现在我们已经了解了图像的基础知识,现在可以查看不同文件类型的详细信息。

JPEG:

这是一种包含压缩图像数据的数字图像格式。 使用 10:1 压缩比的 JPEG 图像非常紧凑。 JPEG 格式包含重要的图像细节,是互联网上共享照片和其他图像的最流行的图像格式。 JPEG 图像的小文件大小还可以让用户存储数千张图像(例如在艺术网站上),而无需在您的网站上增加额外的存储空间。

JPEG 是一种适用于照片的有损压缩文件类型,但建议您在处理图形时使用另一种格式,例如 PNG。

JPEG 图像文件示例。 上传时可以看到细节和质量都得到了保持。

PNG:

PNG 是一种流行的位图图像格式,是“便携式图形格式”的缩写。 此格式是作为图形交换格式 (GIF) 的替代格式而创建的。 PNG 有一些很棒的功能,例如包含 24 位 RGB 调色板、灰度图像和显示透明背景。 在处理高质量图像或图形时,无损数据压缩方法也用于 PNG 图像。 PNG 图像也经常用于图像编辑,因为它们可以为用户提供比传统 JPEG 格式更多的图像控制和选项。

PNG 还使用无损压缩算法,这意味着这种格式可以保留比 JPG 更多的数据。 使用 PNG 图像文件时,用户还可以将这些图像保存为透明背景。 通过使用这种格式,用户可以选择使用可以显示清晰背景的分层图像(例如 - 仅下图中的花朵而不是背景墙),使用户无需将图像添加到其他图像将其剪掉并移除现有背景——就像使用 JPEG 图像一样。 这是为什么它是图表和插图等图形的首选的主要原因之一。 众所周知,PNG 更受使用图形的用户欢迎,而不是上传标准照片。

PNG图像保持高质量,同时还允许您更好地控制图像

动图:

您可能从在消息应用程序上发送的无数短片中最了解“GIF”一词。 GIF 代表“Graphics Interchange Format”,主要用于支持没有音频的动画

与 JPEG 和 PNG 不同,GIF 用于更小众的情况,通常不用于静态图像(尽管这是可能的)。 如果您在 WordPress 网站上使用 GIF,很可能是为了向访问者展示简单的动画或流程。 GIF 的颜色范围有限,最适合用于简单的图形。 它们使用无损压缩,并且往往比 JPG 小。 通常建议您仅在您的站点中谨慎使用 GIF,因为它们会增加加载时间(考虑到文件大小)并且限制为 256 种颜色。

GIF 图像的示例。 为了制作动画,大大降低了原始图像的质量。

SVG:

可缩放矢量图形 (SVG) 是一种网络友好的矢量文件格式。 与 JPEG 等基于像素的光栅图像文件不同,矢量文件通过基于网格上的点和线的数学公式存储图像。 这意味着像 SVG 这样的矢量文件可以在不损失任何质量的情况下显着调整大小,这使其成为徽标和复杂在线图形的理想选择。

矢量仅适用于简单的图形、形状和插图。 SVG 是徽标的不错选择,特别是如果您需要您的徽标具有响应性并且大多数浏览器都支持,包括 Chrome、Firefox、Edge 和 Opera。

用于徽标的 SVG 格式向日葵示例。

BMP:

BITMAP 现在被认为是一种过时的图像格式。 BMP 以无损图像格式加载图像,由于缺乏压缩,这可能导致文件很大。 考虑到加载速度的重要性以及网站创建者希望如何将图像大小保持在最低限度(更不用说 SVG 和 JPEG 格式的流行),这种格式在很大程度上已不再用于在线图像。

以 BMP 格式上传时,图像的原始质量保持不变,但文件大小会严重降低您的网站速度,不推荐使用。

网页版:

这种图像格式由 Google 于 2010 年创建,并开始受到将大量图像上传到其网站的人们的欢迎,因为它与 JPEG 和 PNG 相比具有多个优势,例如具有更好的有损和无损压缩性能。

鉴于 WebP 改进的压缩性能,它通常还以比 JPEG 或 PNG 格式更小的文件大小上传,并且将占用您网站上的更少空间 - 使其加载速度更快。 虽然并非所有浏览器都支持它,但所有最流行的浏览器都支持它——包括 Chrome、Firefox、Edge 和 Opera。

尽管不如 JPEG 和 PNG 那样广为人知,但 WebP 可能会成为未来首选的图像格式。

结论:

可以在您的 WordPress 网站上使用多种类型的图像格式,但重要的是评估图像的用途。 例如,如果您的网站是为婚礼摄影师设计的,您将希望保持高质量的图像,这些图像仍然可以快速加载并且用户友好 ( JPEG )。 但是,如果您在在线海报商店销售图像,那么您将希望保留尽可能多的细节和图像信息 ( PNG )。

作为一般经验法则,如果您只是为您的在线商店、博客、投资组合、社交媒体或社交媒体网站上传标准图像,那么建议您以标准 JPEG 格式上传图像,然后使用 WP-Optimize进一步压缩您的图像

但是,如果您希望图像适应未来并尽可能提高加载速度,那么 WebP 可以提供卓越的有损和无损压缩,同时仍保持高水平的细节。 无论您决定什么,请记住始终使用 WP-Optimize 压缩您的图像,以实现市场领先的压缩。

哪个是您的 WordPress 网站的最佳图像格式的帖子首先出现在 UpdraftPlus 上。 UpdraftPlus – WordPress 的备份、恢复和迁移插件。