Placeholder Image Generator
Generate custom placeholder images as SVG, PNG, JPEG, or WebP with 25+ presets for social media, ads, and screens.
How to Use
Create custom placeholder images for mockups, wireframes, and development in seconds. Everything runs in your browser — no server uploads.
- Set Dimensions: Enter width and height manually (1–4000px), or click a preset category (Social Media, Ad Sizes, Screen Sizes, Common) to pick from 25+ standard sizes like Instagram Post, YouTube Thumbnail, or Medium Rectangle.
- Choose Background: Pick a solid color, or switch to linear/radial gradient mode and set two colors plus direction angle.
- Customize Text: Leave blank for auto "W × H" text, or type custom text. Adjust font, color, and size (auto-scales by default).
- Select Format: SVG for scalable vector output (smallest file), PNG for lossless raster, JPEG for compressed, or WebP for modern browsers. Enable 2x/3x retina for HiDPI displays.
- Export: Download the image file, or copy the SVG code, data URI, HTML
<img>tag, CSS background, or Markdown syntax.
About This Tool
Why Placeholder Images Matter
Placeholder images are essential during the design and development workflow. They let designers create realistic mockups before final assets are ready, help developers build responsive layouts with correctly sized images, and allow QA teams to test image-heavy pages without waiting for content. Using properly sized placeholders — rather than stretching a single image — reveals layout issues early and ensures accurate rendering across devices.
SVG vs Raster Placeholders
SVG placeholders are typically under 500 bytes regardless of declared dimensions because they describe shapes mathematically rather than storing pixels. A 1920×1080 SVG placeholder weighs the same as a 100×100 one. This makes SVG ideal for development — your page loads instantly even with dozens of placeholders. Raster formats (PNG, JPEG, WebP) generate actual pixel data, producing larger files that match real-world image weights — useful when you need to test loading performance or lazy-loading behavior.
Retina and HiDPI Support
Modern displays (Apple Retina, most Android phones, 4K monitors) pack 2x or 3x the pixel density of standard screens. When serving raster images, you need 2x or 3x pixel dimensions to avoid blurriness. This generator's retina toggle automatically multiplies the pixel output — a 400×300 placeholder at 2x generates an 800×600 image file that you display at 400×300 CSS pixels for crystal-clear rendering. SVG placeholders are resolution-independent and don't need retina multipliers.
Data URI for Inline Embedding
The data URI output encodes the entire SVG as a base64 string that you can paste directly into an src attribute, CSS background-image, or Markdown image syntax. This eliminates the need for a separate image file — the placeholder is embedded in your code. Data URIs are particularly useful for email templates, single-file prototypes, and Storybook stories where external file references add complexity.
Why Use This Tool
Client-Side Generation
Unlike URL-based services like placeholder.com or dummyimage.com, this generator runs entirely in your browser. Your placeholder settings, custom text, and generated images never leave your machine. There are no API rate limits, no external dependencies, and no privacy concerns. The tool works offline once loaded.
SVG generation uses pure string construction for zero-dependency output. Raster formats use the OffscreenCanvas API with hardware-accelerated rendering. Both approaches produce standards-compliant output that works in every modern browser, email client, and design tool.