Inline LQIP in prerendered HTML
The Image Optimization feature page promises that "a tiny, blurred version
of the image appears immediately". In build/index.html every <img> carries background-image: url(/_app/immutable/assets/ramil.IadSoftK.avif) — a network request that races the real image and often loses.
Cause
lqipInliner in vite.config.js runs in generateBundle and regex-replaces lqip:"/_app/..." inside JS chunks. The server build that prerenders HTML renders the raw
asset URL, and the plugin never touches HTML output.
Tasks
- Inline the 16px variant at transform time instead: a custom imagetools
output format (the existing
run()inimagetools.js) can read the buffer and emit adata:image/avif;base64string directly - Delete the
generateBundleregex plugin - Verify no
background-image: url(/_app/remains inbuild/**/*.html; add that check to the tests
Read next
