Most designers are familiar with lore ipsum, used to create filler text where body copy is yet to be written. Image generators cover the same requirement for graphics: if you know the size and shape of an image on your page, but can’t invest the time to hunt down the perfect illustration, using one of the resources below provides a quick, easy, and flexible solution to create a filler image for a mockup.
Most of the services work on the same basic principle: by passing a series of variables to a URL, you generate an image via a script. For example, placehold.it can take just two variables, height and width, in a URL:
- <img src="http://placehold.it/150x150"/>
Used in a browser, this generates a grey 150 x 150 pixel image. Most of the generators have the option of using more variables to add further complexity, including controls for color, text, and theme. I’ve divided the generators into three types: monochromatic, color, and novelty.
Color
Most useful for presenting mockups to clients who may not understand that monochromatic fills are simply placeholders, or who require a little more "visual pizzazz".
flickholdr, shown above, pulls pictures from Flickr (with embedded attribution, to keep to the Creative Commons terms of use) for use as placeholders. Generated images are specified by height, width, tag(s) and color.
Lorempixum generates images of any size that correspond to a particular theme (abstract, food, people, technical, animals, nightlife, nature, sports, transport, city and fashion) in color or greyscale.
Random Image Generator creates abstract, vaguely cellular oil-painted images of any size to one of eight palettes. Can generate multiple images at the same time. This is the only service that does not have an API to easily produce images via a URL: instead, the image must be saved and used directly.
Monochromatic
Monochromatic image fills are most practical when you want to concentrate completely on layout, form, and proportion, without the distraction of color or context.
Previously discussed, placehold.it generates single-color filler images, with options for color, interior text, and format (GIF, JPEG and PNG).
DummyImage offers the same options as placehold.it, but adds keyword shortcuts to create images in dimensions of established internet advertising units (for mocking up advertising banners), screen resolutions and video standards.
Novelty
Need a creative change? Novelty image place holders can work… as long as you are sure that your client shares your sense of humour.
Who doesn’t like kittens? placekitten.com generates images of kittens as filler images.
If, on the other hand, you’re less of a web designer and more of a total bit chin’ rock star from Mars who makes pitches that destroy in the air, you could always decorate your web page mockup with generated Charlie Sheen.