Dummy Images

When we're building wireframes for clients very often use dummy content like lorem ipsum text and placeholder images to show the client what the content might look like.

We came across http://dummyimage.com/ which allows you to create images of an appropriate size programatically. There are loads of these services around (including several that use pictures of kittens) but dummyimage.com had a php-only approach with multiple file-types and a clean, simple look that complemented our wireframes:

 Now this is all very well and good but after a quick look at the code for this I decided we could do more with it too. After a little work we were able to create special types of images for specific content: Profile images, photographs and videos.


In this way it becomes a snap to create new lorem ipsum images. Just create a tag linking to your customized dummy image provider. We like to keep ours next to the website so the whole thing can be viewed offline on MAMP:


<img src="/di/600x400/000/fff"/>


There we go. No fuss, no muss and no loading of photoshop.

Go ahead and try out our dummy image creator:


We've disabled hotlinking but you can check out our own customization and make your own on GitHub:


Big props are due to Russell Heimlich (@kingkool68) who gave us the original.