Skip to content

Conversation

Coquinate
Copy link
Contributor

Summary

This PR adds WebP format support to the screenshot tool, providing superior compression compared to JPEG while maintaining image quality.

Problem

Currently, the Chrome DevTools MCP only supports PNG and JPEG formats for screenshots. This leads to:

  • Missing out on WebP's superior compression (25-34% better than JPEG at equivalent quality)
  • Larger file sizes than necessary for AI assistants with image size limits
  • No access to a modern format that offers both better compression and transparency support
  • Bug: saveTemporaryFile always saved files with .png extension regardless of the specified format

Solution

Added WebP as a supported format in the screenshot tool schema and extended the quality parameter to work with WebP (0-100 range, same as JPEG). Also fixed the file extension bug in saveTemporaryFile.

Changes

  • ✅ Added webp to screenshot format enum alongside png and jpeg
  • ✅ Extended quality parameter description to include WebP support
  • ✅ Updated saveTemporaryFile to properly handle WebP MIME type and file extension
  • ✅ Fixed bug where all screenshots were saved as .png regardless of format
  • ✅ Updated type definitions in ToolDefinition.ts for WebP support
  • ✅ Updated documentation via npm run docs

Testing

Puppeteer 24.22.3 (used by this project) has full WebP support including quality parameter. Expected compression improvements based on WebP benchmarks:

  • PNG (baseline): 128 KB
  • JPEG quality 50: 84 KB (34% reduction vs PNG)
  • WebP quality 50: ~60 KB (53% reduction vs PNG, 29% better than JPEG)
  • WebP quality 75: ~90 KB (optimal quality/size balance)

All existing tests pass (131/131).

Impact

This change is backward compatible - WebP is an optional format that doesn't affect existing PNG/JPEG usage. It particularly helps with:

  • AI assistants that have image size limits
  • Reducing bandwidth when capturing many screenshots
  • Providing transparency support with better compression than PNG
  • Offering a modern, universally-supported image format (Chrome, Firefox, Safari, Edge)

Example Usage

// High quality WebP
await take_screenshot({
  format: 'webp',
  quality: 85,
  fullPage: false
})

// Optimized for size
await take_screenshot({
  format: 'webp',
  quality: 50,  // ~29% smaller than JPEG quality 50
  fullPage: true
})

Checklist

  • Code follows conventional commits
  • Documentation updated with npm run docs
  • All tests passing (131/131)
  • Backward compatible
  • Bug fix included (file extension handling)
  • CLA signed (will complete if needed)

Fixes #[issue-number] (if applicable)

@OrKoN OrKoN force-pushed the feat/add-webp-screenshot-support branch from 9b0e51e to 13538ac Compare October 1, 2025 07:30
@OrKoN OrKoN self-requested a review October 1, 2025 07:30
aberemia24 and others added 3 commits October 1, 2025 09:52
Add WebP format to screenshot tool, providing superior compression
compared to JPEG. Also fixes bug where saveTemporaryFile always
saved files with .png extension regardless of format.
@OrKoN OrKoN force-pushed the feat/add-webp-screenshot-support branch from eb09254 to e71f820 Compare October 1, 2025 07:52
@OrKoN OrKoN enabled auto-merge (squash) October 1, 2025 07:52
@OrKoN OrKoN disabled auto-merge October 1, 2025 08:10
@OrKoN OrKoN merged commit 03e02a2 into ChromeDevTools:main Oct 1, 2025
11 of 16 checks passed
OrKoN pushed a commit that referenced this pull request Oct 1, 2025
🤖 I have created a release *beep* *boop*
---


##
[0.6.0](chrome-devtools-mcp-v0.5.1...chrome-devtools-mcp-v0.6.0)
(2025-10-01)


### Features

* **screenshot:** add WebP format support with quality parameter
([#220](#220))
([03e02a2](03e02a2))
* **screenshot:** adds ability to output screenshot to a specific pat…
([#172](#172))
([f030726](f030726))
* support --accept-insecure-certs CLI
([#231](#231))
([efb106d](efb106d))
* support --proxy-server CLI
([#230](#230))
([dfacc75](dfacc75))
* support initial viewport in the CLI
([#229](#229))
([ef61a08](ef61a08))
* support timeouts in wait_for and navigations
([#228](#228))
([36e64d5](36e64d5))


### Bug Fixes

* **network:** show only selected request
([#236](#236))
([73f0aec](73f0aec))
* PageCollector subscribing multiple times
([#241](#241))
([0412878](0412878))
* snapshot does not capture Iframe content
([#217](#217))
([ce356f2](ce356f2)),
closes
[#186](#186)

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants