Skip navigation

A list of better placeholders for your web & print projects

Originally appeared at https://alt-web.com/TUTORIALS/?id=no-more-boring-placeholders

 

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.

 

SUBJECTSAMPLE CODEWEBSITE
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