So you’re creating a new site, but you haven’t gotten all those great images yet from your designer. To be able to continue working you might need some images that can give the look and feel of a more finished site. Here are some sites that can help you with just that, some professional and some lets say more creative alternatives.
Professional alternatives
Lorem Picsum
Features
- Specify width and height
- Grayscale images
- Random images
- Get specific image
- Images as JSON
Sample
Sample usage
https://picsum.photos/420/320?image=0
Sample image
Lorempixel
Features
- Specify width and height
- Grayscale images
- Random images
- Image by category
- Get specific image
- Text on image
Sample
Sample usage
https://lorempixel.com/420/320/abstract/1/Sample
Sample image
placeholder.com
Features
- Specify width and height
- Custom background color
- Custom font color
- Custom text
Sample
Sample usage
https://via.placeholder.com/420x320/ff7f7f/333333?text=Sample
Sample image
Fake images please?
Features
- Specify width and height
- Custom background color (and transparent background)
- Custom font + color
- Custom text
Sample
Sample usage
https://fakeimg.pl/420x320/ff0000,128/333333,255/?text=Sample&font=lobster
Sample image
Dynamic Dummy Image Generator
Features
- Specify width and height
- Custom background color
- Custom font color
- Custom text
- Multiple image format
- Predefined image size standards (ad sizes, screen- and video standards)
- Bonus: It’s open source
Sample
Sample usage
https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample
Sample image
PlaceIMG
Features
- Specify width and height
- Images based on categories
- Blur, grayscal and sepia effect
Sample
Sample usage
https://placeimg.com/420/320/tech/grayscale
Sample image
Ipsum Image
Features
- Specify width and height
- Custom background color
- Custom font color
- Custom text
- Multiple image format
Sample
Sample usage
https://ipsumimage.appspot.com/420x320,ff7700
Sample image
Img
LoremFlickr
Features:
Specify width and height
Images based on categories
Images based on color
Sample
Sample usage
https://loremflickr.com/420/320?lock=1
Sample image
Img
KeywordIMG
Features:
Specify width and height
Custom background image from keyword
Sample
Sample usage
https://keywordimg.com/420x320/random
Sample image
Img
DummySrc
Features:
Specify width and height
Custom background color
Custom font color
Custom text
Multiple image format
Sample
Sample usage
http://www.dummysrc.com/430x320.png/22c5fc/17202A
Client side alternative
Sometimes you might not want to actually import an image from the scary internet, or maybe you would like to be able to work offline. In that case you could use a placeholder javascript framework.
One of those alternatives is Holder.js
Creative alternatives
A great alternative to those stiff and boring regular placeholders is to use a lets say more creative place holder. Down below follows some great placeholders focusing on more fun portraits.
Animals
Placekitten
Sample code
https://placekitten.com/420/320?image=2
Sample image
Img
Placebear
Sample code
https://placebear.com/420/320?image=2
Sample image
Img
Celebrities
Fill Murray
Sample code
https://www.fillmurray.com/420/320
Sample image
Img
Steven Segallery
Sample code
https://www.stevensegallery.com/420/320
Sample image
Img
Misc
Placebacon
Sample code
http://placebacon.net/420/320?image=2
Bacon Mockup
Sample code
https://baconmockup.com/420/320
Sample image
Img
Placebeard
Sample code
Sample image
Img
Bonus
Need a clean and simple way to align your website layout? No complex grid frameworks necessary. Check out griddle.it
The basic URL structure to use for all grid shapes and sizes is:
http://griddle.it/[total width]-[number of columns]-[gutter size]
Simply set the URL as the background image on your body element. For example:
/* Generate a 960px grid, with 12 columns and 30px gutter */
body {
background: url(http://griddle.it/960-12-30) repeat-y center top;
}