Try replacing bundled images with WebP versions

[kjellr]

Replaces #132. Props to @audrasjb for the idea. This PR swaps out the bundled images with WebP versions. Quality for all images should be the same as the original versions, but this saves us ~800k total (45% savings).

I'd like to get one last gut-check on using WebP here before we merge — my main concern is that there is no fallback in place here. Although browser support is pretty good, I'm a little concerned that these images won't work at all for Safari users who don't have Big Sur installed. That software was only released in November 2020, so it's still relatively recent. I'm going to do some asking around about that, but feel free to share thoughts or concerns here. Thanks!

[audrasjb]

Looks great, thanks for handling this @kjellr !

[jffng]

feel free to share thoughts or concerns here.

Granted I'm a use case of one, but I'm still on Catalina (haven't upgraded because it always breaks docker), so this PR breaks the images on Safari for me.

[desrosj]

my main concern is that there is no fallback in place here. Although browser support is pretty good, I'm a little concerned that these images won't work at all for Safari users who don't have Big Sur installed. That software was only released in November 2020, so it's still relatively recent.

I share this concern. Even though the savings are significant, I lean towards opting for wider compatibility than smaller size at this stage. Since this is the default theme for new installs, it's not unreasonable to assume that non-technical users will encounter a problem with WebP images and have no idea why it's happening, or even how to fix the issue.

Would there be any way to give a choice to the site owner with JPG as the default?

[adamsilverstein]

Would there be any way to give a choice to the site owner with JPG as the default?

The markup could use the picture element which lets us serve WebP in browsers that support it while falling back to jpeg for browsers that do not. That would mean shipping both sets of images though, negating some/most of the value of this change.

We could also consider a polyfill https://github.com/chase-moskal/webp-hero

[kjellr]

We can't modify the markup to use a picture element because it's provided by Gutenberg, and I'm not okay with including a polyfill for this particular theme — we're aiming to keep it as simple and lightweight as possible.

Given that (and given that my co-lead for the theme has turned out to be the exact sort of user this won't work for 😅), I think we should close for now. Let's just focus on getting the most out of the JPG + PNG images we have now, and take a look at WebP again for the next default theme.

I have opened an upstream issue to start a discussion about allowing fallbacks via the picture element: WordPress/gutenberg#36629

Thanks for the help and feedback on this, everyone!