Placehold.it When designing for the web, placeholder images can come in handy during initial layout, and even during wireframing, if you happen to wireframe in markup. I’ve been using a TextExpander snippet to generate instant placeholder images at any size (almost) and with appropriate titles using Placehold.it. It’s a really handy snippet to have in your web design toolkit.

Just create a new plain text snippet, title it “Placeholder Image,” give it whatever shortcut makes sense to you, and then add this code:

<img src="http://placehold.it/%fill:width%x%fill:height%/333333/dddddd&text=%fill:title%" alt="%fill:title%" width="%fill:width%" height="%fill:height%" />

It uses TextExpander 3’s Fill feature to get the width, height and title from you before it inserts the image tag. If you have multiple words in your title, use plus signs (+) instead of spaces (url encoded). I’ll be turning this into a TextMate snippet soon, too, and I’ll post that when I have another minute. I’d love to hear about any other great tools you’re using!