Placeholder image generator
Downloadable SVG placeholders at any size, colour and label.
FreeRuns in your browserNo signupUpdated 2026-10-29
SVG placeholders are tiny and stay sharp at any size. Use PNG only where SVG is not accepted.
Preview · 1200 × 630 · 371 B as SVG
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221200%22 height=%22630%22 viewBox=%220 0 1200 630%22 role=%22img%22 aria-label=%221200 %C3%97 630%22%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23e8efff%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-family=%22system-ui%2C -apple-system%2C Segoe UI%2C Roboto%2C sans-serif%22 font-size=%22200.0%22 fill=%22%232f6bff%22%3E1200 %C3%97 630%3C/text%3E%3C/svg%3E" width="1200" height="630" alt="">
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-label="1200 × 630"><rect width="100%" height="100%" fill="#e8efff"/><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif" font-size="200.0" fill="#2f6bff">1200 × 630</text></svg>
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This placeholder image generator makes stand-in images for mock-ups, wireframes and development builds without relying on an outside image service. Set the width, height, background colour, text colour and an optional label, and it draws an SVG with the label in the middle. Download it as SVG or PNG, or copy an img tag with the image embedded as a data URI, so it works offline and never breaks because someone else's server is down.
How to use it
- Choose a preset size, or enter the width and height in pixels.
- Set the background and text colours as hex.
- Type a label, such as "Hero image", or leave it blank to show the dimensions.
- Pick a sans-serif, serif or monospace font.
- Download the SVG or PNG, or copy the img tag into your HTML.
How to read the result
The default is a 1200 × 630 placeholder, the Open Graph size used for link previews on social sites and messaging apps. As an SVG it is 371 bytes. A PNG of the same image is several times larger, and a real photo at that size usually runs to tens of kilobytes, which is why SVG placeholders are a good fit for development builds.
The label size is worked out from the image size and the label length. For 1200 × 630 and the 10-character label "1200 × 630", the text is 200px tall: large enough to read in a thumbnail, small enough to stay inside the frame.
The img tag includes width and height attributes. Keep them when you swap in the real image; they let the browser reserve the right space before the image loads, so the layout does not jump.
Use PNG only where SVG is not accepted, such as some email builders and social preview debuggers. The PNG is drawn from the SVG in your browser at the exact pixel size.
Work out sizes for other ratios with the aspect ratio calculator. For a full build from wireframe to launch, see website design and development.
Questions
Frequently asked.
Why not use an online placeholder image service?
Those services work until they do not. If one goes down, rate-limits you or shuts, every placeholder in your build breaks at once. An SVG data URI lives inside your own code, loads instantly and works offline. It also avoids sending your page addresses to a third party.
What size should a placeholder be?
The same size as the real image it stands in for, so the layout you test is the layout you ship. Common choices are 1200 × 630 for social previews, 1920 × 1080 for full-width hero images and 800 × 800 for product photos.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide