Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!

16 shares







What Is Placeholder.com?

Placeholder.com generates custom placeholder images on the fly, like these examples:-







How To Use Our Placeholders

Just specify the image size after our URL (https://via.placeholder.com/) and you’ll get a placeholder image. So the image URL should look this:-

https://via.placeholder.com /150

You can use the images in your HTML or CSS, like this:

<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>

(Be sure to check out our HTML & CSS tutorials at HTML.com, our sister site, if you’re rusty)

There are a few simple rules before you use them.

How To Set Image Size

Specify the width first, then height. Height is optional: if no height is specified, your placeholder image will be a square. So this example…

https://via.placeholder.com /150

…generates a 150 pixel square dummy image:-

NB: Size must be the first folder specified in the URL

How To Set Image Formats

Image format is optional – the default is a .GIF. You can use the following image file extensions…

.GIF

.JPG

.JPEG

.PNG

Adding an image file extension will render the image in the correct format. JPG & JPEG are identical. The image extension can go at the end of any option in the URL, like this:-



https://via.placeholder.com/300 .png /09f/fff

/09f/fff https://via.placeholder.com/300/09f .png /fff

/fff https://via.placeholder.com/300/09f/fff .png





How To Set Custom Text

You can specify text for your image by using a query string at the very end of the URL.

So this URL…

https://via.placeholder.com/728x90.png ?text=Visit+WhoIsHostingThis.com+Buyers+Guide

…produces this 728×90 sized image (ie, leaderboard ad dimensions):-

Text is optional. The default is the image dimensions in pixels. You can use A-Z characters, upper or lowercase, numbers, and most symbols. Spaces are specified with a plus sign (+). For example…

https://via.placeholder.com/468x60 ?text=Visit+Blogging.com+Now

…will produces this placeholder banner ad plus the text (complete with spaces):-

(PS. Looking for dummy text? We now have lorem ipsum & more placeholder text to download).

How To Set Background & Text Color

By default, text is black and the background grey.

Colors are represented as hex codes after the dummy image dimensions. For example, #FF0000 is red. Colors must follow the dimensions. So this image URL…

https://via.placeholder.com/150 /0000FF/808080 ?Text=Digital.com

https://via.placeholder.com/150 /FF0000/FFFFFF ?Text=Down.com

https://via.placeholder.com/150 /FFFF00/000000 ?Text=WebsiteBuilders.com

https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net

…produces images in the shape of 125×125 button ad:-

The first color is always the background color, and the second color is the text color.

Popular Hex Color Codes

White – FFFFFF

Black – 000000

Red – FF0000

Blue – 0000FF

Yellow – FFFFFF

Green – 008000

New! WEBP Support

In January 2019, we added support for Google’s new WEBP image format.

New! HTTPS Support

SSL is a big deal for any webmaster in 2018. Your placeholder images will work with or without HTTPS…



http:// via.placeholder.com/300

https:// via.placeholder.com/300



…called from HTTP or HTTPS domains.

NEW! Placeholder Logos, Text & Banners Ads

Any Questions?

We’ve got answers. Please see our frequently asked questions page.