Back to Directory/Developer Tools

io.github.Bishop81/imagedimensions-mcp

Audit a web page's images: natural vs rendered sizes, oversized detection, and formats.

Developer ToolsJavaScriptv0.1.2

imagedimensions-mcp

An MCP server that audits the images on any public web page — natural vs. rendered dimensions, oversized-image detection, and format breakdown — so AI agents (Claude, Cursor, Windsurf, etc.) can check image performance during development.

Powered by imagedimensions.com. The scan runs server-side, so no local browser or Chrome install is required.

Install / run

// Claude Desktop / any MCP client config
{
  "mcpServers": {
    "imagedimensions": {
      "command": "npx",
      "args": ["-y", "imagedimensions-mcp"]
    }
  }
}

Tool

scan_image_dimensions

ParamTypeDescription
urlstring (required)Public URL of the page to audit.
oversizedThresholdnumber (optional)Area-overshoot ratio to flag as oversized. Default 4 (≈2× per dimension).

Returns a text report plus structured content:

  • total / visible image counts and CSS-background count
  • modern-format share (WebP + AVIF)
  • format breakdown
  • the list of oversized images (natural → rendered, overshoot ratio, format, src)
  • a link to the full visual report on imagedimensions.com

Example agent uses: "Audit the images on https://example.com," "Which images on this page are oversized and hurting LCP?", "What % of this site's images use modern formats?"

Why "oversized" matters

An image downloaded much larger than the box it renders into wastes bandwidth and slows Largest Contentful Paint — the most common image-performance mistake on the web. See the writeup.

Config

  • IMAGEDIMENSIONS_API_BASE — override the API base (default https://imagedimensions.com).

License

MIT

Installation

Source-derived launch command. Check the maintainer’s required arguments and credentials before running:

bash
npx -y imagedimensions-mcp

Set up in your AI client

Merge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.

json
{
  "mcpServers": {
    "io-github-bishop81-imagedimensions-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "imagedimensions-mcp"
      ]
    }
  }
}

Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.

Claude Desktop setup reference

Package

imagedimensions-mcpnpm

Compatible MCP Clients

io.github.Bishop81/imagedimensions-mcp works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.

  • Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect.
  • Cursor~/.cursor/mcp.jsonRestart Cursor for changes to take effect.
  • VS Code.vscode/mcp.jsonReload VS Code window for changes to take effect.
  • Windsurf~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect.
  • Claude Code.mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.

Learn More