Free Online Image Placeholder Services

A picture speaks a thousand words, so we tend to include some useful and relevant images on our websites.

However, when we start building a website, we tend to use some placeholder images before the actual images are created and ready.

Sometimes, we even change image dimensions to check our design, which usually pushes us to create placeholder images of different sizes to check our design. Here comes the need of looking for an online service that creates placeholder images for use on the fly.

Here is the list of some of the popular image placeholder services that are free to use.

Placeholder.com is one of the popular services, which is easy to include images of different sizes and colors with custom text on the fly.

So, let's look at how we can include placeholder images using Placeholder.com.

Basic Use

Placeholder images can be included by providing the below URL and width and height values as shown below.

By default, the width and height values are considered to be in pixels.

<img src="https://via.placeholder.com/150" alt="image-square-150px">
<img src="https://via.placeholder.com/150x100" alt="image-rectangle-150px-100px">

File Extension

A file extension can be provided as shown below, which can be .png, .jpg, .jpeg, or .gif.

<img src="https://via.placeholder.com/150x100.png" alt="image-extension-png">
<img src="https://via.placeholder.com/150x100.jpg" alt="image-extension-jpg">
<img src="https://via.placeholder.com/150x100.jpeg" alt="image-extension-jpeg">
<img src="https://via.placeholder.com/150x100.gif" alt="image-extension-gif">

Custom Text

Custom text can be displayed on the placeholder images as shown below.

<img src="https://via.placeholder.com/400x100.png?text=Visit+RandomCodes.com+Now" alt="image-custom-text">

Background and Text Colors

Background and text colors can also be defined using hex values as shown below.

  • First hex value E41C1C is for background-color and
  • Second hex value FFFFFF is for text color
<img src="https://via.placeholder.com/400x100.png/E41C1C/FFFFFF?text=Visit+RandomCodes.com+Now" alt="image-custom-text">

Example

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>Image Placeholder services from Placeholder.com</h1>
    <h2>Basic Use</h2>
    <img src="https://via.placeholder.com/150" alt="image-square">
    <img src="https://via.placeholder.com/150x100" alt="image-ractangle">

    <h2>File Extensions</h2>
    <img src="https://via.placeholder.com/150x100.png" alt="image-extension-png">
    <img src="https://via.placeholder.com/150x100.jpg" alt="image-extension-jpg">
    <img src="https://via.placeholder.com/150x100.jpeg" alt="image-extension-jpeg">
    <img src="https://via.placeholder.com/150x100.gif" alt="image-extension-gif">

    <h2>Custom Text</h2>
    <img src="https://via.placeholder.com/400x100.png?text=Visit+RandomCodes.com+Now" alt="image-custom-text">

    <h2>Background and Text Colors</h2>
    <img src="https://via.placeholder.com/400x100.png/E41C1C/FFFFFF?text=Visit+RandomCodes.com+Now" alt="image-custom-text">

</body>
</html>

Overall

Avoid spending time creating placeholder images by using online free image placeholder services like Placeholder.com.