Placeholder Image Generator

Any size, labelled, and no request to anyone.

Any size, labelled, and no request to anyone.

How to use it

  1. Set the size. Any dimensions up to 5000 pixels a side.
  2. Label it, or do not. Left empty it labels itself with its own dimensions, which is usually what you want.
  3. Download the SVG. Sharp at any size, and a fraction of the bytes of a PNG.

When you would use this

Placeholder images are usually pulled from a service, which works and quietly costs you something: every page view during development makes a request to someone else's server, that request sits on your critical path, and that server ends up with a log of what you are building and when. This generates the file in your browser instead. Download it once and there is nothing to fetch afterwards. SVG is the right format here for the same reason it is right for icons. The image is a rectangle and a line of text, so it compresses to a few hundred bytes, it stays sharp at any zoom or pixel density, and it never needs a second version for a retina screen. Left without a label it writes its own dimensions, which is what makes a placeholder useful in a layout: you can see at a glance which slot is which. The text is sized against the shorter side, so a wide banner and a small square both come out readable.

Questions

Why SVG rather than a PNG?
Because it is a rectangle and some text. The SVG is a few hundred bytes, stays sharp at any zoom level, and does not need regenerating for a retina screen. A PNG of the same thing is tens of kilobytes and fixed to one resolution.
How is this different from a placeholder service?
A service means every page view fetches an image from someone else's server, which is a request on your critical path and a record of your development on theirs. This generates the file once, here, and after that there is nothing to fetch.
Will the label always fit?
The text is sized against the shorter side, so a wide banner keeps a sensible label rather than one stretched across it, and a very small image keeps text large enough to read rather than shrinking to nothing.