What Are Placeholder Images?
Image placeholder are temporary visuals used during development and design to occupy image slots before real assets are available. Every interface that displays photos, thumbnails, avatars, banners, or product shots needs something in those positions while the layout is being built and reviewed. Without a reliable source of sized, colored dummy images, developers resort to committing random screenshots to version control, hardcoding absolute paths to local files that break on other machines, or leaving broken image icons that make layout review impossible.
The Image Placeholder API by GLOBUS.studio solves this cleanly: pass a width, height, and HEX color — receive a PNG image with exactly those dimensions and that background, generated in 2ms and returned directly in the HTTP response. No file storage, no CDN dependency, no setup.
API Endpoint and Parameters
GET https://api.globus.studio/v2/ph_image?width={px}&height={px}&color={hex}width— image width in pixelsheight— image height in pixelscolor— background color in HEX format, URL-encoded (e.g.%23FF5733for#FF5733)
The API converts the HEX value to RGB internally and returns a PNG image via the HTTP response with the appropriate Content-Type: image/png header — making it directly embeddable as an <img> src with zero client-side processing. Full parameter reference is available on the Image Placeholder API documentation page.
Request Examples
200×150 — Coral Background
GET /v2/ph_image?width=200&height=150&color=%23FF5733100×100 — Green Square
GET /v2/ph_image?width=100&height=100&color=%2300FF00300×200 — Blue Banner
GET /v2/ph_image?width=300&height=200&color=%230000FFInline in HTML
<img
src="https://api.globus.studio/v2/ph_image?width=800&height=400&color=%23CCCCCC"
alt="Placeholder banner"
width="800"
height="400"
/>Common Use Cases
Theme and Template Prototyping
When building a WordPress theme, HTML template, or component library, every image slot — hero banner, featured post thumbnail, author avatar, product image grid — needs a correctly sized visual to verify that proportions, spacing, and overflow behavior are working as intended. Calling the Image Placeholder API with the exact pixel dimensions defined in the design spec guarantees that the placeholder matches the real asset’s footprint precisely, eliminating layout shifts when real images are swapped in later.
Responsive Design Testing
Testing responsive breakpoints requires images at the exact dimensions each breakpoint expects. Rather than maintaining a folder of test images at every size variant, a responsive template can generate breakpoint-specific placeholders dynamically — 1200×630 for desktop OG images, 600×315 for tablet, 300×157 for mobile — all from a single API pattern. Color-coding each breakpoint variant makes it visually obvious which image is loading at which viewport.
WordPress Plugin and Block Development
Gutenberg block previews and Classic Editor metaboxes that display image regions need a fallback when no real attachment has been selected yet. A plugin can point the preview <img> tag at the Placeholder API using the block’s configured width and height, passing a neutral grey or brand-color HEX. This produces a clean, contextually sized preview in the editor without bundling any image assets in the plugin’s file structure.
Email Template Development
HTML email templates are notoriously fragile around images. During development, email clients need real HTTP-accessible image URLs — local file paths do not work. The Image Placeholder API is publicly accessible by definition, so placeholder <img> tags pointing to the endpoint render correctly in every email client preview tool and inbox test service without any hosting or upload step.
UI Component Libraries and Design Systems
Component libraries built with Storybook, Styleguidist, or similar tools display components in isolation, populated with example data. Image slots in card components, avatar components, and media objects can point to the Placeholder API with semantically meaningful color choices — grey for photos, a brand accent for illustrations — giving each story a consistent, intentional appearance across the entire design system documentation.
Database Seeding with Visual Content
When seeding a staging CMS or e-commerce platform with dummy products, posts, or user profiles, every record typically includes an image URL. Rather than pointing all records at the same static file, a seed script can vary the dimensions and color per record — simulating the visual diversity of a real content library and making the staged interface look significantly more realistic during client demos or QA sessions.
PDF and Document Generation
PDF generation pipelines that render report templates, invoices, or presentation decks often include image regions — company logos, chart placeholders, section dividers — that may not be finalized when the template is first built. Pointing those regions at the API with the correct dimensions and a brand-appropriate HEX color keeps the generated PDF visually coherent throughout the development cycle without blocking on asset delivery.
Social Media OG Image Previews
Open Graph images follow specific dimension conventions: Facebook recommends 1200×630 pixels for link previews. During development of pages or blog posts, pointing the og:image meta tag at the Placeholder API with those exact dimensions lets developers verify that scrapers and preview tools pick up the tag correctly — before a real image is ready for production.
HEX Color URL Encoding
HEX color values begin with a # symbol, which must be URL-encoded as %23 when passed as a query parameter. Most HTTP client libraries handle this automatically when using their built-in parameter encoding — but when constructing URLs manually or in plain HTML attributes, the substitution must be made explicitly:
// HEX: #FF5733
// URL-encoded: %23FF5733
https://api.globus.studio/v2/ph_image?width=400&height=300&color=%23FF5733Integration Examples
cURL — Save to File
curl -o placeholder.png \
"https://api.globus.studio/v2/ph_image?width=800&height=400&color=%23CCCCCC"JavaScript — Dynamic Placeholder Injection
function placeholder(width, height, hex) {
const color = encodeURIComponent(hex);
return `https://api.globus.studio/v2/ph_image?width=${width}&height=${height}&color=${color}`;
}
document.querySelectorAll('img[data-placeholder]').forEach(img => {
img.src = placeholder(
img.dataset.width || 300,
img.dataset.height || 200,
img.dataset.color || '#CCCCCC'
);
});PHP
function globus_placeholder( $width, $height, $hex = '#CCCCCC' ) {
$color = rawurlencode( $hex );
return "https://api.globus.studio/v2/ph_image?width={$width}&height={$height}&color={$color}";
}
echo '<img src="' . esc_url( globus_placeholder( 800, 400 ) ) . '" alt="Placeholder" />';Python
import requests
from urllib.parse import quote
def get_placeholder(width, height, hex_color='#CCCCCC'):
color = quote(hex_color)
return requests.get(
f'https://api.globus.studio/v2/ph_image?width={width}&height={height}&color={color}'
).content
with open('placeholder.png', 'wb') as f:
f.write(get_placeholder(800, 400, '#3A86FF'))WordPress (PHP) — Fallback Thumbnail
add_filter( 'post_thumbnail_html', function( $html, $post_id ) {
if ( $html ) {
return $html;
}
$color = rawurlencode( '#CCCCCC' );
$src = "https://api.globus.studio/v2/ph_image?width=800&height=450&color={$color}";
return '<img src="' . esc_url( $src ) . '" alt="Placeholder thumbnail" />';
}, 10, 2 );Performance
At 2ms average latency, the Image Placeholder API generates and returns a binary PNG in less time than most database queries take to resolve. The response requires no client-side processing — the image is ready to render the moment the response completes. For production use cases where the same dimensions and color are requested repeatedly, proxying through a CDN or WordPress object cache adds a caching layer with negligible configuration overhead, reducing origin requests to near zero.
Explore all parameters and test live image generation on the Image Placeholder API documentation page.