Need placeholder images for your prototype?

If you're wireframing or prototyping and need a good placeholder image that doesn't distract too much, use Placehold.it. Especially for HTML prototyping, Placehold.it is an excellent resource as it removes the need to place any files within your file structure. In your code, just write

`<img src="http://placehold.it/350x150">`

This will produce a gray box with the text "350x150" on it, like this:

Specifying the height (in the case, 150) is not necessary. If a height is not indicated, the placeholder image will be a square.

For something a little more descriptive, you can add text to the URL to replace the text that appears on the gray box. Like so:

`<img src="http://placehold.it/350x150&text=Hello+World!">`

This URL will create this image:

The text attribute of the URL supports alphanumeric characters and most symbols. Spaces should be replaced with the + symbol.

The default file format is a gif, but you can specify which file type you prefer between gif, png, jpg, and jpeg. Just append it to the dimensions, like so:

`<img src="http://placehold.it/300.png/">`

Lastly, you can go wild with text and background colors using hex values. The URL will need a couple new attributes to do this.

`<img src="http://placehold.it/300.png/000000/ffffff">`

The first hex value you see (which is for black) determines the background color. The second, the text color. This produces the following result:

Hooray! Now you know how to use Placehold.it for all your image placeholder needs.