search

Automattic / mShots

Website Thumbnail/Snapshot Service
GNU General Public License v2.0
100 stars 21 forks source link

Support WebP format #39

Open simison opened 3 years ago

simison commented 3 years ago

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 (https://github.com/puppeteer/puppeteer/issues/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 commented 3 years ago

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 commented 3 years ago

@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:

image

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

sgomes commented 3 years ago

@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 commented 3 years ago

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