Simple Image Placeholder Service

  • Avinash
  • 2
  • Nov 14, 2011
  • Tips & Tricks

Today I have found a very nice site with very useful service. They are providing dummy image placeholder for web page. So i thought to share with all.

The site is placehold.it.

Earlier I have posted about generating dynamic dummy images. This site gives same functionality with some better features.

Lets see how this works.

Load Default Placeholder

Default placeholder can be loaded easily by just passing width and height.

 <!-- Load image with 350*150 dimension-->
 <img src="http://placehold.it/350x150">

 <!-- Load image with 100*100 dimension-->
 <img src="http://placehold.it/350x150">

Demo

Diffrent Image Format

By default this will provide a gif image. But we can change that to either png, jpg or jpeg by just passing an extension.

  <img src="http://placehold.it/250X100.jpg">
 
  <img src="http://placehold.it/250X100.png">

Add Your Own Text

By default image will contain dimension of the images we have requested. But we can add our own text on image too. By passing just text parameter as shown below. You need to replace spaces with the + sign.

   <img src="http://placehold.it/250X100/&text=avinash">
   
   <img src="http://placehold.it/350X100/&text=Expert+Developer">

Demo

Modify Color of the Image

Its not done yet. You can modify the background color and text color also to make suitable for your web page. One thing needs to keep is mind is that color should be declared after dimension only.

  <img src="http://placehold.it/DIMENSION/BACKGROUND_COLOR/TEXT_COLOR" />
 
  <img src="http://placehold.it/350X100/FFF/000" />

Demo

Visit Placehold.it for more information.

Coclusion

This type of service will very useful while you are creating a mockups for your webpages and you do not have original images to place.
What you think?. If you know about any other services like this, please consider to share with us.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • http://placebox.es Kenney

    I really like this type of service, and would share http://placebox.es. It provides similair functionality as the one mentioned, but also supports custom text size and style, as well as gradient shading on the placeholders.

  • http://blogcritics.org/music/article/jazz-workshop-the-90s-and-smooth/page-3/ Debora

    Mу brother suggеѕtеԁ I may
    liκe this web site. He used to bе totаlly right.

    This post aсtuаlly mаdе my dау.
    You can not believe ѕimplу hoω a lot time I had ѕpent for this info!
    Thanks!