The GIFPNG service a cdn image placeholder engine to fill your in-development sites and mockups with real, random images instead of boring gray boxes.

You can use your own images or any freely available creative commons images. Use as many as you like — obviously the more you use, the more random and varied the engine will be. It doesn't matter what size, aspect ratio or orientation you use, PlaceHolder will work out the best fit when generating the placeholder image.

How does it work? Just put your image size after our URL and you'll get a placeholder.

Size

Size must be the first option in the url. Height is optional, if no height is specified the image will be a square.

<img src="http://gifpng.com/{width}">
<img src="http://gifpng.com/{width}x{height}">

Colors

Support for URL slug and parameter type. Colors are represented as hex codes (#ffffff is white). the first color is always the background color and the second color is the text color. The default background color is #cccccc, default text color is #666666.

<img src="http://gifpng.com/300/{background-color}/{text-color}">
<img src="http://gifpng.com/300/?background-color={background-color}&color={text-color}">

Other than possible values are random.

<img src="http://gifpng.com/300/random/ffffff">

Example

<img src="http://gifpng.com/300">
<img src="http://gifpng.com/300/333333/ffffff">
<img src="http://gifpng.com/random/ffffff">
<img src="http://gifpng.com/random/random">

Border width

Sets the border width of the numeric text. The value must be a number greater than 0. The default value is 1.

<img src="http://gifpng.com/300/?border-width=2">

Border color

Colors are represented as hex codes. The default value is #7e7e7e.

<img src="http://gifpng.com/300/?border-color=ff6600">

Border type

Acceptable operations for border type are: rectangle, thick. The default value is thick.

<img src="http://gifpng.com/300/?border-type=rectangle">

Example

<img src="http://gifpng.com/300/?border-width=2">
<img src="http://gifpng.com/300/333333/ffffff/?border-color=ffc000&border-width=2">
<img src="http://gifpng.com/300/?border-width=10&border-type=rectangle&border-color=555555">
<img src="http://gifpng.com/300/?border-width=0">

Text

The text value to set on the image. This value must be supplied if text is to be rendered. All other text parameters are ignored if this value is not set. we has full support for UTF-8 characters which means appropriate rendering for additional languages and emoji.

<img src="http://gifpng.com/300/?text={customtext}">

Line break

A line break ends the line you are currently on and resumes on the next line. possible values are \n, \r, \r\n.

<img src="http://gifpng.com/300/?text=This is a line{\n}this should be a new line">

Text align

The alignment of the text within the image. Possible values are one or more of left, center, right. The default value is center.

<img src="http://gifpng.com/300/?text={customtext}&text-align=center">

Vertical align

The vertical alignment of the text within the image. Possible values are one or more of top, middle, bottom. The default value is middle.

<img src="http://gifpng.com/300/?text={customtext}&vertical-align=middle">

White space

Sets the which region of the string to clip if it is too long. Possible values are one or more of normal, nowrap. The default value is normal.

<img src="http://gifpng.com/300/?text={customtext}&white-space=nowrap">

Line height

line-height specifies the height that is used to calculate line box height. The default value is 1.5.

<img src="http://gifpng.com/300/?text={customtext}&line-height=2.5">

Font size

Sets the font size of the text. The value must be a number greater than 0. The default value is 20.

<img src="http://gifpng.com/300/?font-size=10">

Example

<img src="http://gifpng.com/300/?text=English">
<img src="http://gifpng.com/300/?text=한국어&line-height=2.5">
<img src="http://gifpng.com/300/?text=中國語&text-align=right">
<img src="http://gifpng.com/300/?text=日本語&vertical-align=bottom">

Listed below are all of the options available to customize image to suite your needs, along with their default values.

Download

When set with an <a> tag, will force a browser to download an image instead of opening the image in a new window.

<a href="http://gifpng.com/300/?download">Download</a>