/01 Generating placeholder images locally
Create placeholder images at any size, colour and label, and download them. Useful for mockups, prototypes and layout tests where you need something of the right dimensions before the real assets exist.
Because the images are generated in your browser and downloaded as files, your prototype does not depend on an external placeholder service staying online.
/02 Why local placeholders beat hotlinked ones
Hotlinking placeholder services means every page load fetches images from someone else's server. Those services go down, get rate-limited, change their URL format, or disappear — and every mockup that relied on them breaks at once, often during a client presentation.
Generating real files avoids that entirely, and keeps prototypes working offline. Labelling each placeholder with its dimensions also makes layout problems obvious at a glance during review.
/03 Placeholder images for layouts, mockups and fallbacks
A placeholder image stands in for real content while you build. Use one to block out a wireframe before the photography arrives, to test how a card grid behaves when images are very wide or very tall, or as the permanent fallback shown when a product or profile has no picture.
Set any width and height, pick background and text colours, and add a custom label, or start from a preset: HD at 1920 × 1080, Square at 1000 × 1000, Banner at 1200 × 400, Thumb at 300 × 200, Social at 1200 × 630 (the Open Graph share image size) and Avatar at 400 × 400. Download as SVG or PNG.
For a no-image fallback, match the aspect ratio of the images it replaces and use a colour close to your page background. Cards and grids then stay aligned whether or not an item has a picture.
/04 Placeholder image APIs versus local files
Placeholder image services that generate images from a URL are convenient, but every page using them depends on a third-party server staying online, fast and unchanged. Several services have shut down or changed their URLs over the years, instantly breaking every mockup and site that hotlinked them.
A placeholder saved alongside your project has none of those problems. SVG placeholders are especially good for this: a few hundred bytes, sharp at any size, and editable as text if you want to change the label later. Use PNG when a tool only accepts raster images, such as some design apps, email builders and CMS uploaders.