# placeimg.dev

> Instant SVG placeholder images by URL. No auth, no API key, no install required.

## Usage

Embed placeholder images anywhere by crafting a URL:

```
https://placeimg.dev/{width}x{height}
https://placeimg.dev/{width}x{height}/{hex-color}
https://placeimg.dev/{size}
```

Max dimensions: 2000×2000px. Response: `image/svg+xml` with `Cache-Control: public, max-age=604800, immutable`.

## Query Parameters

| Param       | Type              | Description                                     |
|-------------|-------------------|-------------------------------------------------|
| `text`      | string            | Centered label text (URL-encoded)               |
| `textColor` | 6-digit hex       | Text color, no `#` prefix (default: `222222`)   |
| `gradient`  | hex,hex[,hex...]  | Linear gradient from left to right              |

## Examples

```
# Basic
https://placeimg.dev/400x300
https://placeimg.dev/400

# With color
https://placeimg.dev/400x300/4F46E5

# With text
https://placeimg.dev/400x300?text=Hero+Image

# With text and custom colors
https://placeimg.dev/1200x630/111111?text=Open+Graph&textColor=ffffff

# Gradient background
https://placeimg.dev/800x450?gradient=FF5733,4F46E5&text=Gradient

# Common sizes
https://placeimg.dev/1200x630   # Open Graph / social preview
https://placeimg.dev/1920x1080  # Full HD
https://placeimg.dev/800x600    # Standard
https://placeimg.dev/300x300    # Square thumbnail
```

## React / JSX

```jsx
<img src="https://placeimg.dev/400x300/4F46E5" alt="placeholder" width={400} height={300} />
```

## HTML

```html
<img src="https://placeimg.dev/400x300" alt="placeholder" width="400" height="300">
```

## npm Package

A React component is also available:

```bash
npm install react-svg-placeholder-ts
```

https://www.npmjs.com/package/react-svg-placeholder-ts