How to Generate Placeholder Images (and Why SVG Beats PNG for Wireframes)

The problem: layouts need images before images exist

You are building a product page. The design has a hero image (1200 x 630), three feature cards (400 x 300 each), a user avatar (150 x 150), and a sidebar banner (300 x 600). The real images do not exist yet — they are being shot, designed, or licensed. Without something in those slots, the layout collapses. Empty divs have no height, so the page is a stack of text with no visual structure. You cannot test responsive breakpoints, aspect ratios, or visual hierarchy without content in the boxes.

Placeholder images solve this. A placeholder is a rectangle of the correct dimensions with a label indicating what goes there. It holds the space so the layout works, and it tells the designer what asset is needed. The Placeholder Image Generator creates placeholders in four formats (PNG, JPEG, WebP, SVG) with custom dimensions, colors, patterns, and text labels. It includes presets for social media platforms and responsive breakpoints, a blueprint mode with dimension annotations, and batch generation for multiple sizes at once.

Fastest path

Open the Placeholder Image Generator, enter width and height (or pick a preset from the Common, Social, or Responsive tabs), choose a background style (solid, gradient, pattern, or random), pick an output format, and click Download. For SVG output, the generator produces a text-based SVG file. For raster formats (PNG, JPEG, WebP), it renders to a Canvas element and exports the pixel data. Blueprint mode adds dimension annotations (width, height, and a "W x H" label) on a dark grid background.

SVG vs raster: the format decision

The tool outputs four formats. The choice matters more than you might think.

SVG is a text-based vector format. A placeholder SVG is roughly 300-500 bytes regardless of dimensions — it contains a <rect> element for the background, a <text> element for the label, and nothing else. The file size does not grow with the image dimensions because SVG describes shapes mathematically, not pixel by pixel. An 8000 x 8000 SVG placeholder is the same 300 bytes as a 100 x 100 one. SVG scales infinitely — the same file renders sharply at any display size, from a 16-pixel favicon to a 4K monitor, without pixelation. This makes SVG the correct choice for wireframes, mockups, and any context where the placeholder might be displayed at different sizes.

PNG is a lossless raster format. Every pixel is stored. A 1200 x 630 PNG placeholder is roughly 2-5 KB (solid colors compress well in PNG because the deflate algorithm finds long runs of identical pixels). PNG supports transparency, which matters if the placeholder needs to sit on a non-white background. PNG is the safe default for raster output — lossless, universally supported, no artifacts.

JPEG is a lossy raster format designed for photographs. It uses Discrete Cosine Transform (DCT) compression, which divides the image into 8x8 pixel blocks and approximates each block with a sum of cosine functions. On photographs, this is nearly invisible. On solid-color placeholders, it produces visible artifacts — blocky banding at color boundaries, ringing around text edges, and color shifts. A 1200 x 630 JPEG placeholder at quality 80 shows faint block patterns in what should be a flat color. JPEG does not support transparency. Use JPEG for placeholders only when file size is critical and the visual artifacts do not matter.

WebP is Google's modern format, supported in all current browsers. It supports both lossy and lossless compression, transparency, and typically produces files 25-35 percent smaller than PNG at equivalent quality. For placeholders, lossless WebP gives the same visual quality as PNG with a smaller file. WebP is the right choice for web applications targeting modern browsers.

How raster rendering works: the Canvas 2D API

For PNG, JPEG, and WebP output, the tool renders to an HTML5 Canvas element. The Canvas 2D API draws pixels programmatically:

Solid background: ctx.fillStyle = bgColor; ctx.fillRect(0, 0, w, h); — one rectangle fill, the fastest operation.
Gradient background: ctx.createLinearGradient(0, 0, w, h) creates a gradient object, addColorStop(0, bgColor) and addColorStop(1, bgColor2) define the endpoints, then ctx.fillStyle = gradient; ctx.fillRect(...) fills with the gradient. Radial gradients use createRadialGradient with a center point and radius.
Patterns: stroke loops draw lines or dots at regular intervals. The crosshatch pattern draws vertical lines, horizontal lines, and both diagonal directions with 20-pixel spacing at 15 percent opacity. Dots draw filled circles at each grid intersection. The step size (20 pixels) is fixed — on very large images the pattern is sparse, on very small images it is dense.
Text: ctx.font, ctx.textAlign = 'center', ctx.textBaseline = 'middle', then ctx.fillText(text, w/2, h/2). The font size auto-scales to Math.max(12, Math.min(w, h) / 8) — the smaller dimension divided by 8, with a 12-pixel floor.

After rendering, the canvas is exported via canvas.toDataURL(image/png), canvas.toDataURL(image/jpeg, 0.9), or canvas.toDataURL(image/webp). The data URL is either displayed as an image preview or downloaded as a file.

How SVG generation works: strings, not pixels

SVG output does not use Canvas. The tool builds an SVG string directly:

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
  <rect width="800" height="600" fill="#cccccc"/>
  <text x="400" y="300" font-family="Arial" font-size="75" font-weight="bold"
        fill="#666666" text-anchor="middle" dominant-baseline="central">800 x 600</text>
</svg>

No rendering engine is involved. The string is the file. This means SVG output is instant regardless of dimensions, and the file contains no pixel data — just the geometric description. The SVG includes a border (<rect> with fill="none" stroke="...") which the raster formats do not have, because adding a stroke in Canvas requires a separate ctx.strokeRect call.

The limitation of the SVG output is that it only supports solid backgrounds — no gradients, no patterns, no blueprint mode. Those features use Canvas-specific APIs (createLinearGradient, ctx.stroke loops) that have no SVG equivalent in this tool's generation logic. If you need a gradient placeholder as SVG, you would need to add an <linearGradient> element with <stop> children — the tool does not do this.

The tool includes presets for seven social media platforms. Each platform optimizes for its own display context:

Instagram: 1080 x 1080 for posts (square, 1:1), 1080 x 1920 for stories and reels (vertical, 9:16). Instagram crops non-square posts to square in the feed grid, so square is the safe format.
Facebook: 1200 x 630 for link previews (1.91:1), 820 x 312 for cover photos. Facebook recompresses images to JPEG at upload, so PNG artifacts from Facebook's recompression can appear on sharp edges.
Twitter/X: 1200 x 675 for posts (16:9), 1500 x 500 for headers. Twitter also recompresses to JPEG.
YouTube: 1280 x 720 for thumbnails (16:9), 2560 x 1440 for banners. YouTube thumbnails must be under 2 MB.
LinkedIn: 1200 x 627 for posts, 1584 x 396 for cover photos. LinkedIn's recommended dimensions change occasionally.
Pinterest: 1000 x 1500 for pins (2:3 vertical). Pinterest favors vertical images in its grid layout.
TikTok: 1080 x 1920 (9:16 vertical, same as Instagram stories).

These dimensions are not fixed — platforms adjust them as display technology and UI layouts change. The presets are a starting point, not a permanent spec. Always check the platform's current media requirements for production work.

Responsive breakpoints: testing layouts

The tool includes eight responsive presets matching common device widths: 320px (small phone) through 2560px (4K desktop). These are for testing how layouts respond to different viewport sizes. A placeholder at 320 x 568 shows what content looks like on a small phone. A placeholder at 1920 x 1080 shows the desktop experience.

These breakpoints approximate the Bootstrap and Tailwind defaults, which themselves approximate real device widths. The actual device landscape is fragmented — there are thousands of distinct screen sizes — so these breakpoints are conventions, not ground truth. For thorough responsive testing, use browser DevTools device emulation, not placeholder images. Placeholders show you what asset you need at each breakpoint; they do not test the CSS that makes the layout respond.

Blueprint mode: dimension annotations

Blueprint mode renders a dark blue grid background with white dimension annotations. The top edge shows the width in pixels with arrow endpoints. The left edge shows the height, rotated 90 degrees. The center shows "W x H" in bold monospace. This mode is designed for technical mockups and documentation — when you need to communicate the exact dimensions of each image slot in a design spec.

Blueprint mode uses a two-level grid: a minor grid every 20 pixels and a major grid every 100 pixels, with the major grid drawn at higher contrast. The dimension labels auto-scale: the font size is Math.min(w, h) / 20 for dimension labels and Math.min(w, h) / 8 for the center label, with a 10-pixel floor. On very small placeholders (under 100px), the labels may overlap — blueprint mode is designed for medium to large placeholders.

Gotchas

SVG output only supports solid backgrounds. The gradient, pattern, and blueprint modes use Canvas 2D APIs with no SVG equivalent in the tool's generation logic. If you select SVG with a gradient background, you get a solid fill instead. If you need gradient SVGs, you will have to edit the SVG file manually and add <linearGradient> elements.
JPEG compression artifacts are visible on solid colors. JPEG's DCT compression divides the image into 8x8 blocks and approximates each block. On a flat color, this produces faint block boundaries and color banding. For solid-color placeholders, use PNG or lossless WebP. JPEG is acceptable only when the placeholder will be replaced quickly and the artifacts do not matter.
The pattern step size is fixed at 20 pixels. On a 300x200 placeholder, a 20-pixel grid creates 15 x 10 lines — a reasonable density. On a 4000x3000 placeholder, the same 20-pixel grid creates 200 x 150 lines, which is visually dense and slows rendering. The patterns are designed for small to medium placeholders. For large placeholders, use solid or gradient backgrounds.
Social media platforms recompress your images. Facebook and Twitter convert PNG uploads to JPEG, which can introduce artifacts on sharp edges and text. A placeholder with crisp text that looks perfect on your computer may look slightly blurry after Facebook's recompression. This is not a bug in the tool — it is how the platform processes uploads. For production images, follow each platform's current compression guidelines.
The batch generator uses comma-separated dimensions. Entering "300x200, 600x400, 1200x630" produces three separate placeholders. The parser splits on commas, then splits each entry on "x". Spaces around the x are tolerated. If you enter an invalid format (e.g., "300x" or "x200"), that entry is skipped silently — no error, no placeholder. Check that the number of results matches the number of entries you provided.

Summary

Placeholder images fill layout slots before real assets exist, enabling responsive testing and design communication. The tool generates placeholders in four formats: SVG (vector, 300 bytes, infinitely scalable, solid backgrounds only), PNG (lossless raster, 2-5 KB, supports transparency), JPEG (lossy, smallest files, visible artifacts on solid colors), and WebP (modern, 25-35 percent smaller than PNG).
Raster output uses the Canvas 2D API: fillRect for solid backgrounds, createLinearGradient for gradients, stroke loops for patterns, fillText for labels. SVG output is generated as a text string with <rect> and <text> elements — no rendering engine, instant generation, but limited to solid backgrounds.
Social media presets cover Instagram, Facebook, Twitter, YouTube, LinkedIn, Pinterest, and TikTok with platform-specific dimensions. These dimensions change over time — verify against current platform specs for production work. Responsive presets cover 320px through 2560px for layout testing.
Blueprint mode adds dimension annotations on a grid background for technical mockups. Pattern mode draws crosshatch, dots, stripes, grid, or diagonal lines at a fixed 20-pixel step. Batch mode generates multiple sizes from a comma-separated list.
Use the Placeholder Image Generator for wireframes and mockups, the Image Resizer for resizing real images to match placeholder dimensions, the Image Format Converter for converting between PNG, JPEG, and WebP, and the Favicon Generator for creating website icons.

Related Tools