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() in imagetools.js) can read the buffer and emit a data:image/avif;base64 string directly
  • Delete the generateBundle regex plugin
  • Verify no background-image: url(/_app/ remains in build/**/*.html; add that check to the tests

Instant placeholders

A data URI, not a round trip

A static site template built with SvelteKit.

Sveleton, 2025