Thanks to Duncan Stephen’s blog post about dummy images, I was inspired to add a new feature.

All of the customisation options have got us excited, but I can think of a few more features that would improve it even further.

The ability to set a width and an aspect ratio, for those times when you know you need a 16:9 image but just can’t be bothered to get the calculator out.

What a great idea! It took me an hour or two to thoroughly test the new feature to my satisfaction and push it live. I’ve also updated the documentation and source code for anyone who wants to take a look to see how it’s done.

You can use aspect ratios with the width like so:

http://dummyimage.com/640×4:3

or with the height

http://dummyimage.com/16:9×1080

I enjoy adding new features that make a designer/developers life a bit easier. If you have something that you would like to see dummyimage.com do, let me know!

Ordered by when the domain name was registered.

1. http://dummyimage.com (2007-07-20)
2. http://fpoimg.com (2010-01-26)
3. http://www.ipsumimage.com (2010-02-03)
4. http://nosrc.net (2010-02-04)
5. http://placehold.it (2010-02-04)
6. http://placekitten.com (2010-11-22)
7. http://placehold.us (2011-01-14)
8. http://placedog.com (2011-03-01)
9. http://flickholdr.com (2011-03-05)
10. http://placesheen.com (2011-03-07)
11. http://lorempixum.com (2011-03-23)
12. http://placepuppy.it (2011-04-11)

Other Dummy Image Generators that I couldn’t figure out when they were created

• http://ipsumimage.appspot.com (???)
• http://mrspeaker.github.com/lowersrc/ (???)

I’m glad dummyimage.com inspired others to build a placeholder image service and expand upon my original idea. You can download my source code and do whatever you want with it.

Thanks to Web Resource Depot for the round-up where I first heard about many of these sites.

As 2010 is wrapping up, I decided to take some time to chronicle the history of one of my biggest web development milestones of the year.

In December of 2006, I started my first real job out of college as a frontend developer at USNews.com. My first big project was to turn a new site design from a collection of Photoshop documents into functioning HTML and CSS code. I had to slice up dummy images to put into the layouts. As the redesign process wore on, sizes of elements changed ever so slightly meaning I needed to make new images with each iteration. I had wished there was a way to conjure up these placeholder images on the fly. I ended up tucking that idea away in the back of mind.

For whatever reason I decided to purchase the domain dummyimage.com on the 20th of July, 2007. I can’t remember if I had some early prototype version working by then but I had made up my mind that I was going to do something with this idea. Like most tinkering web devs, I have a stable of domains for other ideas sitting around until one day when I can get around to them. Dummyimage.com was not like those other ideas.

Fast forward to August 11th, 2007, when I attended my first Bar Camp in Washington DC. I had mentioned my dummy image idea to Jason Garber and Jeremy Carbaugh in passing. They said it was a cool idea and should be pretty easy to do.

From then on, I was determined to figure out how to make my idea work. Aside from toying around in WordPress (which resulted in this blog you’re reading now) I had zero experience with PHP. I was quite comfortable with JavaScript however and found PHP easy to pickup. On August 26th, 2007, I had launched my first version of dummyimage.com.

The first release was as simple as could be. The only thing you could change were the dimensions of the images. Everything was a gray background with the size of the image in centered black Arial text. I released the source code via a no-frills zip archive for anyone to take it and do what they wanted. I didn’t even bother with a design for the site itself thinking only a handful of people would even see it.

Around December of 2009 I began toying with some new capabilities for dummyimage.com. The biggest request I got was for the ability to change the colors of the background and text. I didn’t really see the point so I sat around on the new changes. Then on January 25th, 2010. My friend Charlie Park (whom I met at the first DC Bar Camp in 2007) tweeted out a link mentioning dummyimage.com My site made its way through the developer community like wildfire thanks to HackerNews, and Twitter. Suddenly I felt the need to get working on new features and a redesign for dummyimage.com based on the feedback that was pouring in.

On March 10th, 2010, (Chuck Norris’ Birthday & International Day of Awesomeness) I launched version 2 of dummyimage.com.This added color options, the ability to customize the text displayed on the image, and a simple form on the homepage to make generating custom dummy images easier. I switched the typeface from Arial to a completely free and open font called M+. I also released the source code under the liberal MIT license based on feedback I had gotten.

I wanted the new dummyimage.com look to be a little rebellious. Most sites are centered align in relation to the browser. I deliberately made the dummyimage.com homepage align to the right. You can really notice this the larger your monitor’s resolution is. One person even sent me an e-mail providing a CSS tweak to make it center align. He thought I had made a mistake.

Since other people were doing other things with the dummyimage idea like making plugins for text editors and different platforms, I decided to curate those and link to them from dummyimage.com I was happy to see my idea taking hold with the community, even spreading to non-english areas of the web. I guess the simplicity of my little project transcends language barriers.

Dummyimage.com gets about 10,000 unique visits to it’s one and only page. It’s single largest day of traffic was January 26th, 2010, with 15,766 unique visits. Of course most of the traffic comes from people embedding images into their pages. I get about 5.8 million requests (pageviews essentially) for a total of 11.4 gigabytes of bandwidth in a typical month. I have gigs and gigs of server logs to analyze if I really wanted specifics but I leave dummyimage.com’s server stats open for anyone to take a look at.

With the redesign I aimed to make a little extra change by placing 3 ad units to the left. They probably bring in a couple dollars a month via Amazon.com referrals. I don’t really pay attention to that stuff.

So all in all I’m happy with where dummyimage.com has come and it makes for a great milestone in 2010. Hopefully in 2011 I can manage to launch even bigger projects I have in mind.

Ever since the surge of interest in my pet project dummyimage.com I’ve been meaning to add some new features. Today is the International Day of Awesomeness (which coincides with Chuck Norris’ birthday) and I couldn’t think of a better time to unveil DummyImage.com‘s new functionality to the public.

Here is a run down of the changes:

Specify Custom Colors

You can choose the background and foreground colors of the dummy image right in the url using a 6,3,2, or even 1 character hexcode. Don’t worry if you forget to do this as dummy image will default to gray and black.

Add Your Own Text

A lot of people wanted to be able to add their own text to a dummy image to better communicate what it is representing. Now using the &text= parameter you can.

A Better Typeface

Arial be damned! Font geeks cringed at my basic choice of a font. Some seemed worried about my distribution of the most popular font on Earth. Now both camps can be happy as I’m now using the completely free and open M+ Font. I also changed the X in the middle of the images to a multiplication sign × as pointed out by Erinah and Dave Cortright.

Standard Image Sizes

Dummyimage.com is a useful prototyping tool and a lot of prototypes and wireframes have ad positions. Instead of memorizing dimensions you can now bring up ad sizes by their industry-standard name like largerectangle, skyscraper, and fullbanner. You can even customize the colors, text, and formats of theses sizes as well.

Pick Your Format

Before you could add any image format extension to the url but my script would still generate a GIF image everytime. Now you can generate proper PNG, JPG, and GIF images and drag them into another app trouble free.

And with these new features I figured it was time to give the site a proper, though still simple, design. Rather than bury how these features work in long, boring text I made a little tool that shows you everything you need to know with minimal fuss.

Not a fan of change? Don’t worry, you can still use Dummyimage.com to generate place holder images exactly the same way you have always been doing it.

So thank you to everyone who has e-mailed me, tweeted me, left a comment on a post somewhere or otherwise provided feedback on dummyimage.com. I’m glad so many people found it as useful as I think it is. Keep the ideas and dummyimage variations coming. I’m sure this thing could be better.

Way back in August of 2007 I built a simple PHP tool that generates place-holder images at different size by simply changing the URL. The idea came to me when I was working on a redesign for USNews.com. I hated opening up Photoshop, creating a new document,  filling the background layer, and exporting for web just to make a simple placeholder image. That is why I made dummyimage.com.

I figured it would be useful to other people which is why I also released the complete source code, documented and including instructions for setting it up on your own server. But like most new things, few gave it any notice.

The other day my friend Charlie Park (founder of Pear Budget) found it when doing some in-browser wire-framing and sent out a tweet to all of his followers. But he didn’t stop there. Charlie also posted it to Hacker News, a simple news aggregator aimed at geeks. It was obvious that my little tool was resonating with other developers with the tagline “Lorem ipsom for images.” In 24 hours, the Hacker News story got 161 votes with 77 comments, 513 people bookmarked it on del.icio.us, and 337 tweets.

What really struck me was how dummyimage.com was crossing the language barrier. I saw tweets mentioning in Spanish, Japanese, Russian, German, Dutch, even Latvian. I’m glad my idea was simple enough that foreign speakers could easily pick it up without any translation help.

All of this sudden attention also produced helpful feedback and new feature ideas. I started working on an update this past December for a few additions I wanted to see but this recent surge of interest has lit a fire under my butt to continue developing. As is the nature of opensource software, people don’t have to wait for me; they can adapt the code to their own needs. Here are some iterations that have already been made:

• Fakeimage (Ruby)
• Placeholder_image (Ruby)
• Lorem ipsom for Images (JavaScript/jQuery)

And somewhere down the line I would like to give it an attractive homepage. Hooray for side projects!

Over the weekend I worked on a little micro project to help me during web development work. Have you ever needed a dummy image while laying out a site but opening a graphics app, entering the dimensions, saving it out, and uploading said image to your server seemed like too much work? Yea it was a bother for me to.

That’s why I created DummyImage.com which let’s you spit out a filler image at any size you want. All you have to do is construct a URL like so http://dummyimage.com/300×240. Replace the numbers with whatever you want and my script will spit back a GIF image for you.

I have even packaged up the source code so you can download it, run it on your own server, mash it to bits or whatever else you want. Comments, suggestions, improvements are always welcome and hopefully this thing won’t take down my server from all of the image generating on the back end.

Happy Dummy Imaging!