qmajva
Last Updated: February 25, 2016
·
3.273K
· andreathegiant
Profile

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.

Say Thanks
Respond

5 Responses
Add your response

7567
2049569972e3e90750ad009bf6d45b55

This is great.

over 1 year ago ·
7603
1daf8ce0b66eb86f8d7f163b2aca135f

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

over 1 year ago ·
7696
5bbb7d9ecc1f4fe80ac5580c2fd07113

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 ·
16386
7b3785c5ee5a62ba8944fad501238b48 normal

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 ·
17197
Ec228f87c819802787a1c737f764ef20

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

over 1 year ago ·