Research: WebP compatibility

[mxbclang]

This issue is for research and analysis related to the concern about the WebP compatibility for the new Enabling WebP by default feature. There is a lot of concern about WebP not being supported everywhere, such as certain email clients, RSS readers, or mobile apps.

We need to conduct research to get data on this topic, to answer the following questions:

• What percentage of most popular web browsers based on usage supports WebP? There is the “Can I use” information on it, but a particular point we need to review in depth is Safari support at scale, on Mac OS and iOS.
• What is the state of native app support of WebP? What percentage of most popular mobile OSs based on usage supports WebP in native apps?
• What is the state of email client support of WebP? What percentage of most popular email clients based on usage supports WebP?
• What is the state of RSS feed reader support of WebP? What percentage of most popular RSS feed readers based on usage supports WebP?
• What is the state of other user-agents (e.g. web crawlers) that don’t support WebP? What percentage of usage do these agents represent?

Once we have data on the above points, we can review and discuss further what that means for the proposed WebP implementation.

NOTE: This issue is for tracking research. To share more general feedback on the WebP by default proposal, please comment on our follow-up post here.

[khoipro]

I think if HTML5 was enable support (by add_theme_support(), then creating <picture> with .webp format is impossible.

The real problem is dealing with core WordPress block, like core/image, to see how they convert from standard tag <img src=""> to <picture> if we support it.

[webaware]

Web property owners with free Cloudflare accounts will not be able to reliably serve images if they have both a non-WebP and a WebP version, using the generally accepted method of setting a Vary: Accept header.

From the Cloudflare Blog, Vary for Images: Serve the Correct Images to the Correct Browsers (13/09/2021):

You can enable Vary for Images from Cloudflare’s API for Pro, Business, and Enterprise Customers.
...
Enabling Vary functionality currently requires the use of the Cloudflare API.

A way around this limitation for free Cloudflare accounts is to wrap image elements in picture elements that offer alternative sources. I use this myself on many websites, but I would caution against adding even that to core because it complicates styling via CSS -- you need to accommodate that an image element may or may not reside within a picture element, and I've seen CSS that assumes images are direct children of figures and other elements.

Cloudflare is a very popular CDN / security proxy service, and its free tier is widely used. It should be considered a significant factor in whether WebP is enabled on websites by default, and certainly whether .htaccess is modified by default to serve WebP alternatives using the Vary: Accept header.

[wp-seopress]

LinkedIn doesn't support webp (so if you share something on LI, the post thumbnail will not work)

[eugene-manuilov]

What is the state of email client support of WebP? What percentage of most popular email clients based on usage supports WebP?

Ok, I have created a draft email that contains an image with a webp picture. Then I decided to check email clients that I could install on my laptop. The following are are my findings which clearly mean that webp is supported by modern email clients.

I wasn't been able to check Microsoft Outlook and Hiri, but I believe they support webp as well. If someone can verify it, let me know and I'll update my table.

Email Client	Webp Support
Apple Mail	✔️
Thunderbird	✔️
Spark - Email App by Readdle	✔️
Edison Mail	✔️
Canary Mail	✔️
Newton - Supercharged emailing	✔️
BlueMail	✔️
Microsoft Outlook	✔️
Hiri	can't verify, can't install

[webaware]

According to the website Can I email, Outlook on Windows is a no:

https://www.caniemail.com/search/?s=webp

[eugene-manuilov]

According to the website Can I email, Outlook on Windows is a no:

https://www.caniemail.com/search/?s=webp

We have manually checked it and can confirm that webp images are displayed correctly in Microsoft Outlook.

[adamsilverstein]

We have manually checked it and can confirm that webp images are displayed correctly in Microsoft Outlook.

This might depend on the version of Windows you are running similar to the way WebP support on OsX depends on the underlying operating system.

Can you clarify which version of Windows you were testing on @eugene-manuilov?

[eugene-manuilov]

We have manually checked it and can confirm that webp images are displayed correctly in Microsoft Outlook.

This might depend on the version of Windows you are running similar to the way WebP support on OsX depends on the underlying operating system.

Can you clarify which version of Windows you were testing on eugene-manuilov?

@adamsilverstein, Mehul checked it on his end and confirmed that it worked for him. @mehulkaklotar, which version of Windows do you have?

[mehulkaklotar]

@eugene-manuilov I checked it on macos outlook app.

[eugene-manuilov]

Thanks, @mehulkaklotar. @adamsilverstein do you have Windows? We can't verify it on Windows. Perhaps someone else can verify it?

[pushpakpop]

I do have windows.
I can check and provide an update accordingly asap @eugene-manuilov

[pushpakpop]

hey @eugene-manuilov

I tried downloading the Microsoft Outlook 2019 but was not successful.
It moves me to microsoft 365 which is not free.
I did signup for the student one, but that did not include the outlook app in it.
I tried with my other account where while downloading the OutLook, it brings to the Mail and Calendar App on the appstore https://apps.microsoft.com/store/detail/mail-and-calendar/9WZDNCRFHVQM?hl=en-us&gl=US.

I did send some webp images on emails to and from that app and it does seem to render those images fine. The images when I downloaded were in PNG format, so it seems like it converted those images into pngs.

May be someone with proper Office 365 subscription can check out on the actual outlook client.

cc @mehulkaklotar

[adamsilverstein]

re: Linked in and other services that rely on "OpenGraph" tags, this article explores where WebP can and can't be used in: https://www.ctrl.blog/entry/webp-ogp.html

[wp-seopress]

[adamsilverstein]

I've been researching the WebP polyfill which could be added to support older Safari versions that don't yet support WebP - https://github.com/chase-moskal/webp-hero.

I created a test page that includes the polyfill and verified the WebP images load correctly in older Safari versions (using Browserstack) - https://refined-github-html-preview.kidonng.workers.dev/adamsilverstein/webp-tests/raw/main/test1.html.

The script uses a basic capability check and only loads the polyfill if the browser doesn't support WebP (using the approach recommended in https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp). I'd like to meter this capability check to evaluate how long it takes, it doesn't do much so should be very fast. Also, we should only load the polyfill at all when WebP images are present on the page.

[adamsilverstein]

Reviewing the webp-hero repository I discovered an existing ticket that proposes adding conditional loading either by default or in documentation. The method used is very similar to the one in my code, so maybe we can contribute something directly back to the project to support this. See chase-moskal/webp-hero#42 (comment)

[eugene-manuilov]

Reviewing the webp-hero repository I discovered an existing ticket that proposes adding conditional loading either by default or in documentation. The method used is very similar to the one in my code, so maybe we can contribute something directly back to the project to support this. See chase-moskal/webp-hero#42 (comment)

@adamsilverstein, if that script is added to the webp-hero bundle, it will mean that we will need to load an external script that checks whether webp polyfill is needed on every page. This will have worse performance than if we use inlined script as you use in your example. Or not?

[adamsilverstein]

It could be added to the project as a separate script.

[mxbclang]

Research complete; closing this issue.