Formats
WebP, AVIF, and PNG for layout and performance tests
Modern frontends mix formats. Targeted placeholders show whether picture elements, Accept headers, and CDN caches really deliver what you expect.
PNG: transparency and UI slots
PNG remains the default for alpha and sharp UI placeholders. Use the transparent generator when testing overlays, logo slots, or masks. For large photo slots PNG is often unnecessarily heavy — prefer WebP there.
WebP: everyday modern browsers
WebP works well as the default placeholder for cards, heroes, and thumbnails. Generate the same composition as WebP and JPG to verify fallback branches in markup. Quality and file size are adjustable in the generator.
AVIF: next codec step
AVIF helps with A/B and codec comparisons. Not every client decodes AVIF equally well — an AVIF placeholder next to WebP quickly shows whether your stack degrades cleanly or shows a blank image.
Layout checklist
Check aspect-ratio, object-fit, CLS (fixed boxes), lazy loading, and srcset. Change only the format at the same pixel size so layout differences come from the codec — not from different dimensions.
From format converter to inspector
Upload an existing asset, convert it, and compare MIME, dimensions, and metadata in the image inspector. That validates pipeline steps before real production media runs through.
FAQ
Which format should I pick by default?
For most web placeholders: WebP. For transparency: PNG or WebP with alpha. Add AVIF when you actively roll out that codec.
Can I control quality?
Yes — in the dummy image generator and format converter via the quality control (where the format supports it).