Placeholder Image Generator

About the Placeholder Image Tool

This placeholder image tool generates instant placeholder graphics in any dimension and color, live in your browser — or as URL parameters you can drop directly into HTML, CSS, or design mockups. No account, no upload, nothing tracked.

Placeholder images are scaffolding for design: they hold the exact size and aspect ratio a final asset will occupy so layouts can be built before photography exists. Doing that well is pure geometry.

Dimensions, Aspect Ratios, and Common Sizes

An image's aspect ratio is width ÷ height. Standard ratios anchor most layouts: 16:9 (1.78) for video and hero banners, 4:3 (1.33) for classic content, 1:1 for avatars and social squares, 3:2 (1.5) for photography. The table lists exact pixel dimensions used across the web.

When a design calls for a custom ratio, multiply the target height by the ratio to get width: a 16:9 hero 400 pixels tall is 711 pixels wide (400 × 1.778 = 711.1). Conversely, a fixed width of 1200 at 16:9 implies 675 pixels tall (1200 ÷ 1.778 = 675.0).

Common Placeholder Dimensions

These exact dimensions cover the majority of layout slots in modern responsive design, from Open Graph cards to hero images. Width ÷ height verifies each ratio.

Retina/HiDPI builds double pixel dimensions at the same CSS size: a 1200×675 slot serves crisply with a 2400×1350 asset at 2× device pixel ratio. Placeholder images make that distinction visible while layout work is in progress.

Using Placeholders in HTML and CSS

Direct URL: a service-style URL with width and height in the path renders an exact-size image — . Always include the width and height attributes even with placeholders: browsers reserve layout space and prevent content shift, a measurable Core Web Vitals factor (CLS).

In CSS, placeholders slot into background-image or object-fit contexts: object-fit: cover crops an image to fill its box while preserving ratio, and object-fit: contain letterboxes instead. Testing both with placeholders reveals how real photography will behave once it arrives.

From Placeholder to Production

A disciplined workflow marks every placeholder with its final asset specification — dimensions, ratio, subject, and safe-area margins for text overlay. When photography lands, matching the spec exactly means no layout surprises.

Performance targets to keep in mind while scaffolding: hero images compressed to a few hundred kilobytes, content images lazy-loaded with loading='lazy', and modern formats (WebP/AVIF) served with fallbacks. Placeholders keep layout stable while those optimizations are wired up.

Responsive Images and Layout Stability

Modern layout is fluid, so placeholders should reflect real responsive behavior: use srcset to offer 1× and 2× variants, and sizes to describe the slot's width at each breakpoint. A hero that spans full width on mobile and 60% on desktop needs differently sized assets per breakpoint, and placeholders make those slots explicit before content exists.

Aspect-ratio boxes are the modern CSS solution for reserving space: setting aspect-ratio: 16/9 on a container with width 100% reserves the height perfectly, no padding hacks required. A placeholder that matches the container's ratio verifies the reservation works — zero layout shift when the real image swaps in. For design handoff, annotate every placeholder with its slot spec: ratio, pixel range, focal point, and whether text will overlay it, since text-over-image slots need low-busy centers and a darkening gradient specified up front. Photography that misses those constraints reshoots expensively; a placeholder is the cheapest place to catch the mismatch.

Beyond static slots, placeholders shine in the trickiest responsive cases: art direction with and multiple crops per breakpoint, intrinsic versus extrinsic sizing debates, and fluid typography layouts where an image's ratio must hold as everything around it scales. A placeholder sized to each breakpoint's true ratio exposes croppable regions before a single photo is commissioned — and a placeholder at the wrong ratio is a five-second fix, while production photography at the wrong ratio is a reshoot.

Frequently Asked Questions

What size should a placeholder image be?

Match the exact pixel dimensions of the final asset slot: width, height, and aspect ratio should be identical so layout doesn't shift when real images arrive. Common slots include 1200×675 (16:9 hero) and 1200×630 (social preview).

What is the aspect ratio of 1920x1080?

1920 ÷ 1080 = 1.78, the 16:9 ratio — the standard for video and widescreen heroes. Other anchors: 4:3 = 1.33, 3:2 = 1.5, and 1:1 square.

How do I calculate image dimensions from an aspect ratio?

Multiply the known side by the ratio: at 16:9 (1.778), height × 1.778 gives width, and width ÷ 1.778 gives height. A 400-pixel-tall hero at 16:9 is 711 pixels wide.

Why include width and height attributes on images?

Browsers use them to reserve layout space before the image loads, preventing cumulative layout shift (CLS) — a Core Web Vitals metric that affects both UX and search ranking. This applies to placeholders and final images alike.

How do HiDPI (Retina) displays affect image sizes?

Serve 2× pixel dimensions for the same CSS size: a 600×400 CSS slot needs a 1200×800 asset for sharp rendering on 2× screens. Use srcset to let the browser pick the right resolution.