Placeholder Images for Every Project

Quickly create dummy images with custom sizes, colors, and text for all your design and development needs.

Learn More →

Introduction

Welcome to the Placeholder Service documentation! Our tool helps you generate dynamic placeholder images for prototyping, design, and testing. From basic size adjustments to advanced color and text customizations, we’ve got you covered.

Basic Usage

To create a basic placeholder image, use the following URL format:

https://www.codewithfaraz.com/tools/placeholder?size=WIDTHxHEIGHT

Example:

https://www.codewithfaraz.com/tools/placeholder?size=500x300

Note: The height parameter is optional. If you only provide the width, the image will automatically be square (height will be the same as width).

https://www.codewithfaraz.com/tools/placeholder?size=500

Advanced Features

Enhance your placeholder images with the following parameters:

bgColor: Define background color in HEX (e.g., #FF5733 or FF5733)
textColor: Define text color in HEX (e.g., #FFFFFF)
text: Add custom text to the image (New lines are represented using \n)
format: Specify the image format (png, jpg, webp)

Example:


https://www.codewithfaraz.com/tools/placeholder?size=600x400&bgColor=000000&textColor=FFFFFF&format=jpg&text=Custom\nText

Error Handling

If an invalid size or other parameter is provided, the service defaults to a standard placeholder (e.g., 500x350) and displays an error message in the image.

https://www.codewithfaraz.com/tools/placeholder?size=invalid

Integration Tips

Use our placeholder images in modern HTML designs. For example, integrate them into a Bootstrap card or a hero section for prototyping.


<div class="card">
    <img src="https://www.codewithfaraz.com/tools/placeholder?size=300x200" alt="Placeholder">
    <div class="card-body">
        <p>Placeholder description</p>
    </div>
</div>