What Is Placeholder.com?
Placeholder.com generates custom placeholder images on the fly, like these examples:-
Contents
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
- https://via.placeholder.com/300/09f.png/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
- Placeholder Logos – Free logo mockups to download
- Placeholder Text – Free placeholder text
- Placeholder Banner Ads – Dummy banner ads in common IAB dimensions
Any Questions?
We’ve got answers. Please see our frequently asked questions page.