Improve TT2 performance by serving WebP images in page patterns

[audrasjb]

Description

This PR aims to serve more modern image formats for the assets used by page patterns 🚀

Screenshots

I tested the PR and the result is exactly the same, no need for screenshots 😸

[audrasjb]

Pinging @kjellr as the 5.9 Theme Lead, what do you think about this enhancement?

[kjellr]

Hey sorry — I saw this the other day but it dropped off my radar. I'll give it a more thorough look tomorrow. 👍

[kjellr]

In general, I'm not opposed to using WebP. I don't tend to use WebP frequently myself, mostly due to the fact that neither Figma nor the Adobe programs natively support exporting it. General browser support seems acceptable, and I'm aware that WordPress supports it in the media library as of 5.8, so that's good. If folks have thoughts for or against WebP here (aside from the file size benefit, which I'm familiar with), I'd love to hear them.

The main concern from my perspective is that I don't want to sacrifice image quality. It's a little difficult to accurately judge the benefit here because there's a significant loss in quality between the original and the WebP images in this PR. This might not be apparent at first glance, but I'm seeing it particularly around the clean edges of the dashed lines.

(Original on the left, WebP on the right)

Also, all of the two transparent ones (watching-birds.png and warble.png) appear to have a white background now, so that should be fixed.

If we can re-export these and retain the general sharpness of the original images, I think we'll be in a better place to really assess this change. At the moment, the WebP images are not quite solid replacements.

Also — I'll note that I consider this a low priority issue at the moment, since we can definitely work on it past the feature freeze, and eventually I still hope that these can be uploaded to the Pattern Directory rather than bundled with the theme. If we take that approach, we can swap out the images at any point with relatively little effort.

[melchoyce]

If we do go the WebP route, here's a way to export from Figma using a plugin: https://www.figmatic.com/tutorials/how-to-export-web-p-images-from-figma-using-tiny-image/

[adamsilverstein]

:) Happy to see this PR, I came here to suggest the same.

We should be able to achieve the same image quality with reduced images sizes by using WebP.

@audrasjb - how did you create the images in this PR, from the originals or by re-compressing the JPEGs? Also, what compression level was used? If we can go back to the originals and convert directly to WebP at a 75-80 quality level, I would expect quality to be comparable to the JPEGs.

If someone can point me to the source files or Figma file with high quality images, I could help here by (re) creating the WebP versions.

[kjellr]

If someone can point me to the source files or Figma file with high quality images, I could help here by (re) creating the WebP versions.

The images are in the Figma file here, though they're spread out across many different artboards. Once I get some other higher-priority work out of the way, I can circle back and take a stab at exporting these myself to save us some time sorting that out. Is there a tool you recommend for exporting these?

[kjellr]

I opened a fresh PR for this here: #236

I'm going to close this one as a result, and we can continue to discuss over there. Thanks!