Support WebP format

[simison]

WebP format would give us better quality with smaller filesize: https://developers.google.com/speed/webp

Puppeteer doesn't seem to support WebP out of the box (puppeteer/puppeteer#5348), so it would require capturing first in png and then reformatting to WebP before saving.

Puppeteer API docs for reference https://github.com/puppeteer/puppeteer/blob/d615dd3d2c79f12fad81445dd14a4943141bda04/docs/api.md#pagescreenshotoptions

cc @sgomes @josephscott

[sgomes]

Note that WebP is only supported in Safari since version 14, and even then only in the latest version of macOS. I'm not sure what the browser support strategy for mShots is, but it would likely need to take that into account.

[simison]

@sgomes wouldn't that be the consumer's responsibility, not mshots'?

So e.g. when we weren't yet using mShots at signup, we checked for WebP compatibility like so:

https://github.com/Automattic/wp-calypso/blob/8ecabde08f9a89d3bce370c6d0cb4b1388855739/packages/design-picker/src/utils/available-designs.ts#L17-L25

And loaded webp or jpg depending on support:

https://github.com/Automattic/wp-calypso/blob/8ecabde08f9a89d3bce370c6d0cb4b1388855739/packages/design-picker/src/utils/available-designs.ts#L57-L64

The example screen has a lot of images (and hopefully has much more in the future) so any performance improvements here are significant help:

At the same time, we do something like that in Photon where it returns webp images when supported if I remember correct.

[sgomes]

@sgomes wouldn't that be the consumer's responsibility, not mshots'?

Possibly, yes. I haven't looked at how the responsibility of what image gets displayed is shared between mShots and its consumers, and whether there is the possibility of the consumer actively picking a format. It's only a concern if adding support for WebP somehow means .webp files being served to browsers that don't support them.

[simison]

Gotcha! Yeah, I would expect the default to remain jpg and WebP require ?type=webp or something like that. :-)