跳转到主要内容

故障排除 Gmail 中的 WebP 图像

了解如何在 Gmail 中解决 WebP 图片问题

作者:Chaymae

Gmail 使用图片代理系统,该系统可能会在向收件人显示您的图片之前对其进行修改或转换。当一封电子邮件(Email)包含 WebP 图像时,Gmail 会更改格式(为 PNG 或 JPEG),这可能会使透明度变平、调整颜色或移除动画。因此,您可能会注意到边缘失真、粉红色/红色光晕、黑色背景,或质量较低的产品图片。


本文解释了为什么会出现这些问题以及如何预防或解决这些问题。


为什么 Gmail 修改 WebP 图像

Gmail 不总是完全按照您上传的方式显示您的图片。当您的电子邮件(Email)被打开时,Gmail 会创建该图片的专属版本,在此过程中,图片可能会发生变化。

以下是 Gmail 可能会对 WebP 图片执行的操作:

  • 转换图像格式从 WebP 转换为 PNG 或 JPEG;

  • 移除透明度,这可能会在边缘周围添加意想不到的颜色;

  • 压缩或调整图片,这可能会降低锐度或清晰度;

  • 将动画 WebP 图片转换为静态图片。

这些更改就是为什么 Gmail 中的 WebP 文件可能会显示不同的原因,就像上面的例子一样。这些更改在 Gmail 处理图片之后生效。

注意:Omnisend 会不会重新编码或修改您的图片文件。我们直接引用您的图片 URL,在 <img> 标签中。Gmail 通过其代理处理您的图片后,会出现显示问题。

故障排除 Gmail 中常见的 WebP 问题

图片周围的红色/粉色边框

包含透明度、柔和边缘或抠图的图片可能会在 Gmail 中显示细微的粉色或红色边框


出现这种情况是因为 Gmail 通常会将 WebP 图像转换为 JPEG,而 JPEG 不支持透明度。当透明层被扁平化时,边缘可能会出现微弱的彩色条纹,尤其是在白色或浅色背景上。

解决方案:

为了防止您的图片周围出现光晕或边缘:

  • 避免将 WebP 用于图形。请改用 PNG。

    您可以将 PNG 用于任何具有 透明度、柔和阴影、抠图产品、徽标或图标的图像。

  • 使用 JPG 格式的照片

    JPG 格式是全出血照片和不带透明度的背景式图像最安全的选择。

这可以防止不必要的晕影/边缘效应,减少调试电子邮件(Email)外观所花费的时间,并有助于确保电子邮件(Email)在所有电子邮件(Email)客户端中都能如预期般显示。

WebP 透明背景问题

除了粉色/红色边框之外,带有透明背景的图片在 Gmail 中查看时,也可能显示为黑色、灰色或意想不到的背景颜色

由于 Gmail 在显示 WebP 图像之前会将其转换为不同的格式,透明度可能会被移除或扁平化,导致之前透明的区域被纯色填充。

解决方案:

为防止 Gmail 中出现透明背景问题:

  • 避免将 WebP 用于透明图像。请改用 PNG。
    当电子邮件(Email)客户端处理图片时,PNG 更可靠地保留透明度。

  • 对于徽标、图标和带有透明背景的图形,请使用 PNG 格式。
    这有助于确保透明区域在不同收件箱中保持透明。

  • 尽可能避免柔和阴影或部分透明边缘。
    这些元素在转化后更可能产生不必要的背景颜色。

使用 PNG 格式的透明图片可减少意外的背景填充,并帮助您的电子邮件(Email)在 Gmail 和其他电子邮件客户端中保持一致显示。

动画 WebP 图片显示为静态

动画 WebP 图像在 Gmail 中打开时,可能会显示为静态(非动画)图像

Gmail 无法稳定支持动画 WebP 文件。当 Gmail 在显示这些图片之前对其进行处理时,动画可能会被移除,并且仅显示一帧。

解决方案:

为确保动画在 Gmail 中正确显示:

  • 避免在电子邮件(Email)中使用动画 WebP 图像。
    Gmail 可能会将动画 WebP 文件转换为静态图片。

  • 请改用 GIF 来制作动画内容。
    GIF 是跨电子邮件(Email)客户端(包括 Gmail)最广泛支持的动画格式。

  • 保持动画轻量且简单。
    帧数较少的短小循环动画加载更可靠,显示更一致。

使用 GIF 进行动画有助于确保动画效果得以保留,并且您的消息能够在 Gmail 和其他电子邮件(Email)客户端中按预期显示。

常见问题

为什么我的 WooCommerce 产品图片在 Gmail 中看起来模糊或破碎?

如果您的 WooCommerce 产品图片以 WebP 格式上传,尤其是当它们包含透明背景时,则可能会发生这种情况。当这些图片同步到 Omnisend 时,原始的 WebP 版本会被保留。Gmail 可能会在显示图片时对其进行转换或重新压缩,这可能会导致图片模糊、像素化或边缘断裂。

为了解决这个问题,请更新在 WooCommerce 源头的产品图片

  • 移除透明背景,或者

  • 将 WebP 图片替换为 PNG 或 JPG 版本

一旦源图片在 WooCommerce 中更新,更正后的图片将自动同步到您的 Omnisend 邮件中。

我可以阻止 Gmail 更改我的图片吗?

否。Gmail 控制图像的处理和显示方式,并且此行为无法被覆盖。

为什么我的图片在我的网站上显示正常,但在 Gmail 中却不正常?

网页浏览器原生支持 WebP。电子邮件(Email)客户端,包括 Gmail,在显示 WebP 图像之前,可能会更改其处理方式。


需要进一步帮助吗?请随时通过应用内聊天或通过 联系 Omnisend 的支持团队。[email protected].

这是否解答了您的问题?