SVG placeholder or URL placeholder
The ximg.es generator serves placeholders as files: https://ximg.es/600x400. That’s the
most convenient option while building a layout, but each image is a request. An inline SVG lives inside the HTML or CSS
itself: it makes no request, weighs around 300 bytes, scales without losing sharpness and works offline. It’s ideal for
prototypes sent by email, design-system components or automated tests.
The data URI is URL-encoded, not Base64: with SVG it’s smaller and stays readable.
What an LQIP is
Low Quality Image Placeholder: a tiny version of the image shown while the real one loads. The space no longer looks blank, the user gets a sense of the content and the page feels faster. The three variants:
- Thumbnail + CSS blur: a 20 px WebP image of a few hundred bytes, scaled up and blurred with CSS. The closest to the original.
- Blurred SVG: the same thumbnail inside an SVG with
feGaussianBlur. It can be used as the background of the<img>itself and the edge stays clean, without the halo thatfilter: blur()leaves. - Average colour: a single colour, the whole image averaged. Zero extra bytes; it’s what Google Images and Pinterest use. ximg.es calculates this same colour for every photo in its bank.
How to use it
Set the LQIP as the background of the <img> (or its container) and keep width and
height so the space already has its size. When the image arrives, it covers the background. No JavaScript needed.