[Feature] Save screenshots using `webp` format

[stramel]

Following up on #13385 with a request for only webp since it is already supported by Puppeteer https://github.com/puppeteer/puppeteer/issues/5348 and by all major browsers now https://caniuse.com/webp

WebP is a modern image format that provides superior lossless and lossy compression for images on the web.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

https://developers.google.com/speed/webp

[guillaume-acard]

Would be great to have this feature. I am currently using sharp to compress the screenshot to WebP: sharp(screenshot).webp() but having it natively would be much better and reduce the execution time (would avoid having to perform a webp compression on a jpg/png image).

[jaydenseric]

We would really love to be able to take WebP format screenshots in our system, for the reduced file size. For a smaller CPU/memory hit, ideally the WebP could be generated by the browser as the screenshot it taken instead of us having to convert a PNG in application code.

I tried looking into where in the code the formats are applied when screenshotting, and it seems here (via search results)…

Chromium:

https://github.com/microsoft/playwright/blob/62ae71f96a7932d14dda20edd659b3edd156aa6d/packages/playwright-core/src/server/chromium/crPage.ts#L298

Chromium is capable of taking WebP screenshots:

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot

So no blocker there.

Webkit:

https://github.com/microsoft/playwright/blob/62ae71f96a7932d14dda20edd659b3edd156aa6d/packages/playwright-core/src/server/webkit/wkPage.ts#L856-L860

Interestingly, the Playwright approach for Webkit is to screenshot a PNG (is that the only format Webkit supports?) and then after (if JPEG is requested in options) convert the format to a JPEG. This means people selecting JPEG thinking they can be more efficient would be unaware it might double? the hardware used to generate their screenshot. If Playwright is already happy with the approach of converting PNG screenshots on the fly to other formats, then there is no limit to doing so for WebP for all the browsers that don't support WebP screenshots natively, and remove the conversion process once they do in the future.

Firefox:

https://github.com/microsoft/playwright/blob/62ae71f96a7932d14dda20edd659b3edd156aa6d/packages/playwright-core/src/server/firefox/ffPage.ts#L438-L443

I couldn't find docs for the Firefox dev tools protocol. It seems that Firefox is not able to take a WebP screenshot, but I'm not sure if this is just a UI limitation or an underlying limitation on how Firefox screenshots under the hood. Chat GPT seems confident Firefox can't screenshot WebP, and this Bugzilla issue doesn't inspire confidence:

https://bugzilla.mozilla.org/show_bug.cgi?id=1742565

WebP support might need to be added to Firefox to avoid Playwright having to do a format conversion after taking the screenshot.

[erickguan]

I tried WebP screenshot from Chrome by: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot=/tmp/screen.webp https://google.com

It seems that Chrome generates a lossy webp screenshot while PNG is lossless. I am not sure how lossy format will impact the pixel matcher use case.

> webpinfo /tmp/screen.webp

File: /tmp/screen.webp
RIFF HEADER:
  File size:  61494
Chunk VP8X at offset     12, length     18
  ICCP: 1
  Alpha: 0
  EXIF: 0
  XMP: 0
  Animation: 0
  Canvas size 1200 x 1284
Chunk ICCP at offset     30, length    464
Chunk VP8  at offset    494, length  61000
  Width: 1200
  Height: 1284
  Alpha: 0
  Animation: 0
  Format: Lossy (1)
No error detected.