What's the difference between SVG, PNG, and JPEG output?

SVG is vector — infinitely scalable and tiny in file size, perfect for inlining in HTML or CSS backgrounds. PNG is a raster format with lossless compression and transparency support. JPEG is raster with lossy compression — smaller file sizes for photographs but no transparency. For placeholders specifically, SVG is almost always the right choice unless your platform doesn't accept SVG (some legacy CMS systems, social media uploads).

How is this different from placeholder.com or via.placeholder?

Those services generate images on a remote server when you load the URL — they require network requests and they can go down. This tool generates images locally in your browser. You can paste the SVG inline, download the file, and use it offline. There's also no analytics or referrer leakage — those services log every request to their domain.

Why does my downloaded PNG look blurry?

PNG and JPEG export goes through a Canvas raster step. If your browser zoom is set to non-100% or you're on a high-DPI screen, the raster size may differ from your specified pixel dimensions. The exported file is always at the dimensions you set, but on-screen rendering may scale it. SVG export is unaffected because it remains vector.

Can I use these images commercially?

Yes — they're plain rectangles with text generated by your browser. There's no copyright on simple geometric output and you don't need to credit anyone. Use them in mockups, prototypes, presentation slides, design systems, alt-text fillers, anywhere you need a placeholder. The tool itself is free under MIT-style terms; the images you generate belong to you.

Why is the font system-ui instead of a custom font?

system-ui falls back to the operating system's UI font — San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android. This keeps the SVG file small (no embedded font), and the placeholder reads naturally on every device. Custom fonts would either need to be embedded (huge file size) or referenced externally (defeats the offline / inline use case).

Placeholder Image Generator

Create custom placeholder images at any size, color, and label. Download as SVG, PNG, or JPEG — all in your browser.

Common sizes

Width (px)

Height (px)

Background

Text color

Custom text

Font size: 48px

Format

Preview

800 × 600 (SVG)

SVG Source

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
  <rect width="100%" height="100%" fill="#e2e8f0"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#475569" font-family="system-ui, -apple-system, sans-serif" font-size="48" font-weight="600">800 × 600</text>
</svg>

How to Use

Create custom placeholder images at any size, color, and label. Download as SVG, PNG, or JPEG — all in your browser.

1Pick a preset size (square, banner, hero, OG, etc.) or type custom width and height in pixels.
2Choose background and text colors — defaults to a neutral gray that works as a stand-in for any UI.
3Type custom label text or leave it blank to auto-show the dimensions (e.g., 800 × 600).
4Pick the output format — SVG for inlining, PNG for transparency, JPEG for smaller file size.
5Click 'Download' to save the file, or 'Copy SVG' to grab the markup for inline use in HTML or CSS.

Key Features

Six common-size presets including OG (1200×630), hero (1600×900), avatar (256×256)
Three export formats — vector SVG, lossless PNG, compressed JPEG (92% quality)
Custom text and font size — leave blank to auto-display dimensions
Color picker plus hex input for both background and foreground — match any brand palette
Generated entirely in your browser — no requests to placeholder.com or other third-party services

Frequently Asked Questions

Learn More

Placeholder Images in 2026 — When to Inline SVG and When to Just Download a PNG