Chrome Screenshot Best Practices
Scannednpx machina-cli add skill jrlprost/claude-chrome-mcp-screenshot-fixer/screenshot-best-practices --openclawChrome Screenshot Best Practices
The Retina/HiDPI Display Problem
On Retina/HiDPI displays (common on Mac and many modern monitors), Chrome DevTools captures screenshots at the device pixel ratio (usually 2x). This means:
- A 2560x1664 logical viewport produces a 5120x3328 pixel screenshot
- These oversized images waste context tokens
- They may exceed size limits or be truncated by Claude
The Solution: Resize Before Screenshot
Always resize the page before taking a screenshot:
1. Call mcp__chrome-devtools__resize_page with width: 1280, height: 800
2. Then call mcp__chrome-devtools__take_screenshot
This produces screenshots at 2560x1600 pixels (2x of 1280x800), which is manageable.
Recommended Viewport Sizes
| Use Case | Width | Height | Result (2x) |
|---|---|---|---|
| Standard desktop | 1280 | 800 | 2560x1600 |
| Smaller desktop | 1024 | 768 | 2048x1536 |
| Mobile (portrait) | 375 | 812 | 750x1624 |
| Mobile (landscape) | 812 | 375 | 1624x750 |
| Tablet (portrait) | 768 | 1024 | 1536x2048 |
| Tablet (landscape) | 1024 | 768 | 2048x1536 |
Full Page Screenshots
For full-page screenshots (fullPage: true), the height doesn't matter as much since the entire scrollable content is captured. Keep the width reasonable:
// Resize first
mcp__chrome-devtools__resize_page({ width: 1280, height: 800 })
// Then capture full page
mcp__chrome-devtools__take_screenshot({ fullPage: true })
Element Screenshots
When capturing a specific element by uid, the viewport size still affects the element's rendering. Resize to ensure consistent results:
// Resize first
mcp__chrome-devtools__resize_page({ width: 1280, height: 800 })
// Then capture element
mcp__chrome-devtools__take_screenshot({ uid: "element-uid" })
Quick Reference
Before ANY screenshot with Chrome DevTools MCP:
mcp__chrome-devtools__resize_page({ width: 1280, height: 800 })mcp__chrome-devtools__take_screenshot()
This ensures consistent, reasonably-sized screenshots regardless of the host display's pixel density.
Why This Matters
- Token efficiency: Smaller images use fewer tokens in Claude's context
- Reliability: Prevents truncation or rejection of oversized images
- Consistency: Same viewport size = reproducible screenshots across different machines
- Performance: Smaller images process faster
Source
git clone https://github.com/jrlprost/claude-chrome-mcp-screenshot-fixer/blob/main/plugin/skills/screenshot-best-practices/SKILL.mdView on GitHub Overview
Guides you to capture consistent Chrome DevTools MCP screenshots on Retina/HiDPI displays by resizing the page before capture. It explains why oversized images waste tokens and how to pick viewport sizes for desktop, mobile, and tablet, plus full-page and element captures.
How This Skill Works
On HiDPI displays Chrome DevTools captures at the device pixel ratio. The practice is to resize the page first (e.g., to 1280x800) so the resulting screenshot is 2560x1600, a manageable size. For full-page or element captures, you resize first and then apply fullPage or uid options to ensure consistent rendering.
When to Use It
- You’re taking Chrome DevTools MCP screenshots on Retina/HiDPI displays and need correct scale.
- You want to avoid oversized images that waste context tokens in Claude and risk truncation.
- You’re capturing standard desktop content and want a repeatable 2560x1600 result from a 1280x800 resize.
- You’re doing full-page screenshots and want a reasonable width before capture (fullPage: true).
- You’re capturing a specific element (uid) and need consistent rendering across runs.
Quick Start
- Step 1: mcp__chrome-devtools__resize_page({ width: 1280, height: 800 })
- Step 2: mcp__chrome-devtools__take_screenshot()
- Step 3: Optional - for full-page use mcp__chrome-devtools__take_screenshot({ fullPage: true }) or for an element use mcp__chrome-devtools__take_screenshot({ uid: 'element-uid' })
Best Practices
- Always call mcp__chrome-devtools__resize_page({ width: 1280, height: 800 }) before any capture.
- Use the 2x result by resizing to 1280x800 to obtain 2560x1600 screenshots, which are manageable.
- Refer to the recommended viewport sizes for standard desktop, mobile, and tablet use cases.
- For full-page screenshots, resize first and then capture with fullPage: true.
- For element screenshots, resize first to ensure consistent rendering of the targeted element.
Example Use Cases
- Desktop homepage: resize to 1280x800, then take_screenshot to produce a 2560x1600 image.
- Mobile portrait: resize to 375x812, then capture to yield 750x1624 for a mobile preview.
- Element capture: resize to 1280x800, then take_screenshot({ uid: 'header' }) for consistent header rendering.
- Full-page capture: resize to 1280x800, then take_screenshot({ fullPage: true }) for the entire document.
- Tablet landscape: resize to 1024x768, resulting in 2048x1536 when captured.
