← Back to index

2.1 SVG Transparent Placeholder (Zero-CLS LQIP)

Ragged Edge · inline SVG reserves exact dimensions before the real image paints

Sample photo — layout reserved by SVG placeholder
Caption sits below the media box. The photo is absolutely positioned only inside .lqip-media, so it cannot stretch over this text.

Modern alternative: aspect-ratio: 400 / 300 on a wrapper (no SVG) when dimensions are known from CMS.

To see the reserve space: DevTools → Network → disable cache, throttle “Slow 3G”, reload — layout height stays stable while the JPEG loads.