Custom Web Design & Development

No More Boring Placeholders!

A list of better placeholders for your web & print projects

Behold! The ubiquitous gray placeholder image.  It's not very exciting to be sure but it serves the intended purpose of reserving layout space for future image insertion.

From PlaceHolder.com

 

What if you're craving more from your work in progress but you don't want to waste precious project time creating custom placeholders in a variety of sizes? Well look no further my friends.  Below are some very nice and a few zany alternatives you can use.  Simply copy & paste the sample code with your width & height values.  Best of all, these placeholder images are hosted on secure HTTPS servers so when previewing your work to clients  you need not worry about mixing secure and non-secure content.

Not Secure
Browser warning about mixed content

 

For purposes of this demo I used the same width & height (300/200) throughout. You will get different image results based on your width & height values. Some sites offer other interesting options too such as colors, filters and much, much more...   So let's get started with better placeholders.

 

SUBJECT SAMPLE CODE WEBSITE
Dummy Image Generator

<img src="https://dummyimage.com/300x200" alt="placeholder">

Use hex codes for background & foreground colors:
https://dummyimage.com/300x200/13518f/ffffff

Add custom text:
https://dummyimage.com/300x200/13518f/ffffff&text=Custom+Text

 DummyImage.com
Animals

<img src="https://placeimg.com/300/200/animals" alt="placeholder">

Filter: /sepia or /gray
https://placeimg.com/300/200/animals/sepia
https://placeimg.com/300/200/animals/gray

 PlaceIMG.com
Architecture

<img src="https://placeimg.com/300/200/arch" alt="placeholder">

Filter: /sepia or /gray
https://placeimg.com/300/200/arch/sepia
https://placeimg.com/300/200/arch/gray

 PlaceIMG.com
Nature

<img src="https://placeimg.com/300/200/nature" alt="placeholder">

Filter: /sepia or /gray
https://placeimg.com/300/200/nature/sepia
https://placeimg.com/300/200/nature/gray

 PlaceIMG.com
People

<img src="https://placeimg.com/300/200/people" alt="placeholder">

Filter: /sepia or /gray
https://placeimg.com/300/200/people/sepia
https://placeimg.com/300/200/people/gray

 PlaceIMG.com
Technology

<img src="https://placeimg.com/300/200/tech" alt="placeholder">

Filter: /sepia or /gray
https://placeimg.com/300/200/tech/sepia
https://placeimg.com/300/200/tech/gray

 PlaceIMG.com
Various (1000 + images)

<img src="https://unsplash.it/300/200" alt="placeholder">

Gray: https://unsplash.it/g/300/200
Random: https://unsplash.it/300/200?random
Blurred: https://unsplash.it/300/200?blur
Specific Image Number: https://unsplash.it/300/200?=299

 UnSplash.it
Bill Murray

<img src="https://www.fillmurray.com/300/200" alt="placholder">

Gray: https://www.fillmurray.com/g/300/200

 FillMurray.com
Nicholas Cage

<img src="https://placecage.com/300/200" alt="placholder">

Gray: https://placecage.com/g/300/200
Crazy: https://placecage.com/c/300/200

PlaceCage.com
Steven Segal

<img src="https://stevensegallery.com/300/200" alt="placholder">

Gray: https://stevensegallery.com/g/300/200

 StevenSegallery.com
Bears

<img src="https://www.placebear.com/300/200" alt="placeholder">

Gray: https://www.placebear.com/g/300/200

 PlaceBear.com
Zombies

<img src="https://placezombie.com/300x200" alt="placholder">

Gray: https://placezombie.com/g/300x200

Maximum size: 1000x1000

 PlaceZombie.com
Bacon

<img src="https://baconmockup.com/300/200" alt="placeholder">

 BaconMockup.com

 

Before anyone gets upset with me for NOT mentioning Placekitten.com or Lorempixel.com among others, I intentionally left them off this list because their images are not securely hosted on HTTPS servers. When and if that changes I'll happily revise this article to include them.

So there you have it folks.  A rich assortment of secure placeholders for all your web & print projects.  Enjoy!

 

By Nancy O'Shea, ACP / Web Developer
Web Site: https://alt-web.com