T••LBX: Placeholder Images

This is a simple and free server for placeholder images. If you want to populate a test website, a wireframe or a prototype, then punch the right URL and we will serve it for you.

For example if you want a 200x300 yellow image:

https://www.tlbx.app/200-300-e6cf8b.svg
Yellow portrait rectangle

It is like using the URL of any image on our website. The filename is the width, the height and the hexadecimal value of the color separated with "-". The file extension is always ".svg" (see the next section if you want to know why we use this format).

If you omit the color, it will be a middle grey by default:

https://www.tlbx.app/200-300.svg
Grey portrait rectangle

If you omit the second number as well, it will be a square:

https://www.tlbx.app/200.svg
Grey square

How are the images created ?

If you are interested in technical details, we create images in the SVG format. Since SVG is essentially text, it is easy to generate with code, and easy to compress. Also the SVG format describes vectors instead of pixels. Which means the dimensions of the image will not increase the file size.

Here is what the code of a 200x300 yellow rectangle would be (indented for legibility):

<svg 
  version='1.1' 
  width='200' 
  height='300' 
  xmlns='http://www.w3.org/2000/svg'
>
  <rect width='100%' height='100%' fill='#e6cf8b' />
</svg>

This is obviously only scratching the surface. You can do all the shapes you want with groupings and transformations. Here is a good tutorial about SVG to get you started. And here is another one to learn how to do animations in SVG.