Fake Images Please?

when you are designing a new website you normally go through a few steps until you have the finished design.

first you will get the requirements for the design from the client, this will lead you to create a wireframe to show the client so you can make sure that it is what they hoped for.

with a wireframe you will get the basic layout of the website but won't really get the look and feel of site for this you need to start the prototyping stage. this is where you will create the site in html including dummy text and dummy images.

the easy thing is to include dummy text as you can use lorem ipsum . but it takes more time to create these images and make sure they are the right size for your design. then if you want to change the sizes of these images you have to go back to your image editor and change the sizes, save the file and add these images back to your prototype page.

the solution is using a placeholder service like fake images please . this service allows you to create fake images at the create sizes using their api, which means you can quickly add these placeholders to your design but just typing in the image url.

just like the examples below.

create an image 300x300

the simplest form of creating an image is to pass in 1 parameter for the size of the image, this will create an image 300 x 300.

<img src="http://fakeimg.pl/300/">

create an image 250 x 100

you can pass in 2 sizes as the first parameter and an image will be created in this size width x height.

<img src="http://fakeimg.pl/250x100/">

create an image 250 x 100 with a red background

a second parameter can be passed to the image for the background color just like the code below will create an image 250 x 100 with a background color of red.

<img src="http://fakeimg.pl/250x100/ff0000/">

create an image 250 x 100 with a red background black text

a third parameter can be passed to set the color of the text to use. the below code will create an image 350 x 200 with a background color of red and a text color of background.

<img src="http://fakeimg.pl/350x200/ff0000/000">

create an image 350 x 200 with text hello

you can change the text that is added to the image by passing in a query string parameter text, the value of this will be the text that is added to the image.

<img src="http://fakeimg.pl/350x200/?text=paulund">

create an image 350 x 200 with text world

another query string parameter of font can be passed in to change the font style, you can use google fonts to select a new style to use on your image.

<img src="http://fakeimg.pl/350x200/?text=world&font=lobster">

conclusion

as you can see it's very easy to create placeholder images for your prototypes and all you have to do change the image source and you can have a different sized image, you can even change the text displayed on your images.

why not try fake images places for your next prototype?

fake images please