How To Show Dummy Images To Use As Placeholder In Designs

If you happen to be a designer or work in a printing press then you must know that, when we need to show dummy text we just don’t add junk characters or just copy-past anything from anywhere. There are some international slandered dummy texts which designers and print media use, one of the most slandered dummy texts used by most of the designers is known as “Lorem Ipsum”.

But when it comes to show dummy images (placeholder) there is nothing such to use, most people use stock (copyrighted) images to show in placeholder, if accidentally it got published with that copyrighted stock image we can get into problem. So there are few sites which provide such services which we can easily use as images placeholder. One of them is and which I liked most is DummyImage.com. It’s simple, user friendly and we can use it easily wherever we want.

You can set any width, height, background color, foreground (text) color, select type or format (GIF, PNG or JPG) you want the dummy image to be in and if you like to show any custom text on that images placeholder .

You can set your requirements in a URL in following format:

http://dummyimage.com/WIDTHxHEIGHT/BG_COLOR_CODE/FG_COLOR_CODE.TYPE&text=CUSTOM_TEXT

Now replace:
WIDTH: width of your image
HEIGHT: height of your image
BG_COLOR_CODE: background color in Hex code
FG_COLOR_CODE: foreground color in Hex code
TYPE: which image type or format it should be in (GIF, PNG or JPG)
CUSTOM_TEXT: add the text which you want t show in image

And use that URL in an img tag, here are few example how you can use it:

<!-- for squire images -->
<img src="http://dummyimage.com/250" title="" />
<!-- with background and text colors -->
<img src="http://dummyimage.com/300x260/fff/000" alt="" title="" />
<!-- image type -->
<img src="http://dummyimage.com/300x260/fff/000.png" alt="" title=""  />
<!-- custom Text -->
<img src="http://dummyimage.com/300x260fff/000.png&text=Hello+World!" alt="" />
<!-- custom Text without defining color -->
<img src="http://dummyimage.com/300x260&text=Your Mom Goes to College" />

Note:-

• If you need to use Plus sign (+), Hash sign (#), Percent sign (%) or Ampersand/And sign (&) then instead of using those signs use these UTF-8 Hex code 0x2B (for +), 0x23 (for #), 0x25 (for %) and 0x26 (for &) respectively
• If you want to use x in between numbers to show in custom text on image then use multiplication sign (×) else you will run into problem. E.g.: If you try to manually enter a dimension as text and if the numbers uses the UTf-8 Hex values above, like &text=300×260. Use a multiplication symbol, × instead (not an x character) to get around this, &text=300×260

If you want to run this on your own server then its PHP source code is also available under Creative Common license.