Last Updated: March 02, 2024
·
5.072K
· andreathegiant

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:

Picture

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:

Picture

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:

Picture

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

5 Responses
Add your response

This is great.

over 1 year ago ·

You can host YourOwn Image Placeholder Service > http://holder.my-azur.de/#download

over 1 year ago ·

For the same thing with actual pictures you also have placekitten:
http://placekitten.com/200/300 (colors)
http://placekitten.com/g/200/300 (b&w)

over 1 year ago ·

For the same thing, today CSSChopper has launched an Image Placeholder tool that can generate dummy images for your theme. If You want to use this tool, go through this link: http://lab.csschopper.com/placeholder/

over 1 year ago ·

Yet another one I've use is: http://imgholdr.com/

over 1 year ago ·