<img src="placeholder.png" width="800" height="400" alt="Placeholder">Use width and height attributes to prevent layout shift (CLS)
background: #ccc url('placeholder.svg') center/cover;SVG placeholders are ideal for CSS backgrounds — infinitely scalable
<Image src="/placeholder.png" width={800} height={400} alt="..." />Use Next.js Image component for automatic optimization
<img src="data:image/png;base64,..." alt="Placeholder">Embed small placeholders directly in HTML — no extra HTTP request
| Use Case | Dimensions | Aspect Ratio |
|---|---|---|
| Favicon / Icon | 64 × 64 | 1:1 |
| Avatar / Profile | 150 × 150 | 1:1 |
| Thumbnail | 300 × 200 | 3:2 |
| Blog Feature Image | 1200 × 630 | ~1.9:1 |
| Social Media OG | 1200 × 630 | ~1.9:1 |
| Hero Banner | 1920 × 600 | 16:5 |
| Full HD | 1920 × 1080 | 16:9 |
| Product Photo | 800 × 800 | 1:1 |
Enter the intended width and height or select a size preset, then choose the background and text colors. Leave the text field empty to display the dimensions automatically. The example below uses the default canvas settings and produces the label shown in the preview. Download the PNG when you need an actual image asset for a layout, rather than a URL to an external placeholder service.
Add custom text only after checking that it fits inside the canvas at your chosen font size. Rounded corners and borders affect the generated artwork, not just the surrounding preview. Each dimension is bounded between one and 4096 pixels. The preview may scale down to fit the page, so use the configured dimensions rather than its displayed screen width when checking your exported asset.
Width: 800; height: 400; text: empty
Canvas label: 800 × 400
Download: PNG, 800 × 400 pixels
Placeholder images are used in web development and design to fill image spaces during prototyping, wireframing, and development before final images are ready. They help visualize layouts and test responsive designs.
Yes, all placeholder images generated by this tool are created locally in your browser and are free to use for any purpose, including commercial projects.
You can generate images up to 4096x4096 pixels. For larger sizes, the browser canvas may have limitations depending on your device memory.
You can download placeholder images as PNG (raster format, best for web) or SVG (vector format, infinitely scalable). You can also copy the image as a data URL for inline use in HTML or CSS.
The page scales large previews to fit the available display area. The canvas and PNG export retain the width and height you entered, bounded to 1–4096 pixels per dimension. Check those configured values for layout work; the preview’s visible screen width is not the exported file’s pixel width.