Placeholder Image Generator
runs in your browserMake a placeholder image of any size with your colours and text: download PNG, JPEG, WebP or SVG, or copy it as a data URI with nothing to host.
Settings
Preview
1200 × 630 · 40:21 · 0.76 MP
Inline
458 charactersdata:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%22630%22%20viewBox=%220%200%201200%20630%22%3E%3Crect%20width=%221200%22%20height=%22630%22%20fill=%22%23dddddd%22/%3E%3Ctext%20x=%22600%22%20y=%22315%22%20fill=%22%23555555%22%20font-family=%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size=%22177.77%22%20text-anchor=%22middle%22%20dominant-baseline=%22central%22%3E1200%20%C3%97%20630%3C/text%3E%3C/svg%3E
Paste it where an image URL goes; the placeholder travels inside the page, with no file to host.
SVG
317 bytes<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630"> <rect width="1200" height="630" fill="#dddddd"/> <text x="600" y="315" fill="#555555" font-family="Arial, Helvetica, sans-serif" font-size="177.77" text-anchor="middle" dominant-baseline="central">1200 × 630</text> </svg>
about this tool
What it makes
A box of the size you ask for, filled with a colour, with a line of text in
the middle. Leave the text blank and it reads the size, such as
1200 × 630, which is what a mockup usually wants to say. A wireframe cross
from corner to corner marks the box as a stand-in, the way design sketches
do, cut away around the text so the lines never run through it, on a
transparent background as much as a filled one.
Colours can be written as hex such as #ddd, a name such as
rebeccapurple, or rgb(), hsl(), oklch() and the other colour
functions. One with transparency, such as #00000080, keeps it, and
transparent or a blank background leaves the image see-through.
Pick a preset for the common sizes, or type any size up to 10,000 pixels a
side. A size pasted whole, such as 1200x630, fills both fields, and the
swap button turns landscape into portrait.
Three ways to use it
Download a PNG, JPEG, WebP or SVG named after its size, such as
placeholder-1200x630.png, for a design file, a CMS that wants a real image,
or a test that needs a file of known dimensions.
Copy it inline as a data URI, an <img> tag with its width and height,
or a CSS background-image. The SVG then lives inside the page: no file to
host, no request to a placeholder service, and nothing that breaks when that
service changes. A plain placeholder is well under a kilobyte.
Copy the SVG itself, to paste into a component or edit by hand.
How it is worked out
The SVG is written first, and everything else comes from it: the preview shows it, the data URI encodes it, and the PNG, JPEG and WebP are made by drawing it onto a canvas at its full size. So the file always matches what you saw.
Fitted text fills 80% of the width, but no more than 30% of the height, so a long word in a narrow box shrinks and a short one in a wide banner does not tower over it. The page measures the text with the fonts it names; set a text size to override it.
The data URI is percent-encoded so it works wherever a URL goes: in an
attribute with either kind of quote, in a CSS url() with or without quotes,
in srcset and in Markdown. Letters and digits stay as they are, and of the
symbols only -, _, ., =, :, / and ;, which are safe in all of
those and keep the attribute names readable.
Limits
The text is one line of up to 80 characters, in a sans, serif or monospace face from your system, so the letters can differ slightly on another machine: a PNG fixes them as you saw them, while an SVG is drawn with the viewer's fonts. PNG, JPEG and WebP stop at 16,777,216 pixels (4096 × 4096), the largest canvas Safari on an iPhone or iPad will draw; desktop browsers allow more, but a file that cannot be made on a phone is not much use. SVG has no such limit. JPEG has no transparency, so a placeholder that is not fully opaque gets white behind it there. Nothing leaves the page.
A placeholder saved as SVG can be turned into a PNG at another scale with SVG to image, and a real photo cut to the same size with image resize & crop.
questions
- Why use a data URI instead of a placeholder image service?
- A service URL is a request to someone else’s server every time the page loads: it slows the page, it tells that server who is looking, and the image vanishes if the service changes or shuts down. A data URI carries the SVG inside the page itself, so the mockup keeps working offline and for as long as the page exists. A plain placeholder is well under a kilobyte.
- Which formats can I download?
- PNG, JPEG, WebP and SVG. All four are drawn from the same SVG, so they match the preview. PNG, WebP and SVG keep a transparent or see-through background; JPEG has no transparency, so it gets white behind it. WebP needs a browser that can encode it, and the page says so if yours cannot.
- Is there a size limit?
- Each side can be up to 10,000 pixels. PNG, JPEG and WebP stop at 16,777,216 pixels, which is 4096 × 4096, because that is the largest canvas Safari on an iPhone or iPad will draw on; desktop browsers allow more, but a file that cannot be made on a phone is not much use. SVG has no such limit, since it is a description rather than pixels, and the preview and the data URI work at any size.
- What sizes are the presets?
- The common ones a layout or an ad slot asks for: 1200 × 630 for a social share card, 1920 × 1080 and 1280 × 720 for video frames, 1080 × 1080, 1080 × 1350 and 1080 × 1920 for square, portrait and story posts, 1500 × 500 for a profile header, the 300 × 250, 728 × 90 and 160 × 600 ad units, and two square avatar and thumbnail sizes. Any other size can be typed, or pasted as 1200x630.
- Is anything uploaded?
- No. The SVG is written in your browser and the PNG, JPEG and WebP files are drawn on a canvas in the page. Nothing is sent anywhere and nothing is kept.