Bug or observation? Webp in newsletters

[Cathy_Sarisky]

Hey all,
Ghost 5.69, nothing weird, CLI install on a VPS. (I don’t think it’s relevant here.)
I’m observing that emailing a webp with a transparent background results in the image arriving with a black background, at least in my gmail inbox. (mail.google.com web client, Windows, latest version of Chrome browser.) I’m posting this observation here, because I’m not sure if it’s a problem with the webp encoding (although it looks fine on a webpage), or a Chrome/Gmail quirk, or something else. Anyone else seeing this?

Adding an image, from gmail web view:

[Cathy_Sarisky]

Meanwhile, the webp looks fine on my iPhone but the margins are goofy huge:

[block]

Damn, I just wanted to start using webp this week. But this makes me want to stop lol

[markstos]

If you were seeing different results in different email clients, I imagine this is an issue on the client side.

But then the Gmail case in Chrome is weird, because we expect Chrome has good webp support.

It could be that tighter security controls are applied for viewing emails. Not sure, webp did have an exploit not too long ago.

Uncovering the Hidden WebP vulnerability: a tale of a CVE with much bigger...

Maybe within Gmail, you could try copying the link to that image, and then displaying it directly in chrome, or other browsers.

[Cathy_Sarisky]

Interesting link! Thanks for sharing.

[Kevin]

Gmail does a fair bit of CSS/HTML rewriting when displaying emails so it’s possible transparent images in general aren’t working properly. Did you test the same image as a transparent PNG?

[Cathy_Sarisky]

Transparent PNG as featured image: fine, no problem.
Transparent PNG as a header card image: fine (two variants tested)

Transparent WEBP as featured image: black background on gmail
Transparent WEBP in a header card image: black background on gmail

Sorry, the last header example is black, so the problem is not obvious… here it is with purple background instead:

These look fine on iPhone’s built in email client - it’s a Gmail/Chrome/Windows web problem. (Not tested beyond those two specific setups, sorry.)

[Kevin]

Looks like it’s a Gmail-specific thing. They convert webp images to jpeg for better email compatibility (e.g. Outlook which has zero webp support) but of course jpeg doesn’t support transparency so they get a solid background. I’d avoid using webp for anything email related, or at least avoiding use of transparent webp images if you know your audience is unlikely to be using Outlook.

https://groups.google.com/a/webmproject.org/g/webp-discuss/c/e1ZzTJOfIyg?pli=1

[Cathy_Sarisky]

That’s a bit of a conundrum, then. I want webp on blog posts on the website for faster load times, but if it’s going to get messed up by the emailed version, that means needing two versions of the post. :P

What would be really really cool would be if Ghost would output webp on images included in {{content}}. I make good use of the feature for featured images, but no way to tell Ghost currently to convert my body images also.

[markstos]

Since Ghost treats newsletters as a first-class feature, it should convert webps to png when emailing.

[block]

I can confirm this bug. Started using webp recently and all the newsletters looks very bad with the formatting. Is this fixed with the most recent versions of Ghost?

[Brambster]

I was heavily using WEBP until last week because desktop Outlook still doesn’t have support and possibly Edge requires an add-on but I didn’t verify that. Some of the display issues you all are seeing are probably related to implementations. Gmail for instance converts WEBP to JPG on the fly and this is why transparency doesn’t work. I would highly advise laying off of WEBP for the next year or two until support becomes more universal.

I found this summary of support for WEBP that is helpful, but remember no everyone uses updated phones, tablets, and desktops.

Can I email… webP image format

[block]

I think the problem has been fixed. My newsletters with webp now looks good in all clients I use.