Clean placeholders, built instantly.

You need quick image blocks for your website layout? We created AltImg to help you make clean placeholders in seconds. It runs in your browser or right inside your AI coding tool.

Settings

Live Output
Placeholder preview

API Reference

You can fetch images by changing the URL paths. The syntax is clear and straightforward.

Base Path Patterns

  • /{size} - Creates a square image. For example, /300 creates a 300x300 image.
  • /{width}x{height} - Custom dimensions. For example, /600x400
  • /{width}x{height}/{bg_color} - Custom background colors. For example, /600x400/3b82f6
  • /{width}x{height}/{bg_color}/{text_color} - Custom background and text colors. For example, /600x400/3b82f6/ffffff

Query Parameters

  • text - Change the display wording. For example, ?text=Product+One
  • font - Select your preferred style. Options include sans, serif, mono, playfair, and roboto.
  • font_size - Set the font size manually in pixels. For example, ?font_size=20
  • format - Set the output file format: svg, png, jpg, webp. For example, ?format=png

Feature Comparison

Feature AltImg (Our Platform) Traditional Services (e.g. Placehold.co)
Model Context Protocol (MCP) Yes (Native Web/SSE Server built-in) No (Requires manual downloads)
Vector Rendering Format SVG (Perfect resolution scaling, lightweight) SVG / PNG
Raster GD Conversion PNG, JPEG, WebP, GIF PNG, JPEG, WebP, GIF
Data URI Payload Output Yes (Base64 encoding outputs for AI tools) No (Public URL links only)
System Font Matching Sans, Serif, Monospace, Playfair, Roboto Limited font configurations

AI Coding Agent Connection (MCP)

We also made an MCP server. This lets your AI coder make images for you when you ask it to code. You can connect it with web tools like Antigravity, Claude, and other systems.

Connecting to the Server (Web SSE)

HTTP Web SSE Endpoint URL:

For Antigravity:

Add this block to your Antigravity MCP settings to connect directly over HTTP:

{
  "mcpServers": {
    "altimg": {
      "serverUrl": "",
      "headers": {
        "Accept": "application/json"
      }
    }
  }
}

For Claude Desktop:

Claude Desktop uses a helper command to connect to SSE servers. Add this configuration to your settings file (claude_desktop_config.json):

{
  "mcpServers": {
    "altimg": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/client-sse", ""]
    }
  }
}

Frequently Asked Questions

What is AltImg?

AltImg is a fast placeholder image engine built for web developers. It makes vector SVG and raster image blocks on the fly to help layout responsive web designs. You can configure dimensions, colors, formats, and text styles via clear URL parameters.

How does the Model Context Protocol (MCP) server connection work?

AltImg includes a built-in MCP server that communicates over SSE (Server-Sent Events). When you connect AltImg to an AI coding assistant like Antigravity or Claude, the AI agent can generate custom mock placeholder images, resize local files, and output base64 data payloads. This saves you from searching for mock assets.

Can I use AltImg to make responsive image breakpoints?

Yes, the built-in Resize Tool lets you upload an image or paste a URL to generate responsive sizes. It outputs multiple sizes and base64-encoded blur-up (LQIP) placeholders. You get ready-to-use HTML <picture> and srcset code snippets to paste straight into your project files.

Which formats and fonts are supported?

You can output SVG (vector), PNG, JPG, and WebP formats. Supported fonts include Sans-serif, Serif, Monospace, Playfair Display, and Roboto. You can also specify custom font sizes to fit your design layout.

Is AltImg free to use?

Yes, AltImg is free and open source. You can run it locally on your development machine or connect to the hosted service.