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).

プレースホルダー画像ジェネレーター

任意のサイズ、色、ラベルでカスタムプレースホルダー画像を作成。SVG、PNG、JPEGとしてダウンロードできます — すべてブラウザ内で処理。

よく使うサイズ

幅 (px)

高さ (px)

背景

文字色

カスタムテキスト

フォントサイズ: 48px

フォーマット

プレビュー

800 × 600 (SVG)

SVGソース

<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>

使い方

任意のサイズ、色、ラベルでカスタムプレースホルダー画像を作成。SVG、PNG、JPEGとしてダウンロードできます — すべてブラウザ内で処理。

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.

主な機能

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

よくある質問

詳しく読む

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