Placeholder Image Formats

SVG placeholder images are the default format on PlaceholderImage.co. Because SVG is vector-based, a single SVG placeholder image looks crisp on every screen from a 100px thumbnail to a 4K display. SVG placeholder images are ideal for responsive web design because they automatically scale to fill their container without any pixelation.

/600x400/1c1c1e/22c55e

image/svg+xml

Advantages

• Infinite scalability — perfect for any screen resolution
• Smallest file size of all formats
• Supports transparent backgrounds natively
• Retina-ready without any extra configuration

Limitations

• Not supported as background-image in some legacy email clients
• Cannot be used in some non-browser environments

Best For

UI mockups, responsive layouts, CSS backgrounds, any context where scalability matters

<img src="https://placeholderimage.co/600x400/1c1c1e/22c55e" width="600" height="400" alt="SVG placeholder image" />

PNG is the most widely used raster placeholder image format. Use PNG placeholder images when your framework requires a raster format, when you need guaranteed transparency support, or when using Next.js Image component with strict type checking. PlaceholderImage.co generates PNG placeholder images server-side using a high-performance WASM renderer.

/600x400/1c1c1e/22c55e/png

image/png

Advantages

• Lossless compression — no image quality degradation
• Supports full alpha transparency
• Universally supported across all browsers and environments
• Required by Next.js Image component and some native app frameworks

Limitations

• Larger file size than SVG or WebP
• Not infinitely scalable — fixed pixel dimensions

Best For

React/Next.js projects, mobile apps (Flutter/React Native), anywhere raster format is required

<img src="https://placeholderimage.co/600x400/1c1c1e/22c55e/png" width="600" height="400" alt="PNG placeholder image" />

JPEG placeholder images provide the smallest file size among raster formats. While JPEG does not support transparency, it is the best choice for large-dimension placeholder images where bandwidth matters. Use JPEG placeholder images for hero banners, article covers, and background images.

/600x400/1c1c1e/22c55e/jpg

image/jpeg

Advantages

• Smallest raster file size
• Universally supported in every browser and platform
• Standard format for photography and realistic images

Limitations

• Lossy compression — slight quality reduction
• Does not support transparency

Best For

Large banner images, photo-heavy layouts, anywhere bandwidth optimization is a priority

<img src="https://placeholderimage.co/600x400/1c1c1e/22c55e/jpg" width="600" height="400" alt="JPEG placeholder image" />

WebP placeholder images are recommended for modern web projects. WebP provides better compression than both PNG and JPEG, which improves page load speed and Core Web Vitals scores. Use WebP placeholder images in Next.js, Nuxt, Astro, or any modern framework that handles image optimization.

/600x400/1c1c1e/22c55e/webp

image/webp

Advantages

• 20–35% smaller than JPEG at equal quality
• Supports transparency (lossless mode)
• Supported by all modern browsers (Chrome, Firefox, Safari 14+, Edge)

Limitations

• Not supported in very old browsers (IE11)
• Slightly more complex to serve with proper fallbacks

Best For

Modern web projects prioritizing performance, Core Web Vitals optimization

<img src="https://placeholderimage.co/600x400/1c1c1e/22c55e/webp" width="600" height="400" alt="WebP placeholder image" />

AVIF is the next-generation placeholder image format with the best compression of any format available today. On PlaceholderImage.co, AVIF requests are served as PNG on Cloudflare Pages due to WASM encoding limitations, but the URL and Content-Type are correctly specified.

/600x400/1c1c1e/22c55e/avif

image/avif

Advantages

• Best compression ratio of all formats
• Supports both lossy and lossless modes
• Supports transparency
• Increasingly supported (Chrome 85+, Firefox 93+, Safari 16+)

Limitations

• Slower encoding than other formats
• Not supported on Cloudflare Pages edge (falls back to PNG)
• Limited support in older browsers

Best For

Cutting-edge projects, future-proofing, browsers that support it

<img src="https://placeholderimage.co/600x400/1c1c1e/22c55e/avif" width="600" height="400" alt="AVIF placeholder image" />

GIF placeholder images offer maximum compatibility for legacy environments. While GIF is an older format, it remains useful for HTML email templates and environments that do not support modern formats. On PlaceholderImage.co, GIF placeholder images fall back to PNG output on the Cloudflare edge.

/600x400/1c1c1e/22c55e/gif

image/gif

Advantages

• Universal compatibility — supported everywhere
• Can be used in HTML emails
• Lightweight for simple solid-color images

Limitations

• Limited to 256 colors — unsuitable for gradients
• No support for partial transparency
• Falls back to PNG on Cloudflare Pages edge

Best For

Legacy systems, HTML email templates, maximum compatibility requirements

<img src="https://placeholderimage.co/600x400/1c1c1e/22c55e/gif" width="600" height="400" alt="GIF placeholder image" />