Investigate email client support for WebP, plugin usage

[adamsilverstein]

WordPress now supports WebP images, and this plugins webp-uploads module explores using WebP as the default sub size image format. During testing with WebP, one issue raised was support for the WebP format in email clients.

Using WebP images in emails

According to Can I Email (at the time of this writing) support is very good, with >97% supporting either directly or by converting WebP images to JPEGs. However, one important exception is Outlook on Windows which does not support WebP.

Because WordPress sites can use their media library as the source of images when sending emails, for example newsletters - see https://wordpress.org/plugins/search/newsletters/ - we need to ensure we examine this issue.

Questions:

• Where do top newsletter plugins get their image URLs from? If RSS feed for example, can we keep the original (JPEG) images there in all cases?
• Is there a way to create emails that fall back to the original for non supporting clients (eg picture element)?
• How many Outlook on windows clients still vs outlook.com? caniemail suggests <3% so maybe sites can opt out if needed?
• Should we consider generating an additional medium-large image in the original (JPEG) format for use by email clients when the default output is changed to WebP so they don't have to use the original image?

[adamsilverstein]

Question to investigate: how do email clients handle image markup when the img src references a jpeg (the original) and the srcset references WebP (the sub sizes), for example the markup in the description of #69?

[adamsilverstein]

Hey @dainemawer - are you still looking at this issue? Would love to hear your finding about WebP email support.

[dainemawer]

@adamsilverstein I am indeed! I have taken a look, I just need to compile my findings - I will most certainly update this ticket today if not tomorrow!

[dainemawer]

Hey @adamsilverstein
I took a pretty detailed look into this ticket, here are my findings:

• First off, I fired off emails using: https://app.postdrop.io/ which is a free service for sending HTML emails.
• I then reviewed Can I Email to see what the support for WebP was like.

WebP Support

The general support sentiment is this:

• Apple Mail (macOS + iOS) full support for WebP in v14
• Gmail (Desktop, iOS, Android etc) all have partial support, if a WebP file is discovered by the email client, it will convert it to a jpeg. This seems like a pretty acceptable solution to me.
• Outlook has no support for WebP through its Email client on Windows, however the latest versions of Windows Mail, Outlook for Mac, Outlook.com, iOS and Android are all very well supported.
• There are of course some outliers like Thunderbird, Samsung Email, Proton and Hey whose latest versions all have WebP support.

Can I Email reckons overall there is a 85.30% support rate, with an additional 11.8% for partial support in the market. Pretty decent.

Src and Sizes Support

• I then took a look at srcset and sizes attributes support. Unfortunately this leaves a lot to be desired.

The general support sentiment is this:

• Apple Mail on MacOS and iOS is fully supported.
• Gmail has no support.
• Outlook has no support, other than Outlook for Mac
• Outliers like Samsung Email and Mozilla Thunderbird have full support.

Can I Email reckons there is an overall support rate of 33.33%

Tests

Anyway! I decided to test this out. As I cannot get debugging information from apps like Gmail or Mail on iOS. I opted to test in MacOS Mail on Desktop, the Gmail iOS App and Gmail in the browser. Here are my findings:

To start I tested the following markup:

<tbody>
      <tr>
          <td><img src="https://i.ibb.co/JvJCSHv/microsoft-365-y5y-Irf-ZXNHg-unsplash.webp" alt="Some WebP Image"></td>
     </tr>
</tbody>

Results

---

• Apple Mail rendered the .webp image, no problem
• Gmail on iOS renders the .webp image too, assuming it converts the image to a jpeg like the browser client.
• Gmail in the browser also renders the image, but looking at the Network panel, the image comes across the wire as a jpeg
  

Okay, so second test, lets try responsive images.

I tested with the following markup:

<tbody>
      <tr>
          <td><img src="https://i.ibb.co/GsxQ7CJ/microsoft-365-y5y-Irf-ZXNHg-unsplash.jpg" srcset="https://i.ibb.co/JvJCSHv/microsoft-365-y5y-Irf-ZXNHg-unsplash.webp 1024w" sizes="100vw" alt="Some WebP Image"></td>
     </tr>
</tbody>

Results

---

• Apple Mail renders the srcset and sizes images - hard to tell which image was actually rendered. I can verify that the markup was not amended or changed by looking at the "Raw Source" of the image.
• Gmail in the browser strips out the srcset and sizes attribute and resolves to using the src attribute value on a non-responsive image tag.
• The Gmail app still renders the image, but again, hard to tell which one actually rendered.

I took one more stab at this to see if I could get some more accurate results

<tbody>
      <tr>
          <td><img src="https://i.ibb.co/GsxQ7CJ/microsoft-365-y5y-Irf-ZXNHg-unsplash.jpg" srcset="https://i.ibb.co/t2n84V0/art-320.webp 320w, https://i.ibb.co/W0bShWd/art-1024.webp 1024w" sizes="(min-width: 1024px) 50vw, 100vw" alt="Some WebP Image"></td>
     </tr>
</tbody>

Results

---

• Apple Mail rendered the same, theres no refresh so the image did not respond in size.
• Gmail on both the browser and iOS stripped out any responsive features and just rendered the src attribute value on the image.