[Feature] Save screenshots using `webp` format

[stramel]

Following up on #13385 with a request for only webp since it is already supported by Puppeteer puppeteer/puppeteer#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:

playwright/packages/playwright-core/src/server/chromium/crPage.ts

Line 298 in 62ae71f

const result = await this._mainFrameSession._client.send('Page.captureScreenshot', { format, quality, clip, captureBeyondViewport: !fitsViewport });

Chromium is capable of taking WebP screenshots:

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

So no blocker there.

Webkit:

playwright/packages/playwright-core/src/server/webkit/wkPage.ts

Lines 856 to 860 in 62ae71f

	const result = await this._session.send('Page.snapshotRect', { ...rect, coordinateSystem: documentRect ? 'Page' : 'Viewport', omitDeviceScaleFactor });
	const prefix = 'data:image/png;base64,';
	let buffer = Buffer.from(result.dataURL.substr(prefix.length), 'base64');
	if (format === 'jpeg')
	buffer = jpegjs.encode(PNG.sync.read(buffer), quality).data;

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:

playwright/packages/playwright-core/src/server/firefox/ffPage.ts

Lines 438 to 443 in 62ae71f

	const { data } = await this._session.send('Page.screenshot', {
	mimeType: ('image/' + format) as ('image/png' | 'image/jpeg'),
	clip: documentRect,
	quality,
	omitDeviceScaleFactor: scale === 'css',
	});

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.

[dlecan]

What would be the specs for each browser family?

• Chromium: native: png/jpg/webp/avif
• Firefox: native: png, converted: jpg, throwing error: webp/avif (those would require additional dependencies for the conversion)
• Webkit: native: png/jpeg, throwing error: webp/avif (those would require additional dependencies for the conversion)

[kristaps-aksjonovs]

Are the any idea to implement this?
Because webp could save a lot of storage for bigger projects.

[yury-s]

Will be released in 1.62