feat: add default screenshot format configuration and update related tools

Author: marcandreuf

README.md

@@ -383,6 +383,12 @@ The Chrome DevTools MCP server supports the following configuration option:
   - **Type:** boolean
   - **Default:** `true`
 
+- **`--screenshot-format`**
+  Default image format for screenshots. Options: png, jpeg, webp. Default is jpeg.
+  - **Type:** string
+  - **Choices:** `png`, `jpeg`, `webp`
+  - **Default:** `jpeg`
+
 <!-- END AUTO GENERATED OPTIONS -->
 
 Pass them via the `args` property in the JSON configuration. For example:
@@ -424,6 +430,29 @@ You can connect directly to a Chrome WebSocket endpoint and include custom heade
 
 To get the WebSocket endpoint from a running Chrome instance, visit `http://127.0.0.1:9222/json/version` and look for the `webSocketDebuggerUrl` field.
 
+### Configuring default screenshot format
+
+You can set a default image format for all screenshots using the `--screenshot-format` option. The default is JPEG. You can change it to PNG or WebP if needed:
+
+```json
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": [
+        "chrome-devtools-mcp@latest",
+        "--screenshot-format=png"
+      ]
+    }
+  }
+}
+```
+
+When configured, the `take_screenshot` tool will use this format by default unless explicitly overridden by passing a `format` parameter. Supported formats are `png`, `jpeg`, and `webp`.
+
+> [!TIP]
+> JPEG is the default format as it typically produces smaller file sizes than PNG, which improves performance when working with screenshots. WebP offers the best compression while maintaining quality. Use PNG if you need lossless screenshots.
+
 You can also run `npx chrome-devtools-mcp@latest --help` to see all available configuration options.
 
 ## Concepts

src/McpContext.ts

@@ -49,6 +49,8 @@ interface McpContextOptions {
   experimentalDevToolsDebugging: boolean;
   // Whether all page-like targets are exposed as pages.
   experimentalIncludeAllPages?: boolean;
+  // Default screenshot format.
+  screenshotFormat?: 'png' | 'jpeg' | 'webp';
 }
 
 const DEFAULT_TIMEOUT = 5_000;
@@ -292,6 +294,10 @@ export class McpContext implements Context {
     this.#dialog = undefined;
   }
 
+  getDefaultScreenshotFormat(): 'png' | 'jpeg' | 'webp' {
+    return this.#options.screenshotFormat ?? 'jpeg';
+  }
+
   getSelectedPage(): Page {
     const page = this.#selectedPage;
     if (!page) {

src/cli.ts

@@ -160,6 +160,13 @@ export const cliOptions = {
     default: true,
     describe: 'Set to false to exclude tools related to network.',
   },
+  screenshotFormat: {
+    type: 'string',
+    describe:
+      'Default image format for screenshots. Options: png, jpeg, webp. Default is png.',
+    choices: ['png', 'jpeg', 'webp'] as const,
+    default: 'png',
+  },
 } satisfies Record<string, YargsOptions>;
 
 export function parseArguments(version: string, argv = process.argv) {
@@ -212,6 +219,10 @@ export function parseArguments(version: string, argv = process.argv) {
         'Disable tools in the performance category',
       ],
       ['$0 --no-category-network', 'Disable tools in the network category'],
+      [
+        '$0 --screenshot-format jpeg',
+        'Use JPEG as the default screenshot format',
+      ],
     ]);
 
   return yargsInstance

src/main.ts

@@ -86,6 +86,7 @@ async function getContext(): Promise<McpContext> {
     context = await McpContext.from(browser, logger, {
       experimentalDevToolsDebugging: devtools,
       experimentalIncludeAllPages: args.experimentalIncludeAllPages,
+      screenshotFormat: args.screenshotFormat as 'png' | 'jpeg' | 'webp',
     });
   }
   return context;

src/tools/ToolDefinition.ts

@@ -120,6 +120,10 @@ export type Context = Readonly<{
    * Returns a reqid for a cdpRequestId.
    */
   resolveCdpElementId(cdpBackendNodeId: number): string | undefined;
+  /**
+   * Returns the configured default screenshot format.
+   */
+  getDefaultScreenshotFormat(): 'png' | 'jpeg' | 'webp';
 }>;
 
 export function defineTool<Schema extends zod.ZodRawShape>(

src/tools/screenshot.ts

@@ -22,8 +22,8 @@ export const screenshot = defineTool({
   schema: {
     format: zod
       .enum(['png', 'jpeg', 'webp'])
-      .default('png')
-      .describe('Type of format to save the screenshot as. Default is "png"'),
+      .optional()
+      .describe('Type of format to save the screenshot as. If not specified, uses the configured default format.'),
     quality: zod
       .number()
       .min(0)
@@ -63,8 +63,11 @@ export const screenshot = defineTool({
       pageOrHandle = context.getSelectedPage();
     }
 
+    // Use configured default format if not specified in request
+    const format = request.params.format ?? context.getDefaultScreenshotFormat();
+
     const screenshot = await pageOrHandle.screenshot({
-      type: request.params.format,
+      type: format,
       fullPage: request.params.fullPage,
       quality: request.params.quality,
       optimizeForSpeed: true, // Bonus: optimize encoding for speed
@@ -87,6 +90,7 @@ export const screenshot = defineTool({
     // Detect the actual format of the screenshot data
     // Puppeteer may not always return the requested format
     const actualFormat = detectImageFormat(screenshot);
+    console.error(`[DEBUG] Requested format: ${format}, Detected format: ${actualFormat}`);
 
     if (request.params.filePath) {
       const file = await context.saveFile(screenshot, request.params.filePath);