Component
Image
Published on
Description
The img element from @willfarrell-ds/svelte/elements/ renders a native <img> that loads lazily and decodes off the main thread. It never grows wider than its container.
Broken image
When an image fails to load, the browser shows its alt text in its place. The design system sets that text in italics with balanced line breaks, so it reads as a description and not as page copy. A loaded image looks the same as before.
<Img src="/img/missing.jpg" alt="A red fox curled up asleep in fresh snow" />Placeholder
Pass lqip to Image to paint a blurred colour preview behind the image while it loads. The value is one integer, which CSS decodes into a base colour and a 3×2 grid of lighter and darker patches. The loaded image covers it. No JavaScript runs.
The prop renders as a data-lqip attribute, which CSS reads with attr(), so it works under a CSP that blocks inline styles. Browsers without typed attr() show no placeholder.
The integer is a 20-bit value minus 219. Bits 18–8 hold six 2-bit cell lightness values, bits 7–6 the base lightness, bits 5–3 the oklab a and bits 2–0 the oklab b.
Accessibility
- Every image needs an
alt. Describe what the image shows, or usealt=""when it is decorative (WCAG 1.1.1) - The alt text keeps the inherited text colour, so it has the same contrast as body text in light, dark and forced colours modes
References
Variables
--lqip— the encoded placeholder integer, read fromdata-lqip