Gerador de imagens de espaço reservado

How It Works

1. Set dimensions: Enter the width and height in pixels for your placeholder image.
2. Customize appearance: Choose background color, text color, and the label text to display (or leave blank for the dimension label).
3. Use or download: Copy the image URL for use in HTML/CSS, or download the PNG directly for mockups and designs.

Why Use Placeholder Image Generator?

During web development and design mockups, you often need images before the real content is ready. Placeholder images fill space in layouts to show proportions, test responsive behavior, and communicate design intent to clients. Instead of searching for stock photos or creating blank images manually, this tool generates properly-sized placeholders instantly with your chosen dimensions and colors.

Features

• Custom dimensions: Any width and height in pixels — square, portrait, landscape, or banner sizes.
• Color customization: Set background and text color using hex codes or color pickers.
• Custom label text: Display any text on the image, or default to the dimension label (e.g., 400×300).
• Instant URL: Get a data URI that can be pasted directly into src attributes for testing.
• PNG download: Download the generated placeholder as a PNG file for use in design tools.

Frequently Asked Questions

Can I use this in HTML src attributes?

Yes. The generated image is available as a data URI that you can paste directly into an <img src=""> attribute in your HTML. No hosting or external URL needed.

What sizes are common for placeholder images?

Common sizes include: hero images (1200×630), blog thumbnails (400×300), avatars (100×100), Open Graph images (1200×628), and banner ads (728×90). Enter any custom size for your specific layout needs.

How do I use placeholder images in CSS?

Copy the data URI and use it as a CSS background: background-image: url("data:image/png;base64,..."). This works in all modern browsers and requires no external files.